diff --git a/package-lock.json b/package-lock.json
index 9260654..e2f7028 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-vue": "^9.6.0",
+        "miragejs": "^0.1.45",
         "prettier": "^2.4.1",
         "sass": "^1.55.0",
         "sass-loader": "^13.0.2",
@@ -1912,6 +1913,12 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "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/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -6651,6 +6658,12 @@
       "optional": true,
       "peer": true
     },
+    "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",
@@ -7733,6 +7746,12 @@
       "optional": true,
       "peer": true
     },
+    "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",
@@ -8359,6 +8378,30 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "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",
@@ -8371,12 +8414,90 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "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": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "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.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
       "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": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==",
+      "dev": true
+    },
     "node_modules/lodash.mapvalues": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
@@ -8395,12 +8516,36 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "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.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "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",
@@ -9137,6 +9282,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/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -10818,6 +11000,16 @@
         "node": ">= 0.8.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.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -11558,6 +11750,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "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/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -15399,6 +15597,12 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "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
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -19037,6 +19241,12 @@
       "optional": true,
       "peer": true
     },
+    "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",
@@ -19858,6 +20068,12 @@
       "optional": true,
       "peer": true
     },
+    "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",
@@ -20359,6 +20575,30 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "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",
@@ -20371,12 +20611,90 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "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": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "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.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
       "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": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==",
+      "dev": true
+    },
     "lodash.mapvalues": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
@@ -20395,12 +20713,36 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "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.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "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",
@@ -20959,6 +21301,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"
+      }
+    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -22141,6 +22517,16 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "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.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -22743,6 +23129,12 @@
         "glob": "^7.1.3"
       }
     },
+    "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
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 14c9cb5..821fc0e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.6.0",
+    "miragejs": "^0.1.45",
     "prettier": "^2.4.1",
     "sass": "^1.55.0",
     "sass-loader": "^13.0.2",
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..5dbe441
--- /dev/null
+++ b/server.js
@@ -0,0 +1,40 @@
+import { createServer } from "miragejs";
+
+export function clientsServer() {
+  createServer({
+    routes() {
+      this.get("/api/clients", () => ({
+        dataClients: [
+          {
+            id: "1",
+            fullName: "Вильгейльм Арнольд Витальевич",
+            age: "34",
+            jobTitle: "Менеджер",
+            priority: "Высокий",
+            phone: "+7 (915) 657–21–14",
+            email: "Superboyband@yandex.ru",
+            networks: [],
+            meetingTime: {
+              date: "02.06.22",
+              time: "18:30–19:30",
+            },
+          },
+          {
+            id: "2",
+            fullName: "Астафоркина Екатерина Геннадьевна",
+            age: "54",
+            jobTitle: "Менеджер",
+            priority: "-",
+            phone: "+7 (574) 364–53–36",
+            email: "antimag@gmail.com",
+            networks: [],
+            meetingTime: {
+              date: "14.07.22",
+              time: "17:30–21:30",
+            },
+          },
+        ],
+      }));
+    },
+  });
+}
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a3177c6..5e6a4ec 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,3 +17,4 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --time-indicator-color: #e93131
diff --git a/src/main.js b/src/main.js
index 8f81c95..9e70808 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,11 @@ import "./assets/sass/fonts.sass";
 import "./assets/sass/tailwind.sass";
 import "./assets/sass/variables.sass";
 import "./assets/css/iconfonts.css";
+import { clientsServer } from "../server.js";
+
+if (process.env.NODE_ENV === "development") {
+  clientsServer({ environment: "development" });
+}
 
 moment.locale("ru");
 
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index a08e224..e8b57ec 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,29 +1,23 @@
 <template lang="pug">
-  .calendar-container.ml-2
-    calendar-header(
-      :currentDay="currentDate"
+  .calendar-container
+    calendar-schedule(
+      :currentDate="currentDate"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
-      @selectedLayout="changeCalendarLayout")
-    calendar-column(:info="columnInfo") 
+      @selected-layout="changeCalendarLayout"
+      )
 </template>
 
 <script>
 import * as moment from "moment/moment";
-import CalendarHeader from "./components/CalendarHeader.vue";
-import CalendarColumn from "./components/CalendarColumn.vue";
-import teamMemberAvatar from "@/assets/images/team-member.svg";
+import CalendarSchedule from "./components/CalendarSchedule.vue";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader, CalendarColumn },
+  components: { CalendarSchedule },
   data() {
     return {
-      currentDate: moment(),
       calendarLayout: "",
-      columnInfo: {
-        name: "Захарова А.О.",
-        avatar: teamMemberAvatar,
-      },
+      currentDate: moment(),
     };
   },
   methods: {
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
new file mode 100644
index 0000000..d166fb1
--- /dev/null
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -0,0 +1,20 @@
+<template lang="pug">
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
+    span.font-medium.text-base(v-for="hour in hoursArray") {{ hour }}
+</template>
+
+<script>
+export default {
+  name: "CalendarClockColumn",
+  props: {
+    hoursArray: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-clock-column
+  width: 80px
+  height: 100%
+  color: var(--font-dark-blue-color)
+</style>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index fba93bf..120697a 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,8 +6,9 @@
         span.member-name.font-medium.text-base.mr-6 {{ info.name }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .body.flex.flex-col
-      .line.flex.items-center(v-for="hour in 10" :key="hour")
+    .flex.flex-col
+      span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
+      .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
 
@@ -23,6 +24,33 @@ export default {
         return {};
       },
     },
+    hoursArray: Array,
+    currentTime: String,
+  },
+  data() {
+    return {
+      isShownIndicator: true,
+    };
+  },
+  computed: {
+    indicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+  },
+  methods: {
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      if (result > 666) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
+    },
   },
 };
 </script>
