diff --git a/.husky/pre-commit b/.husky/pre-commit
index 9ed4084..d1ee147 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint:staged && yarn dependencies:checkCircular && yarn dependencies:graph
\ No newline at end of file
+yarn run pre-commit
\ No newline at end of file
diff --git a/config/env.js b/config/env.js
index b758778..3d1411b 100644
--- a/config/env.js
+++ b/config/env.js
@@ -9,7 +9,9 @@ delete require.cache[require.resolve('./paths')];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
-  throw new Error('The NODE_ENV environment variable is required but was not specified.');
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
@@ -28,12 +30,12 @@ const dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach((dotenvFile) => {
+dotenvFiles.forEach(dotenvFile => {
   if (fs.existsSync(dotenvFile)) {
     require('dotenv-expand')(
       require('dotenv').config({
         path: dotenvFile,
-      }),
+      })
     );
   }
 });
@@ -50,8 +52,8 @@ dotenvFiles.forEach((dotenvFile) => {
 const appDirectory = fs.realpathSync(process.cwd());
 process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .split(path.delimiter)
-  .filter((folder) => folder && !path.isAbsolute(folder))
-  .map((folder) => path.resolve(appDirectory, folder))
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -60,7 +62,7 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter((key) => REACT_APP.test(key))
+    .filter(key => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
@@ -88,7 +90,7 @@ function getClientEnvironment(publicUrl) {
         // which is why it's disabled by default.
         // It is defined here so it is available in the webpackHotDevClient.
         FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      },
+      }
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
diff --git a/config/modules.js b/config/modules.js
index 261dd4a..d63e41d 100644
--- a/config/modules.js
+++ b/config/modules.js
@@ -44,8 +44,8 @@ function getAdditionalModulePaths(options = {}) {
   throw new Error(
     chalk.red.bold(
       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
-        ' Create React App does not support other values at this time.',
-    ),
+        ' Create React App does not support other values at this time.'
+    )
   );
 }
 
@@ -98,7 +98,7 @@ function getModules() {
 
   if (hasTsConfig && hasJsConfig) {
     throw new Error(
-      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.',
+      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
     );
   }
 
diff --git a/config/paths.js b/config/paths.js
index 4a483e3..4e3d30e 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -7,7 +7,7 @@ const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
@@ -18,7 +18,7 @@ const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 const publicUrlOrPath = getPublicUrlOrPath(
   process.env.NODE_ENV === 'development',
   require(resolveApp('package.json')).homepage,
-  process.env.PUBLIC_URL,
+  process.env.PUBLIC_URL
 );
 
 const buildPath = process.env.BUILD_PATH || 'build';
@@ -39,7 +39,9 @@ const moduleFileExtensions = [
 
 // Resolve file paths in the same order as webpack
 const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find((extension) => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
+  const extension = moduleFileExtensions.find(extension =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`))
+  );
 
   if (extension) {
     return resolveFn(`${filePath}.${extension}`);
@@ -68,4 +70,6 @@ module.exports = {
   publicUrlOrPath,
 };
 
+
+
 module.exports.moduleFileExtensions = moduleFileExtensions;
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 3082319..d7f95dd 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -34,8 +34,12 @@ const appPackageJson = require(paths.appPackageJson);
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
-const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
-const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
+const webpackDevClientEntry = require.resolve(
+  'react-dev-utils/webpackHotDevClient'
+);
+const reactRefreshOverlayEntry = require.resolve(
+  'react-dev-utils/refreshOverlayInterop'
+);
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
@@ -44,7 +48,9 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
 const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
 
-const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -79,7 +85,8 @@ module.exports = function (webpackEnv) {
 
   // Variable used for enabling profiling in Production
   // passed into alias object. Uses a flag if passed into the build command
-  const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile');
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
 
   // We will provide `paths.publicUrlOrPath` to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
@@ -97,7 +104,9 @@ module.exports = function (webpackEnv) {
         loader: MiniCssExtractPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {},
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? { publicPath: '../../' }
+          : {},
       },
       {
         loader: require.resolve('css-loader'),
@@ -143,7 +152,7 @@ module.exports = function (webpackEnv) {
           options: {
             sourceMap: true,
           },
-        },
+        }
       );
     }
     return loaders;
@@ -192,7 +201,9 @@ module.exports = function (webpackEnv) {
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js',
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
@@ -205,8 +216,12 @@ module.exports = function (webpackEnv) {
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
-        : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+        ? info =>
+            path
+              .relative(paths.appSrc, info.absoluteResourcePath)
+              .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
       // Prevents conflicts when multiple webpack runtimes (from different apps)
       // are used on the same page.
       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
@@ -289,7 +304,7 @@ module.exports = function (webpackEnv) {
       // https://twitter.com/wSokra/status/969679223278505985
       // https://github.com/facebook/create-react-app/issues/5358
       runtimeChunk: {
-        name: (entrypoint) => `runtime-${entrypoint.name}`,
+        name: entrypoint => `runtime-${entrypoint.name}`,
       },
     },
     resolve: {
@@ -297,7 +312,9 @@ module.exports = function (webpackEnv) {
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
+      modules: ['node_modules', paths.appNodeModules].concat(
+        modules.additionalModulePaths || []
+      ),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
       // some tools, although we do not recommend using it, see:
@@ -305,8 +322,8 @@ module.exports = function (webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map((ext) => `.${ext}`)
-        .filter((ext) => useTypeScript || !ext.includes('ts')),
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -327,7 +344,10 @@ module.exports = function (webpackEnv) {
         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
         // please link the files into your node_modules/ and let module-resolution kick in.
         // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson, reactRefreshOverlayEntry]),
+        new ModuleScopePlugin(paths.appSrc, [
+          paths.appPackageJson,
+          reactRefreshOverlayEntry,
+        ]),
       ],
     },
     resolveLoader: {
@@ -376,7 +396,9 @@ module.exports = function (webpackEnv) {
               include: paths.appSrc,
               loader: require.resolve('babel-loader'),
               options: {
-                customize: require.resolve('babel-preset-react-app/webpack-overrides'),
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
                 presets: [
                   [
                     require.resolve('babel-preset-react-app'),
@@ -385,19 +407,22 @@ module.exports = function (webpackEnv) {
                     },
                   ],
                 ],
-
+                
                 plugins: [
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                          ReactComponent:
+                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                         },
                       },
                     },
                   ],
-                  isEnvDevelopment && shouldUseReactRefresh && require.resolve('react-refresh/babel'),
+                  isEnvDevelopment &&
+                    shouldUseReactRefresh &&
+                    require.resolve('react-refresh/babel'),
                 ].filter(Boolean),
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -418,11 +443,16 @@ module.exports = function (webpackEnv) {
                 babelrc: false,
                 configFile: false,
                 compact: false,
-                presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    { helpers: true },
+                  ],
+                ],
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-
+                
                 // Babel sourcemaps are needed for debugging into node_modules
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
@@ -442,7 +472,9 @@ module.exports = function (webpackEnv) {
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -456,7 +488,9 @@ module.exports = function (webpackEnv) {
               test: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
                 modules: {
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
@@ -471,9 +505,11 @@ module.exports = function (webpackEnv) {
               use: getStyleLoaders(
                 {
                   importLoaders: 3,
-                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
                 },
-                'sass-loader',
+                'sass-loader'
               ),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -488,12 +524,14 @@ module.exports = function (webpackEnv) {
               use: getStyleLoaders(
                 {
                   importLoaders: 3,
-                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
                   modules: {
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
                 },
-                'sass-loader',
+                'sass-loader'
               ),
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.
@@ -542,13 +580,15 @@ module.exports = function (webpackEnv) {
                   minifyURLs: true,
                 },
               }
-            : undefined,
-        ),
+            : undefined
+        )
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
       // https://github.com/facebook/create-react-app/issues/5358
-      isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
       // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
@@ -589,7 +629,8 @@ module.exports = function (webpackEnv) {
       // to restart the development server for webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvDevelopment &&
+        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
@@ -611,7 +652,9 @@ module.exports = function (webpackEnv) {
             manifest[file.name] = file.path;
             return manifest;
           }, seed);
-          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
 
           return {
             files: manifestFiles,
@@ -646,8 +689,12 @@ module.exports = function (webpackEnv) {
           }),
           async: isEnvDevelopment,
           checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
+          resolveModuleNameModule: process.versions.pnp
+            ? `${__dirname}/pnpTs.js`
+            : undefined,
+          resolveTypeReferenceDirectiveModule: process.versions.pnp
+            ? `${__dirname}/pnpTs.js`
+            : undefined,
           tsconfig: paths.appTsConfig,
           reportFiles: [
             // This one is specifically to match during CI tests,
@@ -674,7 +721,10 @@ module.exports = function (webpackEnv) {
           failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
           context: paths.appSrc,
           cache: true,
-          cacheLocation: path.resolve(paths.appNodeModules, '.cache/.eslintcache'),
+          cacheLocation: path.resolve(
+            paths.appNodeModules,
+            '.cache/.eslintcache'
+          ),
           // ESLint class options
           cwd: paths.appPath,
           resolvePluginsRelativeTo: __dirname,
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 8d76f10..6c43a8a 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -32,7 +32,8 @@ module.exports = function (proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    disableHostCheck:
+      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
     // Enable gzip compression of generated files.
     compress: true,
     // Silence WebpackDevServer's own logs since they're generally not useful.
diff --git a/package.json b/package.json
index 87d5d90..40f35d0 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,15 @@
 {
   "name": "react-web-boilerplate",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
-    "lint": "eslint ./src",
-    "lint:staged": "pretty-quick --staged && lint-staged",
+    "lint": "eslint --fix --max-warnings=0 './src/**/*.{js,jsx,ts,tsx}'",
+    "pre-commit": "yarn lint && lint-staged && yarn dependencies:checkCircular && yarn dependencies:graph",
+    "prettier:fix": "prettier --write ./src",
+    "prettier:check": "prettier --check ./src",
     "dependencies:checkCircular": "madge src/ --circular",
     "dependencies:graph": "madge src/ --circular --image deps-graph.svg",
     "start:development": "env-cmd -f src/env/.env.development yarn start",
@@ -110,12 +112,11 @@
     "workbox-webpack-plugin": "5.1.4"
   },
   "lint-staged": {
-    "*.{ts,tsx}": "eslint --cache --fix"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint:staged && yarn dependencies:checkCircular && yarn dependencies:graph"
-    }
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "yarn prettier:fix",
+      "yarn prettier:check",
+      "git add"
+    ]
   },
   "madge": {
     "tsConfig": "./tsconfig.json",
diff --git a/public/index.html b/public/index.html
index 6a9f8c2..aa069f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/scripts/build.js b/scripts/build.js
index 7073bfe..05f340f 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -7,13 +7,14 @@ process.env.NODE_ENV = 'production';
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', (err) => {
+process.on('unhandledRejection', err => {
   throw err;
 });
 
 // Ensure environment variables are read.
 require('../config/env');
 
+
 const path = require('path');
 const chalk = require('react-dev-utils/chalk');
 const fs = require('fs-extra');
@@ -27,7 +28,8 @@ const printHostingInstructions = require('react-dev-utils/printHostingInstructio
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
 
-const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
@@ -57,7 +59,7 @@ checkBrowsers(paths.appPath, isInteractive)
     // This lets us display how much they changed later.
     return measureFileSizesBeforeBuild(paths.appBuild);
   })
-  .then((previousFileSizes) => {
+  .then(previousFileSizes => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
     fs.emptyDirSync(paths.appBuild);
@@ -72,9 +74,15 @@ checkBrowsers(paths.appPath, isInteractive)
         console.log(chalk.yellow('Compiled with warnings.\n'));
         console.log(warnings.join('\n\n'));
         console.log(
-          '\nSearch for the ' + chalk.underline(chalk.yellow('keywords')) + ' to learn more about each warning.',
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
         );
-        console.log('To ignore, add ' + chalk.cyan('// eslint-disable-next-line') + ' to the line before.\n');
       } else {
         console.log(chalk.green('Compiled successfully.\n'));
       }
@@ -85,7 +93,7 @@ checkBrowsers(paths.appPath, isInteractive)
         previousFileSizes,
         paths.appBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
       );
       console.log();
 
@@ -93,15 +101,21 @@ checkBrowsers(paths.appPath, isInteractive)
       const publicUrl = paths.publicUrlOrPath;
       const publicPath = config.output.publicPath;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
     },
-    (err) => {
+    err => {
       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
       if (tscCompileOnError) {
         console.log(
           chalk.yellow(
-            'Compiled with the following type errors (you may want to check these before deploying your app):\n',
-          ),
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
         );
         printBuildError(err);
       } else {
@@ -109,9 +123,9 @@ checkBrowsers(paths.appPath, isInteractive)
         printBuildError(err);
         process.exit(1);
       }
-    },
+    }
   )
-  .catch((err) => {
+  .catch(err => {
     if (err && err.message) {
       console.log(err.message);
     }
@@ -135,7 +149,9 @@ function build(previousFileSizes) {
 
         // Add additional information for postcss errors
         if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
-          errMessage += '\nCompileError: Begins at CSS selector ' + err['postcssNode'].selector;
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
         }
 
         messages = formatWebpackMessages({
@@ -143,7 +159,9 @@ function build(previousFileSizes) {
           warnings: [],
         });
       } else {
-        messages = formatWebpackMessages(stats.toJson({ all: false, warnings: true, errors: true }));
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
       }
       if (messages.errors.length) {
         // Only keep the first error. Others are often indicative
@@ -155,14 +173,15 @@ function build(previousFileSizes) {
       }
       if (
         process.env.CI &&
-        (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
         messages.warnings.length
       ) {
         console.log(
           chalk.yellow(
             '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n',
-          ),
+              'Most CI servers set it automatically.\n'
+          )
         );
         return reject(new Error(messages.warnings.join('\n\n')));
       }
@@ -177,7 +196,7 @@ function build(previousFileSizes) {
         return bfj
           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
           .then(() => resolve(resolveArgs))
-          .catch((error) => reject(new Error(error)));
+          .catch(error => reject(new Error(error)));
       }
 
       return resolve(resolveArgs);
@@ -188,6 +207,6 @@ function build(previousFileSizes) {
 function copyPublicFolder() {
   fs.copySync(paths.appPublic, paths.appBuild, {
     dereference: true,
-    filter: (file) => file !== paths.appHtml,
+    filter: file => file !== paths.appHtml,
   });
 }
diff --git a/scripts/start.js b/scripts/start.js
index 8a237ca..92c2671 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -7,20 +7,26 @@ process.env.NODE_ENV = 'development';
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', (err) => {
+process.on('unhandledRejection', err => {
   throw err;
 });
 
 // Ensure environment variables are read.
 require('../config/env');
 
+
 const fs = require('fs');
 const chalk = require('react-dev-utils/chalk');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const clearConsole = require('react-dev-utils/clearConsole');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const { choosePort, createCompiler, prepareProxy, prepareUrls } = require('react-dev-utils/WebpackDevServerUtils');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
 const semver = require('semver');
 const paths = require('../config/paths');
@@ -44,10 +50,18 @@ const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {
   console.log(
-    chalk.cyan(`Attempting to bind to HOST environment variable: ${chalk.yellow(chalk.bold(process.env.HOST))}`),
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
   );
-  console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`);
-  console.log(`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`);
   console.log();
 }
 
@@ -60,7 +74,7 @@ checkBrowsers(paths.appPath, isInteractive)
     // run on a different port. `choosePort()` Promise resolves to the next free port.
     return choosePort(HOST, DEFAULT_PORT);
   })
-  .then((port) => {
+  .then(port => {
     if (port == null) {
       // We have not found a port.
       return;
@@ -72,10 +86,17 @@ checkBrowsers(paths.appPath, isInteractive)
 
     const useTypeScript = fs.existsSync(paths.appTsConfig);
     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-    const urls = prepareUrls(protocol, HOST, port, paths.publicUrlOrPath.slice(0, -1));
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
     const devSocket = {
-      warnings: (warnings) => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: (errors) => devServer.sockWrite(devServer.sockets, 'errors', errors),
+      warnings: warnings =>
+        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors =>
+        devServer.sockWrite(devServer.sockets, 'errors', errors),
     };
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
@@ -90,12 +111,19 @@ checkBrowsers(paths.appPath, isInteractive)
     });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic, paths.publicUrlOrPath);
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
     // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig);
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
     const devServer = new WebpackDevServer(compiler, serverConfig);
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, (err) => {
+    devServer.listen(port, HOST, err => {
       if (err) {
         return console.log(err);
       }
@@ -104,7 +132,11 @@ checkBrowsers(paths.appPath, isInteractive)
       }
 
       if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
-        console.log(chalk.yellow(`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`));
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
+          )
+        );
       }
 
       console.log(chalk.cyan('Starting the development server...\n'));
@@ -126,7 +158,7 @@ checkBrowsers(paths.appPath, isInteractive)
       });
     }
   })
