diff --git a/package-lock.json b/package-lock.json
index c555562..d0311ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,10 +17,15 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babel/preset-typescript": "^7.21.4",
+        "downshift": "^7.6.0",
         "eslint": "^8.38.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-react": "^7.32.2",
-        "prettier": "2.8.7"
+        "prettier": "2.8.7",
+        "react-dropdown": "^1.11.0",
+        "react-loading-skeleton": "^3.2.1",
+        "react-select": "^5.7.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -1017,6 +1022,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
+      "integrity": "sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-arrow-functions": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
@@ -1580,6 +1600,24 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz",
+      "integrity": "sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
@@ -1739,6 +1777,25 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.4.tgz",
+      "integrity": "sha512-sMLNWY37TCdRH/bJ6ZeeOH1nPuanED7Ai9Y/vH31IPqalioJ6ZNFUWONsakhv4r4n+I6gm5lmoE0olkgib/j/A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-syntax-jsx": "^7.21.4",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+        "@babel/plugin-transform-typescript": "^7.21.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/regjsgen": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
@@ -2076,6 +2133,141 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.10.7",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.7.tgz",
+      "integrity": "sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==",
+      "dev": true
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==",
+      "dev": true
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.6",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==",
+      "dev": true
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==",
+      "dev": true
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==",
+      "dev": true
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==",
+      "dev": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2169,6 +2361,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==",
+      "dev": true
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.6.tgz",
+      "integrity": "sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -4137,6 +4344,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4224,6 +4440,139 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
+    "node_modules/@typescript-eslint/experimental-utils": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.59.0.tgz",
+      "integrity": "sha512-evvdzcPrUv9+Hj+KX6fa3WMrtTZ7onnGHL3NfT/zN9q2FQhb2yvNJDa+w/ND0TpdRCbulwag0dxwMUt2MJB2Vg==",
+      "dependencies": {
+        "@typescript-eslint/utils": "5.59.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
+      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
+      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
+      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
+      "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
+      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.0",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -5458,6 +5807,12 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -5620,6 +5975,12 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
+      "integrity": "sha512-y/ZA3BGnxoM/QHHQ2Uy49CLtnWPbt4tTPpEEZiEmmiWBFKjej7nEyH8Ryz54jH0MLXflUYA3Er2zUxPSJu5R+g==",
+      "dev": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6391,6 +6752,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -6483,6 +6854,22 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/downshift": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-7.6.0.tgz",
+      "integrity": "sha512-VSoTVynTAsabou/hbZ6HJHUVhtBiVOjQoBsCPcQq5eAROIGP+9XKMp9asAKQ3cEcUP4oe0fFdD2pziUjhFY33Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.14.8",
+        "compute-scroll-into-view": "^2.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.12.0"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -7781,6 +8168,12 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8408,6 +8801,21 @@
         "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==",
+      "dev": true,
+      "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==",
+      "dev": true
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11629,6 +12037,12 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "dev": true
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -11864,11 +12278,6 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
-    "node_modules/natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
-    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -14073,6 +14482,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropdown": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.11.0.tgz",
+      "integrity": "sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g==",
+      "dev": true,
+      "dependencies": {
+        "classnames": "^2.2.3"
+      },
+      "peerDependencies": {
+        "react": "^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -14083,6 +14505,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.2.1.tgz",
+      "integrity": "sha512-e1KwEOuBa1REXWoseELIJXlsqWTCHL5IQnqhVhI33WmnuTK7LK1DXl4mmcOLsWVcwqXeOATU9VFJEjz2ytZSng==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14162,6 +14593,43 @@
         }
       }
     },
+    "node_modules/react-select": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.2.tgz",
+      "integrity": "sha512-cTlJkQ8YjV6T/js8wW0owTzht0hHGABh29vjLscY4HfZGkv7hc3FFTmRp9NzY/Ib1uQ36GieAKEjxpHdpCFpcA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15285,6 +15753,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==",
+      "dev": true
+    },
     "node_modules/sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
@@ -15793,6 +16267,20 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
     "node_modules/tsutils/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -15861,6 +16349,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -15998,6 +16499,20 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17681,6 +18196,15 @@
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
+      "integrity": "sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      }
+    },
     "@babel/plugin-transform-arrow-functions": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
@@ -18021,6 +18545,18 @@
         "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz",
+      "integrity": "sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-typescript": "^7.20.0"
+      }
+    },
     "@babel/plugin-transform-unicode-escapes": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
