diff --git a/package-lock.json b/package-lock.json
index 8a86c532..a73f7499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,6 +74,7 @@
         "gzipper": "^3.7.0",
         "husky": "^4.2.5",
         "lint-staged": "^10.2.7",
+        "miragejs": "^0.1.45",
         "storybook-addon-styled-component-theme": "^1.3.0",
         "stylelint": "^13.13.1",
         "stylelint-config-recommended": "^5.0.0",
@@ -3864,6 +3865,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@miragejs/pretender-node-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz",
+      "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==",
+      "dev": true
+    },
     "node_modules/@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -16041,6 +16048,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/fake-xml-http-request": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.2.tgz",
+      "integrity": "sha512-HaFMBi7r+oEC9iJNpc3bvcW7Z7iLmM26hPDmlb0mFwyANSsOQAtJxbdWsXITKOzZUyMYK0zYCv3h5yDj9TsiXg==",
+      "dev": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -18434,6 +18447,12 @@
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
     },
+    "node_modules/inflected": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz",
+      "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -21944,23 +21963,119 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "node_modules/lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "dev": true
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "dev": true
+    },
+    "node_modules/lodash.compact": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz",
+      "integrity": "sha512-2ozeiPi+5eBXW1CLtzjk8XQFhQOEMwwfxblqeq6EGyTxZJ1bPATqilY0e6g2SLQpP4KuMeuioBhEnWz5Pr7ICQ==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "node_modules/lodash.find": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz",
+      "integrity": "sha512-yaRZoAV3Xq28F1iafWN1+a0rflOej93l1DQUejs3SZ41h2O9UJBoS9aueGjPDgAl4B6tPC0NuuchLKaDQQ3Isg==",
+      "dev": true
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "dev": true
+    },
+    "node_modules/lodash.forin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz",
+      "integrity": "sha512-APldePP4yvGhMcplVxv9L+exdLHMRHRhH1Q9O70zRJMm9HbTm6zxaihXtNl+ICOBApeFWoH7jNmFr/L4XfWeiQ==",
+      "dev": true
+    },
     "node_modules/lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "node_modules/lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha512-rnYUdIo6xRCJnQmbVFEwcxF144erlD+M3YcJUVesflU9paQaE8p+fJDcIQrlMYbxoANFL+AB9hZrzSBBk5PL+g==",
+      "dev": true
+    },
+    "node_modules/lodash.invokemap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+      "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==",
+      "dev": true
+    },
+    "node_modules/lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==",
+      "dev": true
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.lowerfirst": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz",
+      "integrity": "sha512-UUKX7VhP1/JL54NXg2aq/E1Sfnjjes8fNYTNkPU8ZmsaVeBvPHKdbNaN79Re5XRL01u6wbq3j0cbYZj71Fcu5w==",
+      "dev": true
+    },
     "node_modules/lodash.map": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
       "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=",
       "dev": true
     },
+    "node_modules/lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ==",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -21971,6 +22086,18 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==",
+      "dev": true
+    },
+    "node_modules/lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==",
+      "dev": true
+    },
     "node_modules/lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -21998,6 +22125,18 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==",
+      "dev": true
+    },
+    "node_modules/lodash.values": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz",
+      "integrity": "sha512-r0RwvdCv8id9TUblb/O7rYPwVy6lerCbcawrfdo9iC/1t1wsNMJknO79WNBgwkH0hIeJ08jmvvESbFpNb4jH0Q==",
+      "dev": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -22917,6 +23056,43 @@
         "node": ">= 8"
       }
     },
+    "node_modules/miragejs": {
+      "version": "0.1.45",
+      "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.45.tgz",
+      "integrity": "sha512-NFdpFVXmBuQfErQh70yL44h4NhSZYHZVbg0qzrIxB5gRZYNZGH1sriduejbxpmKVdqCbmjPypaXvEgBgohqydQ==",
+      "dev": true,
+      "dependencies": {
+        "@miragejs/pretender-node-polyfill": "^0.1.0",
+        "inflected": "^2.0.4",
+        "lodash.assign": "^4.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.compact": "^3.0.1",
+        "lodash.find": "^4.6.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.forin": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.has": "^4.5.2",
+        "lodash.invokemap": "^4.6.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.lowerfirst": "^4.3.1",
+        "lodash.map": "^4.6.0",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.snakecase": "^4.1.1",
+        "lodash.uniq": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "lodash.values": "^4.3.0",
+        "pretender": "^3.4.7"
+      },
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -25662,6 +25838,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pretender": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.7.tgz",
+      "integrity": "sha512-jkPAvt1BfRi0RKamweJdEcnjkeu7Es8yix3bJ+KgBC5VpG/Ln4JE3hYN6vJym4qprm8Xo5adhWpm3HCoft1dOw==",
+      "dev": true,
+      "dependencies": {
+        "fake-xml-http-request": "^2.1.2",
+        "route-recognizer": "^0.3.3"
+      }
+    },
     "node_modules/prettier": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