-  .catch((err) => {
+  .catch(err => {
     if (err && err.message) {
       console.log(err.message);
     }
diff --git a/src/App.tsx b/src/App.tsx
index 0cf1fc5..c5e9a95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,15 @@
-import * as React from "react";
-import { FC, useEffect, useLayoutEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import FontFaceObserver from "fontfaceobserver";
-import { CSSReset, useToast, Flex } from "@chakra-ui/react";
-import { Switch, Route } from "react-router-dom";
-import { messageHandlerFullInfo } from "redux/messageHandler/selectors";
-import { messageHandlerReset } from "redux/messageHandler/actions";
-import WBHeader from "components/WBHeader";
-import ScrollToTop from "components/ScrollToTopOnMount";
-import Homepage from "pages/Homepage";
-import AnotherPage from "pages/AnotherPage";
+import * as React from 'react';
+import { FC, useEffect, useLayoutEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import FontFaceObserver from 'fontfaceobserver';
+import { CSSReset, useToast, Flex } from '@chakra-ui/react';
+import { Switch, Route } from 'react-router-dom';
+import { messageHandlerFullInfo } from 'redux/messageHandler/selectors';
+import { messageHandlerReset } from 'redux/messageHandler/actions';
+import WBHeader from 'components/WBHeader';
+import ScrollToTop from 'components/ScrollToTopOnMount';
+import Homepage from 'pages/Homepage';
+import AnotherPage from 'pages/AnotherPage';
 
 const App: FC = () => {
   const dispatch = useDispatch();
@@ -17,21 +17,21 @@ const App: FC = () => {
   const hasGeneralMessage = useSelector(messageHandlerFullInfo);
 
   // Remember to change the name of the font based on what you are using
-  const font = new FontFaceObserver("Nunito+Sans");
+  const font = new FontFaceObserver('Nunito+Sans');
   const html = document.documentElement;
 
   useLayoutEffect(() => {
-    html.classList.add("fonts-loading");
+    html.classList.add('fonts-loading');
 
     font
       .load()
       .then(function () {
-        html.classList.remove("fonts-loading");
-        html.classList.add("fonts-loaded");
+        html.classList.remove('fonts-loading');
+        html.classList.add('fonts-loaded');
       })
       .catch(function () {
-        html.classList.remove("fonts-loading");
-        html.classList.add("fonts-failed");
+        html.classList.remove('fonts-loading');
+        html.classList.add('fonts-failed');
       });
   });
 
diff --git a/src/components/WBContainer/index.tsx b/src/components/WBContainer/index.tsx
index 9988980..36a6132 100644
--- a/src/components/WBContainer/index.tsx
+++ b/src/components/WBContainer/index.tsx
@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from "react";
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex } from '@chakra-ui/react';
+import { FC, ReactNode } from 'react';
 
 interface IWBContainer {
   children: ReactNode;
@@ -7,22 +7,17 @@ interface IWBContainer {
   mt?: string | number;
 }
 
-const WBContainer: FC<IWBContainer> = ({ children, px, mt = "80px" }) => {
+const WBContainer: FC<IWBContainer> = ({ children, px, mt = '80px' }) => {
   return (
-    <Box mx="auto" px={px} pt={{ base: "56px", lg: "0" }} mt={mt} width="100%">
+    <Box mx="auto" px={px} pt={{ base: '56px', lg: '0' }} mt={mt} width="100%">
       <Flex
         align="flex-end"
-        px={{ base: "12px" }}
+        px={{ base: '12px' }}
         pt="32px"
         pb="80px"
         // height={{ height: 'calc(100% - 80px)' }}
       >
-        <Box
-          maxW={{ lg: "1224px" }}
-          display={{ base: "none", lg: "block" }}
-          w="100%"
-          mx="auto"
-        >
+        <Box maxW={{ lg: '1224px' }} display={{ base: 'none', lg: 'block' }} w="100%" mx="auto">
           <Box>{children}</Box>
         </Box>
       </Flex>
diff --git a/src/components/WBHeader/index.tsx b/src/components/WBHeader/index.tsx
index 9511ccf..5f7ce9e 100644
--- a/src/components/WBHeader/index.tsx
+++ b/src/components/WBHeader/index.tsx
@@ -1,41 +1,28 @@
-import React, { FC } from "react";
-import { Box, Flex } from "@chakra-ui/react";
-import WBMenu from "components/WBMenu";
-import { palette } from "theme/theme";
+import { Box, Flex } from '@chakra-ui/react';
+import WBMenu from 'components/WBMenu';
+import { FC } from 'react';
+import { palette } from 'theme/theme';
 
 const WBHeader: FC = () => {
   return (
     <Box
       shadow="0 5px 10px 0px rgba(0, 0, 0, 0.15)"
-      position={{ base: "fixed" }}
+      position={{ base: 'fixed' }}
       top={0}
       w="100%"
       zIndex={{ base: 9999, lg: 99 }}
-      display={{ base: "none", lg: "block" }}
+      display={{ base: 'none', lg: 'block' }}
     >
-      <Flex
-        as="nav"
-        align="center"
-        justify="center"
-        wrap="wrap"
-        pt={{ lg: "10px" }}
-        bg={palette.WHITE}
-        w="100%"
-      >
+      <Flex as="nav" align="center" justify="center" wrap="wrap" pt={{ lg: '10px' }} bg={palette.WHITE} w="100%">
         <Flex
           w="100%"
-          maxW={{ lg: "calc(1224px + 106px)" }}
+          maxW={{ lg: 'calc(1224px + 106px)' }}
           justify="space-between"
           minH="56px"
-          p={{ base: "18px 16px", lg: "0px 55px" }}
+          p={{ base: '18px 16px', lg: '0px 55px' }}
           mx="auto"
         >
-          <Box
-            display={{ base: "none", lg: "flex" }}
-            alignSelf="center"
-            justifyContent="center"
-            flexGrow={1}
-          >
+          <Box display={{ base: 'none', lg: 'flex' }} alignSelf="center" justifyContent="center" flexGrow={1}>
             <WBMenu />
           </Box>
         </Flex>
diff --git a/src/components/WBLoader/index.tsx b/src/components/WBLoader/index.tsx
index a146386..1893fc8 100644
--- a/src/components/WBLoader/index.tsx
+++ b/src/components/WBLoader/index.tsx
@@ -1,7 +1,7 @@
-import React, { FC } from "react";
-import { css } from "@emotion/react";
-import MoonLoader from "react-spinners/MoonLoader";
-import { palette } from "theme/theme";
+import { css } from '@emotion/react';
+import { FC } from 'react';
+import MoonLoader from 'react-spinners/MoonLoader';
+import { palette } from 'theme/theme';
 
 const override = css`
   display: block;
diff --git a/src/components/WBMenu/index.tsx b/src/components/WBMenu/index.tsx
index 8cca627..e14b4bf 100644
--- a/src/components/WBMenu/index.tsx
+++ b/src/components/WBMenu/index.tsx
@@ -1,8 +1,8 @@
-import React, { FC, ReactNode } from "react";
-import { NavLink } from "react-router-dom";
-import { Box, Divider } from "@chakra-ui/react";
-import { isActivePage } from "utils";
-import { palette } from "theme/theme";
+import { Box, Divider } from '@chakra-ui/react';
+import React, { FC, ReactNode } from 'react';
+import { NavLink } from 'react-router-dom';
+import { palette } from 'theme/theme';
+import { isActivePage } from 'utils';
 
 interface IMenuItems {
   children: ReactNode;
@@ -11,8 +11,8 @@ interface IMenuItems {
 const MenuItems: FC<IMenuItems> = ({ children }) => (
   <Box
     textAlign="center"
-    pl={{ lg: "8px", xl: "11px" }}
-    pr={{ lg: "8px", xl: "11px" }}
+    pl={{ lg: '8px', xl: '11px' }}
+    pr={{ lg: '8px', xl: '11px' }}
     color={palette.WET_ASPHALT}
     fontSize="lg"
     lineHeight="22px"
@@ -37,7 +37,7 @@ const WBMenu: FC = () => {
         </NavLink>
       </MenuItems>
 
-      <Divider display={{ lg: "none" }} />
+      <Divider display={{ lg: 'none' }} />
 
       <MenuItems>
         <NavLink
diff --git a/src/index.tsx b/src/index.tsx
index 857cf6e..12fe4bc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,18 +1,18 @@
-import React, { Suspense } from "react";
-import ReactDOM from "react-dom";
-import { Provider } from "react-redux";
-import { PersistGate } from "redux-persist/integration/react";
-import { ConnectedRouter } from "connected-react-router";
-import { ChakraProvider } from "@chakra-ui/react";
-import { I18nextProvider } from "react-i18next";
-import { store, persistor } from "redux/store";
-import i18n from "i18n";
-import { history } from "routes/history";
-import WBLoader from "components/WBLoader";
-import customTheme from "theme/theme";
-import reportWebVitals from "./reportWebVitals";
-import App from "./App";
-import "./styles.css";
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { ConnectedRouter } from 'connected-react-router';
+import { ChakraProvider } from '@chakra-ui/react';
+import { I18nextProvider } from 'react-i18next';
+import { store, persistor } from 'redux/store';
+import i18n from 'i18n';
+import { history } from 'routes/history';
+import WBLoader from 'components/WBLoader';
+import customTheme from 'theme/theme';
+import reportWebVitals from './reportWebVitals';
+import App from './App';
+import './styles.css';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -30,7 +30,7 @@ ReactDOM.render(
       </Provider>
     </ChakraProvider>
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/logo.svg b/src/logo.svg
index 6b60c10..9dfc1c0 100644
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/AnotherPage/index.tsx b/src/pages/AnotherPage/index.tsx
index 07d7d6c..656f5b4 100644
--- a/src/pages/AnotherPage/index.tsx
+++ b/src/pages/AnotherPage/index.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { FC, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { counterInfo } from 'redux/counter/selectors';
diff --git a/src/pages/Homepage/index.tsx b/src/pages/Homepage/index.tsx
index 2b6c535..fa84bb6 100644
--- a/src/pages/Homepage/index.tsx
+++ b/src/pages/Homepage/index.tsx
@@ -1,14 +1,9 @@
-import * as React from "react";
-import { FC, useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { counterInfo } from "redux/counter/selectors";
-import {
-  decrementRequest,
-  incrementRequest,
-  resetRequest,
-} from "redux/counter/actions";
-import WBContainer from "components/WBContainer";
+import WBContainer from 'components/WBContainer';
+import { FC, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { decrementRequest, incrementRequest, resetRequest } from 'redux/counter/actions';
+import { counterInfo } from 'redux/counter/selectors';
 
 const Homepage: FC = () => {
   const dispatch = useDispatch();
@@ -18,31 +13,31 @@ const Homepage: FC = () => {
   const changeCounter = useCallback(
     (param: string) => {
       switch (param) {
-        case "increment":
+        case 'increment':
           dispatch(incrementRequest());
           break;
-        case "decrement":
+        case 'decrement':
           dispatch(decrementRequest());
           break;
         default:
           dispatch(resetRequest());
       }
     },
-    [dispatch]
+    [dispatch],
   );
 
   return (
     <WBContainer>
       <span>{counterData}</span>
-      <button onClick={() => changeCounter("increment")}>
-        <span>{t("common:increment")}</span>
+      <button onClick={() => changeCounter('increment')}>
+        <span>{t('common:increment')}</span>
       </button>
-      <button onClick={() => changeCounter("decrement")}>
-        <span>{t("common:decrement")}</span>
+      <button onClick={() => changeCounter('decrement')}>
+        <span>{t('common:decrement')}</span>
       </button>
 
-      <button onClick={() => changeCounter("reset")}>
-        <span>{t("common:reset")}</span>
+      <button onClick={() => changeCounter('reset')}>
+        <span>{t('common:reset')}</span>
       </button>
     </WBContainer>
   );
diff --git a/src/redux/ghibli/reducers.ts b/src/redux/ghibli/reducers.ts
index 8b91b87..38bd132 100644
--- a/src/redux/ghibli/reducers.ts
+++ b/src/redux/ghibli/reducers.ts
@@ -1,9 +1,5 @@
-import { createReducer } from "@reduxjs/toolkit";
-import {
-  getAllFilmsFailed,
-  getAllFilmsRequest,
-  getAllFilmsSuccess,
-} from "./actions";
+import { createReducer } from '@reduxjs/toolkit';
+import { getAllFilmsFailed, getAllFilmsRequest, getAllFilmsSuccess } from './actions';
 
 export interface IFilmsState {
   loading: boolean;
diff --git a/src/redux/ghibli/sagas.ts b/src/redux/ghibli/sagas.ts
index f3e077d..b27a8ab 100644
--- a/src/redux/ghibli/sagas.ts
+++ b/src/redux/ghibli/sagas.ts
@@ -21,16 +21,14 @@ function* getAllFilmsSaga({ payload }: PayloadAction<GetAllFilmsRequestPayload>)
       yield put(getAllFilmsFailed());
       yield put(messageHandlerSet({ message: filmsRes?.message, type: 'error', description: 'No films found!' }));
     }
-  } catch (err) {
-    if (err instanceof SyntaxError) {
-      yield put(getAllFilmsFailed());
-      yield put(messageHandlerSet({ message: err?.message, type: 'error', description: 'No films found!' }));
-    }
+  } catch (err: any) {
+    yield put(getAllFilmsFailed());
+    yield put(messageHandlerSet({ message: err?.message, type: 'error', description: 'No films found!' }));
   }
 }
 
-function* artworkSaga() {
+function* filmsSaga() {
   yield takeLatest(getAllFilmsRequest.type, getAllFilmsSaga);
 }
 
-export default artworkSaga;
+export default filmsSaga;
diff --git a/src/redux/ghibli/selectors.ts b/src/redux/ghibli/selectors.ts
index 9a6b018..2f4e244 100644
--- a/src/redux/ghibli/selectors.ts
+++ b/src/redux/ghibli/selectors.ts
@@ -1,12 +1,7 @@
-import { createSelector } from "@reduxjs/toolkit";
-import { uniqBy } from "lodash";
-import type { RootState } from "redux/reducers";
+import { createSelector } from '@reduxjs/toolkit';
+import { uniqBy } from 'lodash';
+import type { RootState } from 'redux/reducers';
 
 const allFilmsSelector = (state: RootState) => state.films;
-export const allFilmsLoading = createSelector(
-  allFilmsSelector,
-  (filmsState) => filmsState.loading
-);
-export const allFilms = createSelector(allFilmsSelector, (filmsState) =>
-  uniqBy(filmsState.films, "id")
-);
+export const allFilmsLoading = createSelector(allFilmsSelector, (filmsState) => filmsState.loading);
+export const allFilms = createSelector(allFilmsSelector, (filmsState) => uniqBy(filmsState.films, 'id'));
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 1960cea..072778f 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -1,32 +1,27 @@
-import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
+import { configureStore } from '@reduxjs/toolkit';
 import createSagaMiddleware from 'redux-saga';
 import { routerMiddleware } from 'connected-react-router';
-import { FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, persistStore } from 'redux-persist';
+import { persistStore } from 'redux-persist';
 import { history } from 'routes/history';
 import rootSaga from './rootsaga';
 import persistedRootReducer from './reducers';
 
 // Middleware
 const sagaMiddleware = createSagaMiddleware();
-const middleware = [
-  ...getDefaultMiddleware({
-    // To avoid reduxjs/toolkit with persist intergration
-    serializableCheck: {
-      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
-    },
-  }),
-  routerMiddleware(history),
-  sagaMiddleware,
-];
+const middleware = [routerMiddleware(history), sagaMiddleware];
 
 // Store
 const store = configureStore({
   reducer: persistedRootReducer,
-  middleware,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      immutableCheck: false,
+      serializableCheck: false,
+    }).concat(middleware),
   devTools:
     process.env.NODE_ENV === 'development' &&
     (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
-    (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
+    (window as any).__REDUX_DEVTOOLS_EXTENSION__({ name: 'Starter-App' }), // You can customize the Starter-App name to identify it in the Redux panel
 });
 
 const persistor = persistStore(store);
diff --git a/tsconfig.json b/tsconfig.json
index 9c4398d..d56c316 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
     "moduleResolution": "node", // Resolve modules using Node.js style
     "resolveJsonModule": true, // Include modules imported with .json extension
     "isolatedModules": false, // Transpile each file as a separate module (similar to 'ts.transpileModule')
-    "jsx": "react", // Support JSX in .tsx files
+    "jsx": "react-jsx", // Support JSX in .tsx files
     "sourceMap": true, // Generate corrresponding .map file
     "declaration": true, // Generate corresponding .d.ts file
     "noUnusedLocals": false, // Report errors on unused locals