@@ -18152,6 +18688,19 @@
         "@babel/plugin-transform-react-pure-annotations": "^7.18.6"
       }
     },
+    "@babel/preset-typescript": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.4.tgz",
+      "integrity": "sha512-sMLNWY37TCdRH/bJ6ZeeOH1nPuanED7Ai9Y/vH31IPqalioJ6ZNFUWONsakhv4r4n+I6gm5lmoE0olkgib/j/A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-syntax-jsx": "^7.21.4",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+        "@babel/plugin-transform-typescript": "^7.21.3"
+      }
+    },
     "@babel/regjsgen": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
@@ -18333,6 +18882,124 @@
       "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
       "requires": {}
     },
+    "@emotion/babel-plugin": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+          "dev": true
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.10.7",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.7.tgz",
+      "integrity": "sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==",
+      "dev": true,
+      "requires": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==",
+      "dev": true
+    },
+    "@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==",
+      "dev": true
+    },
+    "@emotion/react": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.6",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "dev": true,
+      "requires": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==",
+      "dev": true
+    },
+    "@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==",
+      "dev": true
+    },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "dev": true,
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==",
+      "dev": true
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==",
+      "dev": true
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -18395,6 +19062,21 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
       "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g=="
     },
+    "@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==",
+      "dev": true
+    },
+    "@floating-ui/dom": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.6.tgz",
+      "integrity": "sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -19858,6 +20540,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -19945,6 +20636,82 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
+    "@typescript-eslint/experimental-utils": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.59.0.tgz",
+      "integrity": "sha512-evvdzcPrUv9+Hj+KX6fa3WMrtTZ7onnGHL3NfT/zN9q2FQhb2yvNJDa+w/ND0TpdRCbulwag0dxwMUt2MJB2Vg==",
+      "requires": {
+        "@typescript-eslint/utils": "5.59.0"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
+      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
+      "requires": {
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
+      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA=="
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
+      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
+      "requires": {
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/utils": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
+      "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
+      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
+      "requires": {
+        "@typescript-eslint/types": "5.59.0",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -20877,6 +21644,12 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -21015,6 +21788,12 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
+      "integrity": "sha512-y/ZA3BGnxoM/QHHQ2Uy49CLtnWPbt4tTPpEEZiEmmiWBFKjej7nEyH8Ryz54jH0MLXflUYA3Er2zUxPSJu5R+g==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -21560,6 +22339,16 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -21627,6 +22416,19 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "downshift": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-7.6.0.tgz",
+      "integrity": "sha512-VSoTVynTAsabou/hbZ6HJHUVhtBiVOjQoBsCPcQq5eAROIGP+9XKMp9asAKQ3cEcUP4oe0fFdD2pziUjhFY33Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.14.8",
+        "compute-scroll-into-view": "^2.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "tslib": "^2.3.0"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -22598,6 +23400,12 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -23018,6 +23826,23 @@
       "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==",
+      "dev": true,
+      "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==",
+          "dev": true
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -24538,7 +25363,6 @@
       "requires": {
         "@babel/core": "^7.7.2",
         "@babel/generator": "^7.7.2",
-        "@babel/plugin-syntax-typescript": "^7.7.2",
         "@babel/traverse": "^7.7.2",
         "@babel/types": "^7.0.0",
         "@jest/transform": "^27.5.1",
@@ -25358,6 +26182,12 @@
         "fs-monkey": "^1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "dev": true
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -25520,11 +26350,6 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
-    "natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
-    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -26917,6 +27742,15 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-dropdown": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.11.0.tgz",
+      "integrity": "sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.3"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -26927,6 +27761,13 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-loading-skeleton": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.2.1.tgz",
+      "integrity": "sha512-e1KwEOuBa1REXWoseELIJXlsqWTCHL5IQnqhVhI33WmnuTK7LK1DXl4mmcOLsWVcwqXeOATU9VFJEjz2ytZSng==",
+      "dev": true,
+      "requires": {}
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -26987,6 +27828,35 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-select": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.2.tgz",
+      "integrity": "sha512-cTlJkQ8YjV6T/js8wW0owTzht0hHGABh29vjLscY4HfZGkv7hc3FFTmRp9NzY/Ib1uQ36GieAKEjxpHdpCFpcA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27809,6 +28679,12 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==",
+      "dev": true
+    },
     "sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
@@ -28257,6 +29133,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -28346,6 +29228,13 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "dev": true,
+      "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 0c60e80..a55cfc7 100644
--- a/package.json
+++ b/package.json
@@ -36,9 +36,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.21.4",
+    "downshift": "^7.6.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
-    "prettier": "2.8.7"
+    "prettier": "2.8.7",
+    "react-dropdown": "^1.11.0",
+    "react-loading-skeleton": "^3.2.1",
+    "react-select": "^5.7.2"
   }
 }
diff --git a/src/bar/barPlayer.jsx b/src/bar/barPlayer.jsx
index 75fd40c..68e7753 100644
--- a/src/bar/barPlayer.jsx
+++ b/src/bar/barPlayer.jsx
@@ -1,5 +1,18 @@
 import Sprite from '../assets/icons/sprite.svg'
+import { useEffect } from 'react'
+import { PropsWithChildren, useState } from 'react'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
 export default function BarPlayer() {
+  const [loadingPage, setLoadingPage] = useState(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoadingPage(false)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [])
   return (
     <div className="bar__player player">
       <div className="player__controls">
@@ -33,20 +46,51 @@ export default function BarPlayer() {
       <div className="player__track-play track-play">
         <div className="track-play__contain">
           <div className="track-play__image">
-            <svg className="track-play__svg" alt="music">
+            <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+              {loadingPage ? (
+                <Skeleton width={51} height={51} borderRadius={0} count={1} />
+              ) : (
+                <svg className="track-play__svg" alt="music">
+                  <use xlinkHref={`${Sprite}#icon-note`}></use>
+                </svg>
+              )}
+            </SkeletonTheme>
+            {/* <svg className="track-play__svg" alt="music">
               <use xlinkHref={`${Sprite}#icon-note`}></use>
-            </svg>
+            </svg> */}
           </div>
-          <div className="track-play__author">
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={59} height={15} borderRadius={0} count={1} />
+            ) : (
+              <div className="track-play__author">
+                <a className="track-play__author-link" href="http://">
+                  Ты та...
+                </a>
+              </div>
+            )}
+          </SkeletonTheme>
+          {/* <div className="track-play__author">
             <a className="track-play__author-link" href="http://">
               Ты та...
             </a>
-          </div>
-          <div className="track-play__album">
+          </div> */}
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={59} height={15} borderRadius={0} count={1} />
+            ) : (
+              <div className="track-play__album">
+                <a className="track-play__album-link" href="http://">
+                  Баста
+                </a>
+              </div>
+            )}
+          </SkeletonTheme>
+          {/* <div className="track-play__album">
             <a className="track-play__album-link" href="http://">
               Баста
             </a>
-          </div>
+          </div> */}
         </div>
 
         <div className="track-play__like-dis">
diff --git a/src/centerBlock/centerblock.jsx b/src/centerBlock/centerblock.jsx
index a5cab4c..69b2a8f 100644
--- a/src/centerBlock/centerblock.jsx
+++ b/src/centerBlock/centerblock.jsx
@@ -8,7 +8,34 @@ export default function CenterBlock() {
     <div className="main__centerblock centerblock">
       <Search />
       <h2 className="centerblock__h2">Треки</h2>
-      <Filter />
+      <div className="centerblock__filter filter">
+        <label className="filter__title">Искать по:</label>
+        <Filter
+          options={[
+            { value: 'Michael Jackson' },
+            { value: 'Frank Sinatra' },
+            { value: 'Calvin Harris' },
+            { value: 'Zhu' },
+            { value: 'Arctic Monkeys' },
+          ]}
+          optName={'исполнителю'}
+        />
+        <Filter
+          options={[
+            { value: 'Хип-хоп' },
+            { value: 'Рок' },
+            { value: 'Поп-музыка' },
+            { value: 'Техно' },
+            { value: 'Инди' },
+          ]}
+          optName={'жанру'}
+        />
+        <Filter
+          options={[{ value: 'Более новые' }, { value: 'Более старые' }]}
+          optName={'году выпуска'}
+        />
+      </div>
+
       <TrackList />
     </div>
   )
diff --git a/src/filter-by/filter.jsx b/src/filter-by/filter.jsx
index d54d0f9..7535512 100644
--- a/src/filter-by/filter.jsx
+++ b/src/filter-by/filter.jsx
@@ -1,10 +1,122 @@
-export default function Filter(props) {
+// import Dropdown from 'react-dropdown'
+// import 'react-dropdown/style.css'
+// import { _onSelect } from 'react-dropdown'
+
+// import React, { useState } from 'react'
+// import Select from 'react-select'
+
+import * as React from 'react'
+import Downshift from 'downshift'
+import { useSelect } from 'downshift'
+import { useState } from 'react'
+
+// const options = [
+//   { value: 'Michael Jackson' },
+//   { value: 'Frank Sinatra' },
+//   { value: 'Calvin Harris' },
+//   { value: 'Zhu' },
+//   { value: 'Arctic Monkeys' }
+// ]
+
+export default function Filter({ options, optName }) {
+  // const options = [
+  //   'Michael Jackson',
+  //   'Frank Sinatra',
+  //   'Calvin Harris',
+  //   'Zhu',
+  //   'Arctic Monkeys',
+  // ]
+
+  // const singers = [
+  //   { value: 'Michael Jackson' },
+  //   { value: 'Frank Sinatra' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' }
+  // ]
+  // const genres = [
+  //   { value: 'rock' },
+  //   { value: 'pop' },
+  //   { value: 'jazz' }
+  // ]
+  const {
+    isOpen,
+    selectedItem,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+  } = useSelect({ items: options })
+
+  // const [activeState, setActiveState] = useState(false)
+
+  // const [selectedOption, setSelectedOption] = useState(null)
+  // const defaultOption = options[0]
+
   return (
-    <div className="centerblock__filter filter">
-      <div className="filter__title">Искать по:</div>
-      <div className="filter__button button-author _btn-text">исполнителю</div>
+    <div className="option">
+      {/* <label className="filter__title" {...getLabelProps()}>
+        Искать по:
+      </label> */}
+
+      <div
+        className={`filter__button button-author _btn-text ${
+          isOpen ? 'dropdwn-active' : ''
+        }`}
+        {...getToggleButtonProps()}
+      >
+        {selectedItem ?? optName}
+      </div>
+      <div className="scrollabale-menu-padding">
+        <ul
+          className={`filter__dropdown-content ${
+            isOpen ? 'srcollabale-menu' : ''
+          }`}
+          {...getMenuProps()}
+        >
+          {isOpen &&
+            options.map((item, index) => (
+              <li
+                className="filter__dropdown-item"
+                key={`${item}${index}`}
+                {...getItemProps({
+                  item,
+                  index,
+                })}
+              >
+                {item.value}
+              </li>
+            ))}
+        </ul>
+      </div>
+
+      {/* <ul
+        className={`filter__dropdown-content ${
+          isOpen ? 'srcollabale-menu' : ''
+        }`}
+        {...getMenuProps()}
+      >
+        {isOpen &&
+          options.map((item, index) => (
+            <li
+              className="filter__dropdown-item"
+              key={`${item}${index}`}
+              {...getItemProps({
+                item,
+                index,
+              })}
+            >
+              {item.value}
+            </li>
+          ))}
+      </ul> */}
+      {/* <div className="filter__button button-author _btn-text">исполнителю</div>
       <div className="filter__button button-year _btn-text">году выпуска</div>
-      <div className="filter__button button-genre _btn-text">жанру</div>
+      <div className="filter__button button-genre _btn-text">жанру</div> */}
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index a33b494..31cd1c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,13 +2,13 @@
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 a,
@@ -16,6 +16,7 @@ a:visited {
   text-decoration: none;
   font-family: 'StratosSkyeng', sans-serif;
   cursor: pointer;
+  color: #ffffff;
 }
 
 button,
@@ -29,7 +30,9 @@ ul li {
 
 @font-face {
   font-family: 'StratosSkyeng';
-  src: local("StratosSkyeng"), local("StratosSkyeng"), url("./assets/fonts/Stratos-Regular.woff2") format("woff2"), url("./assets/fonts/Stratos-Regular.woff") format("woff");
+  src: local('StratosSkyeng'), local('StratosSkyeng'),
+    url('./assets/fonts/Stratos-Regular.woff2') format('woff2'),
+    url('./assets/fonts/Stratos-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
@@ -39,8 +42,33 @@ body {
   width: 100%;
   height: 100%;
   font-family: 'StratosSkyeng', sans-serif;
-  color: #FFFFFF;
+  color: #ffffff;
+  /* scrollbar-color: #8f1a1a #4b4949;
+  scrollbar-width: 4px; */
 }
+::-webkit-scrollbar {
+  width: 4px;
+  
+  
+  background-color: #4b4949;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #ffffff;
+
+  /* box-shadow: inset 0 0 4px 4px #a53939;
+  border: solid 4px transparent; */
+}
+
+/* ::-webkit-scrollbar-button {
+  display: none;
+} */
+
+/* ::-webkit-scrollbar-track {
+
+  box-shadow: inset 0 0 4px 4px transparent;
+  border: solid 4px transparent;
+}  */
 
 .wrapper {
   width: 100%;
@@ -58,48 +86,48 @@ body {
 }
 
 ._btn-text:hover {
-  border-color: #D9B6FF;
-  color: #D9B6FF;
+  border-color: #d9b6ff;
+  color: #d9b6ff;
   cursor: pointer;
 }
 
 ._btn-icon:hover svg {
   fill: transparent;
-  stroke: #ACACAC;
+  stroke: #acacac;
   cursor: pointer;
 }
 
 ._btn-text:active {
-  border-color: #AD61FF;
-  color: #AD61FF;
+  border-color: #ad61ff;
+  color: #ad61ff;
   cursor: pointer;
 }
 
 ._btn-icon:active svg {
   fill: transparent;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   cursor: pointer;
 }
 
 ._btn-icon:active .track-play__like-svg,
 ._btn-icon:active .track-play__dislike-svg {
   fill: #696969;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   cursor: pointer;
 }
 
 .main {
   -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 .main__nav {
@@ -111,8 +139,8 @@ body {
 .main__centerblock {
   width: auto;
   -webkit-box-flex: 3;
-      -ms-flex-positive: 3;
-          flex-grow: 3;
+  -ms-flex-positive: 3;
+  flex-grow: 3;
   padding: 20px 40px 20px 111px;
 }
 
@@ -130,6 +158,7 @@ body {
 }
 
 .nav__burger {
+  cursor: pointer;
   width: 20px;
   height: 36px;
   padding: 13px 0;
@@ -138,11 +167,11 @@ body {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 .nav__menu {
@@ -160,39 +189,46 @@ body {
   display: inline-block;
   width: 100%;
   height: 1px;
-  background-color: #D3D3D3;
+  background-color: #d3d3d3;
 }
 
 .menu__list {
   padding: 18px 0 10px 0;
+  display: none;
 }
 
 .menu__item {
   padding: 5px 0;
   margin-bottom: 16px;
+  text-decoration: none;
+  color: #ffffff;
 }
 
 .menu__link {
-  color: #FFFFFF;
+  color: #ffffff;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
 }
 
+.menu__list.active {
+  display: block;
+}
+
 .centerblock__search {
   width: 100%;
-  border-bottom: 1px solid #4E4E4E;
+  border-bottom: 1px solid #4e4e4e;
   margin-bottom: 51px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .centerblock__h2 {
@@ -210,11 +246,11 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin-bottom: 51px;
 }
 
@@ -224,22 +260,22 @@ body {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .search__svg {
   width: 17px;
   height: 17px;
   margin-right: 5px;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   fill: transparent;
 }
 
 .search__text {
   -webkit-box-flex: 100;
-      -ms-flex-positive: 100;
-          flex-grow: 100;
+  -ms-flex-positive: 100;
+  flex-grow: 100;
   background-color: transparent;
   border: none;
   padding: 13px 10px 14px;
@@ -247,12 +283,12 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .search__text::-webkit-input-placeholder {
   background-color: transparent;
-  color: #FFFFFF;
+  color: #ffffff;
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -261,7 +297,7 @@ body {
 
 .search__text:-ms-input-placeholder {
   background-color: transparent;
-  color: #FFFFFF;
+  color: #ffffff;
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -270,7 +306,7 @@ body {
 
 .search__text::-ms-input-placeholder {
   background-color: transparent;
-  color: #FFFFFF;
+  color: #ffffff;
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -279,7 +315,7 @@ body {
 
 .search__text::placeholder {
   background-color: transparent;
-  color: #FFFFFF;
+  color: #ffffff;
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -299,29 +335,80 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  border: 1px solid #FFFFFF;
+  border: 1px solid #ffffff;
   border-radius: 60px;
   padding: 6px 20px;
+
+  position: relative;
+  display: inline-block;
+}
+
+.dropdwn-active {
+  border-color: #ad61ff;
+  color: #ad61ff;
 }
 
 .filter__button:not(:last-child) {
   margin-right: 10px;
 }
 
+.filter__dropdown-content {
+  position: absolute;
+  background-color: #313131;
+
+  min-width: 248px;
+  margin-left: 0px;
+  margin-top: 6px;
+  border-radius: 12px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+
+  z-index: 1;
+}
+
+
+.srcollabale-menu {
+  overflow-y: scroll;
+  height: 305px;
+  padding: 36px;
+  
+  
+  margin-right: 40px;
+}
+
+/* .srcollabale-menu-padding {
+  padding: 40px;
+} */
+
+.filter__dropdown-content .filter__dropdown-item {
+  color: #ffffff;
+  font-size: 20px;
+  padding: 12px 16px;
+  text-decoration: none;
+  margin-bottom: 14px;
+  /* height: 105px; */
+
+  display: block;
+}
+
+.filter__dropdown-content .filter__dropdown-item:hover {
+  color: #ad61ff;
+  text-decoration: underline;
+}
+
 .content__title {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   margin-bottom: 24px;
 }
 
@@ -331,8 +418,8 @@ body {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   overflow-y: auto;
 }
 
@@ -382,14 +469,14 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .track__title {
@@ -398,11 +485,11 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   width: 447px;
 }
 
@@ -415,11 +502,11 @@ body {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   margin-right: 17px;
 }
 
@@ -427,7 +514,7 @@ body {
   width: 18px;
   height: 17px;
   fill: transparent;
-  stroke: #4E4E4E;
+  stroke: #4e4e4e;
 }
 
 .track__title-link {
@@ -435,7 +522,7 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .track__title-span {
@@ -443,7 +530,7 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #4E4E4E;
+  color: #4e4e4e;
 }
 
 .track__author {
@@ -452,8 +539,8 @@ body {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
 }
 
 .track__author-link {
@@ -461,7 +548,7 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #FFFFFF;
+  color: #ffffff;
   text-align: left;
 }
 
@@ -500,14 +587,14 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
   padding: 12px 0 15px 0;
 }
 
@@ -516,7 +603,7 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #FFFFFF;
+  color: #ffffff;
   margin-right: 16px;
 }
 
@@ -535,11 +622,11 @@ body {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
 }
 
 .sidebar__list {
@@ -548,11 +635,11 @@ body {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .sidebar__item {
@@ -588,14 +675,14 @@ body {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .bar__player-progress {
   width: 100%;
   height: 5px;
-  background: #2E2E2E;
+  background: #2e2e2e;
 }
 
 .bar__player-block {
@@ -605,11 +692,11 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 .bar__player {
@@ -618,14 +705,14 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
 }
 
 .bar__volume-block {
@@ -634,8 +721,8 @@ body {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 0 92px 0 0;
 }
 
@@ -645,19 +732,23 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   padding: 0 27px 0 31px;
 }
 
-.player__btn-prev, .player__btn-play, .player__btn-next, .player__btn-repeat, .player__btn-shuffle {
+.player__btn-prev,
+.player__btn-play,
+.player__btn-next,
+.player__btn-repeat,
+.player__btn-shuffle {
   padding: 5px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .player__btn-prev {
@@ -676,7 +767,7 @@ body {
 .player__btn-play-svg {
   width: 22px;
   height: 20px;
-  fill: #D9D9D9;
+  fill: #d9d9d9;
 }
 
 .player__btn-next {
@@ -688,7 +779,7 @@ body {
   width: 15px;
   height: 14px;
   fill: inherit;
-  stroke: #D9D9D9;
+  stroke: #d9d9d9;
 }
 
 .player__btn-repeat {
@@ -707,8 +798,8 @@ body {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .player__btn-shuffle-svg {
@@ -724,8 +815,8 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .track-play__contain {
@@ -733,11 +824,11 @@ body {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
-      grid-template-areas: "image author" "image album";
+  grid-template-columns: auto 1fr;
+  grid-template-areas: 'image author' 'image album';
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .track-play__image {
@@ -748,11 +839,11 @@ body {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   margin-right: 12px;
   -ms-grid-row: 1;
   -ms-grid-row-span: 2;
@@ -764,7 +855,7 @@ body {
   width: 18px;
   height: 17px;
   fill: transparent;
-  stroke: #4E4E4E;
+  stroke: #4e4e4e;
 }
 
 .track-play__author {
@@ -779,7 +870,7 @@ body {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  color: #FFFFFF;
+  color: #ffffff;
   white-space: nowrap;
 }
 
@@ -795,7 +886,7 @@ body {
   font-weight: 400;
   font-size: 13px;
   line-height: 24px;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .track-play__like-dis {
@@ -804,15 +895,16 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin-left: 26%;
 }
 
-.track-play__like, .track-play__dislike {
+.track-play__like,
+.track-play__dislike {
   padding: 5px;
 }
 
@@ -840,14 +932,14 @@ body {
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: end;
+  -ms-flex-pack: end;
+  justify-content: end;
 }
 
 .volume__image {
diff --git a/src/index.js b/src/index.js
index 95f2a59..83a9430 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import Burger from './nav/burger'
 import NavMenu from './nav/navMenu'
 import Sidebar from './sidebar/sidebar'
 import MainTree from './mainTree/mainTree'
+import { useState } from 'react'
 
 const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
diff --git a/src/mainTree/mainTree.jsx b/src/mainTree/mainTree.jsx
index 09a34e6..35aea42 100644
--- a/src/mainTree/mainTree.jsx
+++ b/src/mainTree/mainTree.jsx
@@ -12,6 +12,12 @@ import NavMenu from '../nav/navMenu'
 import Personal from '../sidebar/personal'
 import SidebarItem from '../sidebar/sidebarItem'
 
+// const items = [
+//   { value: 'Главное', href: 'link', id: 1 },
+//   { value: 'Мой плейлист', href: 'link', id: 1 },
+//   { value: 'Войти', href: 'link', id: 1 },
+// ]
+
 export default function MainTree() {
   return (
     <div className="wrapper">
diff --git a/src/nav/burger.jsx b/src/nav/burger.jsx
index 4ad7d08..f8ab895 100644
--- a/src/nav/burger.jsx
+++ b/src/nav/burger.jsx
@@ -1,18 +1,36 @@
 import NavMenu from './navMenu'
 import logo from '../assets/images/logo.png'
+import { useState } from 'react'
 
+// const [menuActive, setMenuActive] = useState(false)
+
+// const items = [
+//     { value: 'Главное', href: 'link', id: 1 },
+//     { value: 'Мой плейлист', href: 'link', id: 1 },
+//     { value: 'Войти', href: 'link', id: 1 },
+//   ]
 export default function Burger() {
+  const [menuActive, setMenuActive] = useState(false)
+
+  const items = [
+    { value: 'Главное', href: 'link', id: 1 },
+    { value: 'Мой плейлист', href: 'link', id: 1 },
+    { value: 'Войти', href: 'link', id: 1 },
+  ]
   return (
     <nav className="main__nav nav">
       <div className="nav__logo logo">
         <img className="logo__image" src={logo} alt="logo" />
       </div>
-      <div className="nav__burger burger">
+      <div
+        className="nav__burger burger"
+        onClick={() => setMenuActive(!menuActive)}
+      >
         <span className="burger__line"></span>
         <span className="burger__line"></span>
         <span className="burger__line"></span>
       </div>
-      <NavMenu />
+      <NavMenu active={menuActive} setActive={setMenuActive} items={items} />
     </nav>
   )
 }
diff --git a/src/nav/navMenu.jsx b/src/nav/navMenu.jsx
index c62817a..c276d08 100644
--- a/src/nav/navMenu.jsx
+++ b/src/nav/navMenu.jsx
@@ -1,11 +1,17 @@
-export default function NavMenu () {
-    return (
-        <div className="nav__menu menu">
-        <ul className="menu__list">
-            <li className="menu__item"><a href="http://" className="menu__link">Главное</a></li>
-            <li className="menu__item"><a href="http://" className="menu__link">Мой плейлист</a></li>
-            <li className="menu__item"><a href="http://" className="menu__link">Войти</a></li>
-        </ul>
+
+
+export default function NavMenu({ items, active}) {
+  return (
+    <div className="nav__menu menu">
+      <ul className={active ? 'menu__list active' : 'menu__list'}>
+
+
+        {items.map((item) => (
+          <li className="menu__item" key={item.id}>
+            <a href={item.href}>{item.value}</a>
+          </li>
+        ))}
+      </ul>
     </div>
-    )
-}
\ No newline at end of file
+  )
+}
diff --git a/src/sidebar/sidebarItem.jsx b/src/sidebar/sidebarItem.jsx
index 477dfed..5e9c30e 100644
--- a/src/sidebar/sidebarItem.jsx
+++ b/src/sidebar/sidebarItem.jsx
@@ -1,13 +1,40 @@
-export default function SidebarItem({sidebarImage}) {
+import { useEffect } from 'react'
+import { PropsWithChildren, useState } from 'react'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+export default function SidebarItem({ sidebarImage }) {
+  const [loadingPage, setLoadingPage] = useState(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoadingPage(false)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [])
+
   return (
     <div className="sidebar__item">
-      <a className="sidebar__link" href="#">
+      <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+        {loadingPage ? (
+          <Skeleton width={250} height={150} borderRadius={0} count={1} />
+        ) : (
+          <a className="sidebar__link" href="#">
+            <img
+              className="sidebar__img"
+              src={sidebarImage}
+              alt="day's playlist"
+            />
+          </a>
+        )}
+      </SkeletonTheme>
+      {/* <a className="sidebar__link" href="#">
         <img
           className="sidebar__img"
           src={sidebarImage}
           alt="day's playlist"
         />
-      </a>
+      </a> */}
     </div>
   )
 }
diff --git a/src/tracklist/track.jsx b/src/tracklist/track.jsx
index 6fe75ba..b2f3e19 100644
--- a/src/tracklist/track.jsx
+++ b/src/tracklist/track.jsx
@@ -1,39 +1,114 @@
 // import './tracklist/track.css'
+import { useEffect } from 'react'
+import { PropsWithChildren, useState } from 'react'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
 import Sprite from '../assets/icons/sprite.svg'
 
-function Track(props) {
+function Track({ loading, children }) {
+  const [loadingPage, setLoadingPage] = useState(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoadingPage(false)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const items = [
+    {
+      track_file: 'link',
+      name: 'Elektro',
+      author: 'Dynoro, Outwork, Mr. Gee',
+      album: 'Elektro',
+      duration: '2:22',
+    },
+  ]
   return (
     <div className="playlist__item">
       <div className="playlist__track track">
         <div className="track__title">
           <div className="track__title-image">
             <svg className="track__title-svg" alt="music">
-              <use xlinkHref={`${Sprite}#icon-note`}></use>
+              <SkeletonTheme color="#FFFFFF" highlightColor="#f2f2f2">
+                {loadingPage ? (
+                  <Skeleton count={1} />
+                ) : (
+                  <use xlinkHref={`${Sprite}#icon-note`}></use>
+                )}
+              </SkeletonTheme>
             </svg>
           </div>
-          <div className="track__title-text">
-            <a className="track__title-link" href={props.track_file}>
-              {props.name} treeee<span className="track__title-span"></span>
-            </a>
-            {props.name}
-          </div>
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={350} height={17} borderRadius={0} count={1} />
+            ) : (
+              <div className="track__title-text">
+                <a className="track__title-link" href={items[0].track_file}>
+                  {items[0].name} <span className="track__title-span"></span>
+                </a>
+              </div>
+            )}
+          </SkeletonTheme>
+          {/* <div className="track__title-text"> */}
+          {/* <SkeletonTheme color="#FFFFFF" highlightColor="#f2f2f2">
+              {loadingPage ? (
+                <Skeleton count={1} />
+              ) : (
+                <a className="track__title-link" href={items[0].track_file}>
+                  {items[0].name} <span className="track__title-span"></span>
+                </a>
+              )}
+            </SkeletonTheme> */}
+          {/* </div> */}
         </div>
+
         <div className="track__author">
-          <a className="track__author-link" href="http://">
-            {props.author} greeeee
-          </a>
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={290} height={17} borderRadius={0} count={1} />
+            ) : (
+              <a className="track__author-link" href="http://">
+                {items[0].author}
+              </a>
+            )}
+          </SkeletonTheme>
+          {/* <a className="track__author-link" href="http://">
+            {items[0].author}
+          </a> */}
         </div>
         <div className="track__album">
-          <a className="track__album-link" href="http://">
-            {props.album} hhlhlj;o
-          </a>
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={290} height={17} borderRadius={0} count={1} />
+            ) : (
+              <a className="track__album-link" href="http://">
+                {items[0].album}
+              </a>
+            )}
+          </SkeletonTheme>
+          {/* <a className="track__album-link" href="http://">
+            {items[0].album}
+          </a> */}
         </div>
-        <div className="track__time">
+        <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+          {loadingPage ? (
+            <Skeleton width={40} height={17} borderRadius={0} count={1} />
+          ) : (
+            <div className="track__time">
+              <svg className="track__time-svg" alt="time">
+                <use xlinkHref={`${Sprite}#icon-like`}></use>
+              </svg>
+              <span className="track__time-text">{items[0].duration}</span>
+            </div>
+          )}
+        </SkeletonTheme>
+        {/* <div className="track__time">
           <svg className="track__time-svg" alt="time">
             <use xlinkHref={`${Sprite}#icon-like`}></use>
           </svg>
-          <span className="track__time-text">{props.duration} 3:56</span>
-        </div>
+          <span className="track__time-text">{items[0].duration}</span>
+        </div> */}
       </div>
     </div>
   )