@@ -27951,6 +28137,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.7.tgz",
       "integrity": "sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw=="
     },
+    "node_modules/route-recognizer": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+      "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+      "dev": true
+    },
     "node_modules/rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -36223,6 +36415,12 @@
       "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==",
       "dev": true
     },
+    "@miragejs/pretender-node-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz",
+      "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -45588,6 +45786,12 @@
         }
       }
     },
+    "fake-xml-http-request": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.2.tgz",
+      "integrity": "sha512-HaFMBi7r+oEC9iJNpc3bvcW7Z7iLmM26hPDmlb0mFwyANSsOQAtJxbdWsXITKOzZUyMYK0zYCv3h5yDj9TsiXg==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -47441,6 +47645,12 @@
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
     },
+    "inflected": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz",
+      "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -50052,23 +50262,119 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "dev": true
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "dev": true
+    },
+    "lodash.compact": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz",
+      "integrity": "sha512-2ozeiPi+5eBXW1CLtzjk8XQFhQOEMwwfxblqeq6EGyTxZJ1bPATqilY0e6g2SLQpP4KuMeuioBhEnWz5Pr7ICQ==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.find": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz",
+      "integrity": "sha512-yaRZoAV3Xq28F1iafWN1+a0rflOej93l1DQUejs3SZ41h2O9UJBoS9aueGjPDgAl4B6tPC0NuuchLKaDQQ3Isg==",
+      "dev": true
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "dev": true
+    },
+    "lodash.forin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz",
+      "integrity": "sha512-APldePP4yvGhMcplVxv9L+exdLHMRHRhH1Q9O70zRJMm9HbTm6zxaihXtNl+ICOBApeFWoH7jNmFr/L4XfWeiQ==",
+      "dev": true
+    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha512-rnYUdIo6xRCJnQmbVFEwcxF144erlD+M3YcJUVesflU9paQaE8p+fJDcIQrlMYbxoANFL+AB9hZrzSBBk5PL+g==",
+      "dev": true
+    },
+    "lodash.invokemap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+      "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==",
+      "dev": true
+    },
+    "lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==",
+      "dev": true
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true
+    },
+    "lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "lodash.lowerfirst": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz",
+      "integrity": "sha512-UUKX7VhP1/JL54NXg2aq/E1Sfnjjes8fNYTNkPU8ZmsaVeBvPHKdbNaN79Re5XRL01u6wbq3j0cbYZj71Fcu5w==",
+      "dev": true
+    },
     "lodash.map": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
       "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=",
       "dev": true
     },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ==",
+      "dev": true
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -50079,6 +50385,18 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==",
+      "dev": true
+    },
+    "lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==",
+      "dev": true
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -50106,6 +50424,18 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==",
+      "dev": true
+    },
+    "lodash.values": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz",
+      "integrity": "sha512-r0RwvdCv8id9TUblb/O7rYPwVy6lerCbcawrfdo9iC/1t1wsNMJknO79WNBgwkH0hIeJ08jmvvESbFpNb4jH0Q==",
+      "dev": true
+    },
     "log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -50796,6 +51126,40 @@
         "yallist": "^4.0.0"
       }
     },