@@ -30,7 +58,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  background-color: var(--default-white)
+  position: relative
 
 .header
   height: 48px
@@ -50,8 +78,15 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:last-child
+    display: none
 
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
+
+.time-indicator
+  width: 100%
+  border-top: 1px solid var(--time-indicator-color)
+  position: absolute
 </style>
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 930fc1a..7b6b7b7 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -17,7 +17,7 @@ export default {
   name: "CalendarHeader",
   components: { BaseArrowButton, CalendarLayoutSwitch },
   props: {
-    currentDay: Object,
+    currentDate: Object,
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     dateString() {
-      let newStr = this.currentDay.format("D MMMM YYYY");
+      let newStr = this.currentDate.format("D MMMM YYYY");
       return newStr
         .split(" ")
         .map((elem, index) => {
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.$emit("selectedLayout", option);
+      this.$emit("selected-layout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -48,9 +48,9 @@ export default {
     },
   },
   watch: {
-    currentDay: function () {
+    currentDate: function () {
       this.isToday =
-        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
 };
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
new file mode 100644
index 0000000..05deb49
--- /dev/null
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -0,0 +1,96 @@
+<template lang="pug">
+  .schedule.ml-2
+    calendar-header(
+      :currentDate="currentDate"
+      @previous-date="previousDate"
+      @next-date="nextDate"
+      @selected-layout="selectedLayout")
+    .schedule-body.flex
+      calendar-clock-column(:hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import CalendarHeader from "./CalendarHeader.vue";
+import CalendarColumn from "./CalendarColumn.vue";
+import CalendarClockColumn from "./CalendarClockColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
+export default {
+  name: "CalendarSchedule",
+  components: { CalendarHeader, CalendarColumn, CalendarClockColumn },
+  props: {
+    currentDate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
+      currentTime: "",
+      hoursArray: [],
+      timer: null,
+    };
+  },
+  methods: {
+    previousDate() {
+      this.$emit("previous-date");
+    },
+    nextDate() {
+      this.$emit("next-date");
+    },
+    selectedLayout(option) {
+      this.$emit("selected-layout", option);
+    },
+    updateTime() {
+      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (currentHour < 20 && currentHour > 8) {
+        this.timer = setInterval(() => {
+          this.changeCurrentTime();
+          this.changeHoursArray();
+        }, 30000);
+      }
+    },
+    changeCurrentTime() {
+      this.currentTime = moment().format("HH:mm:ss");
+    },
+    hoursArrayInitialization() {
+      for (let i = 8; i <= 18; i++) {
+        let startTime = this.currentTime.slice(0, -3);
+        let currentHour = parseInt(startTime.slice(0, -3), 10);
+        if (i === currentHour) {
+          this.hoursArray.push(startTime);
+        } else this.hoursArray.push(`${i}:00`);
+      }
+    },
+    changeHoursArray() {
+      let newCurrentTime = this.currentTime.slice(0, -3);
+      let currentHour = parseInt(newCurrentTime.slice(0, -3), 10);
+      let newHoursArray = this.hoursArray.map((elem) => {
+        if (parseInt(elem.slice(0, -3), 10) === currentHour) {
+          return this.currentTime.slice(0, -3);
+        }
+        return elem;
+      });
+      this.hoursArray = newHoursArray;
+    },
+  },
+  mounted() {
+    this.changeCurrentTime();
+    this.hoursArrayInitialization();
+    this.updateTime();
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.schedule
+  width: 100%
+  background-color: var(--default-white)
+</style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index c54e773..e1cbd53 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -66,39 +66,17 @@ export default {
     return {
       selectAll: false,
       marked: [],
-      dataClients: [
-        {
-          id: "1",
-          fullName: "Вильгейльм Арнольд Витальевич",
-          age: "34",
-          jobTitle: "Менеджер",
-          priority: "Высокий",
-          phone: "+7 (915) 657–21–14",
-          email: "Superboyband@yandex.ru",
-          networks: [],
-          meetingTime: {
-            date: "02.06.22",
-            time: "18:30–19:30",
-          },
-        },
-        {
-          id: "2",
-          fullName: "Астафоркина Екатерина Геннадьевна",
-          age: "54",
-          jobTitle: "Менеджер",
-          priority: "-",
-          phone: "+7 (574) 364–53–36",
-          email: "antimag@gmail.com",
-          networks: [],
-          meetingTime: {
-            date: "14.07.22",
-            time: "17:30–21:30",
-          },
-        },
-      ],
+      dataClients: [],
     };
   },
   methods: {
+    saveDataClients(data) {
+      this.dataClients = data.dataClients;
+    },
+    fetchDataClients() {
+      // eslint-disable-next-line
+      fetch("/api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
+    },
     selectedCheck(e) {
       if (e.target.id === "all") {
         this.selectAll = !this.selectAll;
@@ -119,6 +97,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.fetchDataClients();
+  },
 };
 </script>
 
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index a286dd9..cdb4b6a 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -26,7 +26,7 @@
         span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
     td.py-5
       .px-4
-        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(@click="openPopup")
+        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
           clients-action-popup(v-if="isOpenPopup")
 </template>
 
@@ -55,9 +55,13 @@ export default {
     meetingTime: Object,
   },
   methods: {
-    openPopup() {
+    openPopup(e) {
+      e.target.focus();
       this.isOpenPopup = !this.isOpenPopup;
     },
+    handleUnFocusPopup() {
+      this.isOpenPopup = false;
+    },
   },
 };
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index f1a6ef5..d32734c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,9 @@ module.exports = {
         "3xl": ["60px", { lineHeight: "70px" }],
         "4xl": ["44px", { lineHeight: "48px" }],
       },
+      gap: {
+        43: "43px",
+      },
     },
   },
   plugins: [],