+    "miragejs": {
+      "version": "0.1.45",
+      "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.45.tgz",
+      "integrity": "sha512-NFdpFVXmBuQfErQh70yL44h4NhSZYHZVbg0qzrIxB5gRZYNZGH1sriduejbxpmKVdqCbmjPypaXvEgBgohqydQ==",
+      "dev": true,
+      "requires": {
+        "@miragejs/pretender-node-polyfill": "^0.1.0",
+        "inflected": "^2.0.4",
+        "lodash.assign": "^4.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.compact": "^3.0.1",
+        "lodash.find": "^4.6.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.forin": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.has": "^4.5.2",
+        "lodash.invokemap": "^4.6.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.lowerfirst": "^4.3.1",
+        "lodash.map": "^4.6.0",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.snakecase": "^4.1.1",
+        "lodash.uniq": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "lodash.values": "^4.3.0",
+        "pretender": "^3.4.7"
+      }
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -53007,6 +53371,16 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "pretender": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.7.tgz",
+      "integrity": "sha512-jkPAvt1BfRi0RKamweJdEcnjkeu7Es8yix3bJ+KgBC5VpG/Ln4JE3hYN6vJym4qprm8Xo5adhWpm3HCoft1dOw==",
+      "dev": true,
+      "requires": {
+        "fake-xml-http-request": "^2.1.2",
+        "route-recognizer": "^0.3.3"
+      }
+    },
     "prettier": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
@@ -54780,6 +55154,12 @@
         }
       }
     },
+    "route-recognizer": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+      "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+      "dev": true
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
diff --git a/package.json b/package.json
index 25c39475..bdfe02da 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "gzipper": "^3.7.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
+    "miragejs": "^0.1.45",
     "storybook-addon-styled-component-theme": "^1.3.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
diff --git a/src/components/AudioPlayer/hooks.tsx b/src/components/AudioPlayer/hooks.tsx
index e7762416..99589e7e 100644
--- a/src/components/AudioPlayer/hooks.tsx
+++ b/src/components/AudioPlayer/hooks.tsx
@@ -22,7 +22,7 @@ export const useAudioPlayer = (asset: string) => {
 
   useEffect(() => {
     if (!audio) return
-    playing ? audio.play() : audio.pause()
+    playing ? audio?.play() : audio?.pause()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playing, audio])
 
diff --git a/src/features/AddCardForm/components/Form/hooks/index.tsx b/src/features/AddCardForm/components/Form/hooks/index.tsx
index 89a7780e..ae6c9d8a 100644
--- a/src/features/AddCardForm/components/Form/hooks/index.tsx
+++ b/src/features/AddCardForm/components/Form/hooks/index.tsx
@@ -16,7 +16,7 @@ import {
   useElements,
 } from '@stripe/react-stripe-js'
 
-import { useRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 
 import toUpper from 'lodash/toUpper'
 
@@ -86,8 +86,11 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
   const [inputStates, setInputStates] = useObjectState(initialState)
   const [errorMessage, setErrorMessage] = useState('')
   const [loader, setLoader] = useState(false)
-  const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights)
-  const { onConfirmationSuccess, onUnsuccessfulSubscription } = useBuyMatchPopupStore()
+  const dataHighlights = useRecoilValue(dataForPayHighlights)
+  const {
+    onConfirmationSuccessHiglights,
+    onUnsuccessfulSubscription,
+  } = useBuyMatchPopupStore()
 
   const {
     countries,
@@ -186,13 +189,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
         cardId: defaultCard?.id,
         order: { ...dataHighlights?.data },
       })
-        .then(() => onConfirmationSuccess, onUnsuccessfulSubscription)
-        .then(() => {
-          setDataHighlights((prev) => ({
-            ...prev,
-            isOpenThanksPopup: true,
-          }))
-        })
+        .then(() => onConfirmationSuccessHiglights, onUnsuccessfulSubscription)
         .catch(() => setErrorMessage(translate('error_payment_unsuccessful')))
         .finally(() => setLoader(false))
       return
@@ -237,13 +234,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
               cardId: defaultCard.id,
               order: { ...dataHighlights?.data },
             })
-              // .then(notifySuccessfulSubscription)
-              .then(() => {
-                setDataHighlights((prev) => ({
-                  ...prev,
-                  isOpenThanksPopup: true,
-                }))
-              })
+              .then(() => onConfirmationSuccessHiglights, onUnsuccessfulSubscription)
               .catch(() => setErrorMessage(translate('error_payment_unsuccessful')))
           }
         })
diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx
index a362c7cb..2188c3cc 100644
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/index.tsx
@@ -6,6 +6,8 @@ import {
 } from 'react'
 import { useHistory } from 'react-router-dom'
 
+import { useSetRecoilState } from 'recoil'
+
 import type { PaymentIntent, StripeError } from '@stripe/stripe-js'
 
 import last from 'lodash/last'
@@ -22,6 +24,8 @@ import {
 } from 'requests/buySubscription'
 import type { OnFailedPaymentActionData } from 'requests/buySubscription'
 
+import { dataForPayHighlights } from 'pages/HighlightsPage/storeHighlightsAtoms'
+
 import { useCardsStore } from 'features/CardsStore'
 import {
   Match,
@@ -41,7 +45,7 @@ const requests = {
 
 export const useBuyMatchPopup = () => {
   const history = useHistory()
-  const { defaultCard } = useCardsStore()
+  const { defaultCard, isHighlightsPage } = useCardsStore()
   const { handle3DSecure } = useStripe3DSecure()
 
   const [steps, setSteps] = useState<Array<Steps>>([])
@@ -49,6 +53,7 @@ export const useBuyMatchPopup = () => {
   const [error, setError] = useState('')
   const [loader, setLoader] = useState(false)
   const [disabledBuyBtn, setDisabledBuyBtn] = useState(false)
+  const setDataHighlights = useSetRecoilState(dataForPayHighlights)
 
   const goTo = useCallback(
     (step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => {
@@ -136,8 +141,21 @@ export const useBuyMatchPopup = () => {
       .then(onSuccessfulSubscription, goToError)
   }
 
+  const onConfirmationSuccessHiglights = ({ id }: PaymentIntent) => {
+    notifySuccessfulSubscription({ paymentIntentId: id })
+      .then(() => {
+        setDataHighlights((prev) => ({
+          ...prev,
+          isOpenThanksPopup: true,
+        }))
+      })
+  }
+
   const onUnsuccessfulSubscription = (data?: OnFailedPaymentActionData) => {
     switch (data?.action) {
+      case isHighlightsPage && PaymentActions.ThreeDSecure:
+        handle3DSecure(data.value)?.then(onConfirmationSuccessHiglights, onConfirmationError)
+        break
       case PaymentActions.ThreeDSecure:
         handle3DSecure(data.value)?.then(onConfirmationSuccess, onConfirmationError)
         break
@@ -190,6 +208,7 @@ export const useBuyMatchPopup = () => {
     matchSubscriptions,
     onBuyClick,
     onConfirmationSuccess,
+    onConfirmationSuccessHiglights,
     onNext,
     onPackageSelect,
     onPeriodSelect,
diff --git a/src/features/ProfileCard/index.tsx b/src/features/ProfileCard/index.tsx
index fbd9617a..09500b72 100644
--- a/src/features/ProfileCard/index.tsx
+++ b/src/features/ProfileCard/index.tsx
@@ -4,6 +4,8 @@ import type { ObjectWithName } from 'features/Name'
 
 import { PAGES, ProfileTypes } from 'config'
 
+import { checkPage } from 'helpers/checkPage'
+
 import { T9n } from 'features/T9n'
 import { useName } from 'features/Name'
 
@@ -45,6 +47,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
   } = useProfileCard()
 
   const tournamentId = profile.additionalInfo?.tournamentId
+  const isPlayerPage = checkPage(PAGES.player)
 
   return (
     <Wrapper>
@@ -75,19 +78,21 @@ export const ProfileCard = ({ profile }: ProfileType) => {
             <StarIcon isFavorite={isFavorite} />
             <T9n t='add_to_favorites' />
           </FavoriteButton>
-          <Link to={PAGES.highlights}>
-            <SсGetHighlightBtn
-              onClick={() => setPlayerHighlight({
-                profile: {
-                  ...profile,
-                  id: profileId,
-                },
-                sportType,
-              })}
-            >
-              <T9n t='get_highlights' />
-            </SсGetHighlightBtn>
-          </Link>
+          {isPlayerPage && (
+            <Link to={PAGES.highlights}>
+              <SсGetHighlightBtn
+                onClick={() => setPlayerHighlight({
+                  profile: {
+                    ...profile,
+                    id: profileId,
+                  },
+                  sportType,
+                })}
+              >
+                <T9n t='get_highlights' />
+              </SсGetHighlightBtn>
+            </Link>
+          )}
         </SсBtnWrapper>
       </Details>
     </Wrapper>
diff --git a/src/helpers/checkPage/index.tsx b/src/helpers/checkPage/index.tsx
new file mode 100644
index 00000000..4e7d6558
--- /dev/null
+++ b/src/helpers/checkPage/index.tsx
@@ -0,0 +1,6 @@
+export const checkPage = (page: string) => {
+  const splitPath = window.location.pathname.split('/')
+  const pageType = splitPath[2]
+
+  return `/${pageType}` === page
+}
diff --git a/src/index.tsx b/src/index.tsx
index 42976fea..2fea3ec8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,12 +7,16 @@ import ReactDOM from 'react-dom'
 
 import { isIOS } from 'config/userAgent'
 
+// import { makeServer } from 'utilits/Mirage/Mirage'
+
 import * as serviceWorker from './serviceWorker'
 
 export const App = process.env.REACT_APP_TYPE === 'auth-service'
   ? lazy(() => import('features/AuthServiceApp'))
   : lazy(() => import('features/App'))
 
+// process.env.NODE_ENV === 'development' && makeServer({ environment: 'development' })
+
 ReactDOM.render(
   <StrictMode>
     <Suspense fallback={null}>
diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
index eaddfabd..43a36c4f 100644
--- a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
+++ b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
@@ -63,6 +63,7 @@ export const MatchesHighlights = () => {
             id={id.toString()}
             checked={isChecked}
             onChange={onChangeSelectedMatches}
+            className='matchesHighlights__Checkbox'
             label={(
               <ScLabel>
                 <ScDate>
diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
index e584d838..0bf0447f 100644
--- a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
+++ b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
@@ -40,6 +40,13 @@ export const ScMatchesList = styled.div`
 
   ${customScrollbar}
 
+  .matchesHighlights__Checkbox {
+
+    & label {
+      margin-bottom: 15px;
+    }
+  }
+
   ${isMobileDevice
     ? css`
     `
@@ -50,7 +57,7 @@ export const ScLabel = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  margin-bottom: 16px;
+  margin: auto 0;
 `
 
 export const ScDate = styled.span`
@@ -63,7 +70,7 @@ export const ScTournament = styled.div`
   font-weight: 400;
   display: flex;
   align-items: center;
-  height: 16px;
+  /* height: 16px; */
 `
 
 export const ScTournamentName = styled.span`
diff --git a/src/requests/onePayment.tsx b/src/requests/onePayment.tsx
index 8535756d..630a145a 100644
--- a/src/requests/onePayment.tsx
+++ b/src/requests/onePayment.tsx
@@ -6,6 +6,7 @@ import { handleUnsuccessfulSubscription } from './buySubscription/handleUnsucces
 export type Props = {
   cardId: string,
   order: {
+    background_music: string | null,
     duration: number,
     lang: string,
     matches: Array<number>,
diff --git a/src/utilits/Mirage/Fixtures/auth.js b/src/utilits/Mirage/Fixtures/auth.js
new file mode 100644
index 00000000..1fd23c71
--- /dev/null
+++ b/src/utilits/Mirage/Fixtures/auth.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  a: 1,
+}
diff --git a/src/utilits/Mirage/Mirage.ts b/src/utilits/Mirage/Mirage.ts
new file mode 100644
index 00000000..85bf051e
--- /dev/null
+++ b/src/utilits/Mirage/Mirage.ts
@@ -0,0 +1,43 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  createServer,
+  Model,
+} from 'miragejs'
+
+import auth from './Fixtures/auth'
+
+// eslint-disable-next-line
+interface Props {
+  environment: string,
+}
+
+export function makeServer({ environment = 'test' }: Props) {
+  return createServer({
+    environment,
+    factories: {},
+    fixtures: {
+      auth,
+    },
+    models: {
+      auth: Model.extend<Partial<any>>({}),
+    },
+    routes() {
+      this.namespace = '/api'
+      // this.urlPrefix = Url.TokenServer
+      // this.passthrough(); // Allow unhandled requests on the current domain to pass through
+      this.get(
+        '/dashboard/1.0/workplace-count-employee/:id',
+        (schema, request) => (
+          schema
+            .all('auth')
+            .models.find(
+              ({ structureId }) => structureId === request.params.id,
+            )?.attrs || {}
+        ),
+      )
+    },
+    seeds(server) {
+      server.loadFixtures()
+    },
+  })
+}