diff --git a/.history/components/global/modals/is-modal-def_20220830154940.vue b/.history/components/global/modals/is-modal-def_20220830154940.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff8d102de23de55fe9682859645f0fdb9b75e612
--- /dev/null
+++ b/.history/components/global/modals/is-modal-def_20220830154940.vue
@@ -0,0 +1,389 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-def_20220830155018.vue b/.history/components/global/modals/is-modal-def_20220830155018.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25c6d57c423c2824cd5d8c46cdea20b96bbf490b
--- /dev/null
+++ b/.history/components/global/modals/is-modal-def_20220830155018.vue
@@ -0,0 +1,387 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-def_20220830170533.vue b/.history/components/global/modals/is-modal-def_20220830170533.vue
new file mode 100644
index 0000000000000000000000000000000000000000..607d7d4cea4f426cf99e7c1e40f9b8c95130fb74
--- /dev/null
+++ b/.history/components/global/modals/is-modal-def_20220830170533.vue
@@ -0,0 +1,378 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+        )
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-def_20220830170552.vue b/.history/components/global/modals/is-modal-def_20220830170552.vue
new file mode 100644
index 0000000000000000000000000000000000000000..38adfe33cabc2aac8eb6d7fb75471ade4fba7c9a
--- /dev/null
+++ b/.history/components/global/modals/is-modal-def_20220830170552.vue
@@ -0,0 +1,377 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+        )
+            | SectionContent
+        slot(
+          name="modal-footer"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-def_20220830170615.vue b/.history/components/global/modals/is-modal-def_20220830170615.vue
new file mode 100644
index 0000000000000000000000000000000000000000..129c8494e4f4291334f83f2744909481f970b548
--- /dev/null
+++ b/.history/components/global/modals/is-modal-def_20220830170615.vue
@@ -0,0 +1,377 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+        )
+            | SectionContent
+        slot(
+          name="modal-footer"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-def_20220830170650.vue b/.history/components/global/modals/is-modal-def_20220830170650.vue
new file mode 100644
index 0000000000000000000000000000000000000000..129c8494e4f4291334f83f2744909481f970b548
--- /dev/null
+++ b/.history/components/global/modals/is-modal-def_20220830170650.vue
@@ -0,0 +1,377 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+        )
+            | SectionContent
+        slot(
+          name="modal-footer"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830151528.vue b/.history/components/global/modals/is-modal-edit-service_20220830151528.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830151652.vue b/.history/components/global/modals/is-modal-edit-service_20220830151652.vue
new file mode 100644
index 0000000000000000000000000000000000000000..82f6798256f4825a6b77557ad5bb6d7f6e37be0c
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830151652.vue
@@ -0,0 +1,419 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+        div
+          button(
+            class="toAuth"
+            @click='logout'
+          )
+            | Выйти
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+    }
+  },
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    logout() {
+      this.$ctoast.info(`${this.$t('logOut')}...`, { delay: false, name: 'logout' })
+      setTimeout(() => {
+        this.$ctoast.replace('logout', {
+          title: 'Log out',
+          type: 'success'
+        })
+        setTimeout(async () => {
+          await this.$auth.logout()
+        }, 750)
+      }, 1000)
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830155019.vue b/.history/components/global/modals/is-modal-edit-service_20220830155019.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d909477976cb899f49d11487eafe94f21794063
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830155019.vue
@@ -0,0 +1,386 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830161048.vue b/.history/components/global/modals/is-modal-edit-service_20220830161048.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fea1cf11cbf09776747196553fb2caee4af899b4
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830161048.vue
@@ -0,0 +1,388 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830161116.vue b/.history/components/global/modals/is-modal-edit-service_20220830161116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..698e3ea2af828f34e042913b5b8ad9f0b827ab1c
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830161116.vue
@@ -0,0 +1,385 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            | SectionContent
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(class="is-modal__wrapper-footer__btn")
+              | Кнопка
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830171343.vue b/.history/components/global/modals/is-modal-edit-service_20220830171343.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eefd849022fa6b399631c9c560a2913b2a1ca919
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830171343.vue
@@ -0,0 +1,414 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830171518.vue b/.history/components/global/modals/is-modal-edit-service_20220830171518.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a49c94cdfd00bc8051c8c6fd6d606c4ce9836bb
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830171518.vue
@@ -0,0 +1,413 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            label(
+              for="firstname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Name"
+                is-name="firstname"
+                is-type="text"
+                is-placeholder="Firstname"
+                @input="parseFirstname"
+                :is-required="true"
+                :is-value='firstname'
+              )
+            label(
+              for="secondname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Secondname"
+                is-name="secondname"
+                is-type="text"
+                is-placeholder="Secondname"
+                @input="parseSecondname"
+                :is-required="true"
+                :is-value='secondname'
+              )
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830171610.vue b/.history/components/global/modals/is-modal-edit-service_20220830171610.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd60bb0978bf8ddedd8b27f65ccd7b96940ca481
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830171610.vue
@@ -0,0 +1,439 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            label(
+              for="firstname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Name"
+                is-name="firstname"
+                is-type="text"
+                is-placeholder="Firstname"
+                @input="parseFirstname"
+                :is-required="true"
+                :is-value='firstname'
+              )
+            label(
+              for="secondname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Secondname"
+                is-name="secondname"
+                is-type="text"
+                is-placeholder="Secondname"
+                @input="parseSecondname"
+                :is-required="true"
+                :is-value='secondname'
+              )
+            label(
+              for="firstname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Name"
+                is-name="firstname"
+                is-type="text"
+                is-placeholder="Firstname"
+                @input="parseFirstname"
+                :is-required="true"
+                :is-value='firstname'
+              )
+            label(
+              for="secondname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Secondname"
+                is-name="secondname"
+                is-type="text"
+                is-placeholder="Secondname"
+                @input="parseSecondname"
+                :is-required="true"
+                :is-value='secondname'
+              )
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830171901.vue b/.history/components/global/modals/is-modal-edit-service_20220830171901.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e3c9b42ea75dc1d9af114b90bda5a71826e995dd
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830171901.vue
@@ -0,0 +1,414 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            label(
+              for="Super Coach Week"
+            )
+              is-input(
+                style="margin-top: 1.5rem;"
+                is-label="Super Coach Week"
+                is-name="Super Coach Week"
+                is-type="text"
+                is-placeholder="Super Coach Week"
+                @input="parseFirstname"
+                :is-required="true"
+                :is-value='firstname'
+              )
+            label(
+              for="secondname"
+            )
+              is-input(
+                style="margin-top: 1.5rem;"
+                is-label="Secondname"
+                is-name="secondname"
+                is-type="text"
+                is-placeholder="Secondname"
+                @input="parseSecondname"
+                :is-required="true"
+                :is-value='secondname'
+              )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830171938.vue b/.history/components/global/modals/is-modal-edit-service_20220830171938.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d8b8f456412c0b5d3d17a4854ce04642ee4f334
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830171938.vue
@@ -0,0 +1,414 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            label(
+              for="Super Coach Week"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Super Coach Week"
+                is-name="Super Coach Week"
+                is-type="text"
+                is-placeholder="Super Coach Week"
+                @input="parseFirstname"
+                :is-required="true"
+                :is-value='firstname'
+              )
+            label(
+              for="secondname"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Secondname"
+                is-name="secondname"
+                is-type="text"
+                is-placeholder="Secondname"
+                @input="parseSecondname"
+                :is-required="true"
+                :is-value='secondname'
+              )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830172010.vue b/.history/components/global/modals/is-modal-edit-service_20220830172010.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c45a31b5238395fde80762526bddc9c7452ecb9
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830172010.vue
@@ -0,0 +1,402 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+            label(
+              for="Super Coach Week"
+            )
+              is-input(
+                style="margin-top: 2.5rem;"
+                is-label="Super Coach Week"
+                is-name="Super Coach Week"
+                is-type="text"
+                is-placeholder="Super Coach Week"
+                @input="parseFirstname"
+                :is-required="true"
+                :is-value='firstname'
+              )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830172107.vue b/.history/components/global/modals/is-modal-edit-service_20220830172107.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4897b9d94835ec8e1651aa36bd7cd5ed7d92fdde
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830172107.vue
@@ -0,0 +1,407 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              label(
+                for="Super Coach Week"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Super Coach Week"
+                  is-name="Super Coach Week"
+                  is-type="text"
+                  is-placeholder="Super Coach Week"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830172335.vue b/.history/components/global/modals/is-modal-edit-service_20220830172335.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9d37cc9466235c12355d88086b878577d896302d
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830172335.vue
@@ -0,0 +1,435 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editTitle Super Coach
+              .editInput
+                label(
+                  for="Super Coach Week"
+                )
+                  is-input(
+                    style="margin-top: 2.5rem;"
+                    is-label="Super Coach Week"
+                    is-name="Super Coach Week"
+                    is-type="text"
+                    is-placeholder="Super Coach Week"
+                    @input="parseFirstname"
+                    :is-required="true"
+                    :is-value='firstname'
+                  )
+                label(
+                  for="Super Coach Month"
+                )
+                  is-input(
+                    style="margin-top: 2.5rem;"
+                    is-label="Super Coach Month"
+                    is-name="Super Coach Month"
+                    is-type="text"
+                    is-placeholder="Super Coach Month"
+                    @input="parseFirstname"
+                    :is-required="true"
+                    :is-value='firstname'
+                  )
+                label(
+                  for="Super Coach Year"
+                )
+                  is-input(
+                    style="margin-top: 2.5rem;"
+                    is-label="Super Coach Year"
+                    is-name="Super Coach Year"
+                    is-type="text"
+                    is-placeholder="Super Coach Year"
+                    @input="parseFirstname"
+                    :is-required="true"
+                    :is-value='firstname'
+                  )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830172612.vue b/.history/components/global/modals/is-modal-edit-service_20220830172612.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8950adc23e424bda240597e480169c581b754778
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830172612.vue
@@ -0,0 +1,565 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830172705.vue b/.history/components/global/modals/is-modal-edit-service_20220830172705.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd035860c0420d360a6ca9c8049aef21290a00c7
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830172705.vue
@@ -0,0 +1,566 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173126.vue b/.history/components/global/modals/is-modal-edit-service_20220830173126.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a510963be58fdf693d4d3f692bb0987d0c724692
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173126.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173243.vue b/.history/components/global/modals/is-modal-edit-service_20220830173243.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b1b6175cdf5ace81d6d3c356ac7a129ef8bbdb9
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173243.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173402.vue b/.history/components/global/modals/is-modal-edit-service_20220830173402.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e05aa53ce98253c077923fa210aeb30b13e540f
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173402.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Week "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173450.vue b/.history/components/global/modals/is-modal-edit-service_20220830173450.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b7d639e561ad60cfc817fa030b32617ae99a5b0
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173450.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173618.vue b/.history/components/global/modals/is-modal-edit-service_20220830173618.vue
new file mode 100644
index 0000000000000000000000000000000000000000..399e1aea9d5b22afc3f8e5f732f485b18fbd07ee
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173618.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Coach Athlete Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super CoachAthlete Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173713.vue b/.history/components/global/modals/is-modal-edit-service_20220830173713.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64bfd76c50c9d5b66244b50c731646a2845eefc7
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173713.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830173918.vue b/.history/components/global/modals/is-modal-edit-service_20220830173918.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6cf7a284a406a17656428840f1b14853afdd169
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830173918.vue
@@ -0,0 +1,569 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: ''
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174023.vue b/.history/components/global/modals/is-modal-edit-service_20220830174023.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e7d9b04460b29911c0eeadf9b8b3abeec64c92d
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174023.vue
@@ -0,0 +1,571 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174151.vue b/.history/components/global/modals/is-modal-edit-service_20220830174151.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b209d5caa9ff48f166787fc253c208cead029b7f
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174151.vue
@@ -0,0 +1,574 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174253.vue b/.history/components/global/modals/is-modal-edit-service_20220830174253.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f1137c2b2193f6a6b9b536841ece131b649e5af
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174253.vue
@@ -0,0 +1,577 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174304.vue b/.history/components/global/modals/is-modal-edit-service_20220830174304.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f451bb085060a2afc13009bcc518d701ce957064
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174304.vue
@@ -0,0 +1,577 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174342.vue b/.history/components/global/modals/is-modal-edit-service_20220830174342.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ed36cdee10ce6ac2560880fb2ad0bad3496f2da
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174342.vue
@@ -0,0 +1,580 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseFirstname"
+                      :is-required="true"
+                      :is-value='firstname'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174405.vue b/.history/components/global/modals/is-modal-edit-service_20220830174405.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fff37e0108efb73b48fe8c2746d5517f08f91ddf
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174405.vue
@@ -0,0 +1,580 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174419.vue b/.history/components/global/modals/is-modal-edit-service_20220830174419.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fff37e0108efb73b48fe8c2746d5517f08f91ddf
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174419.vue
@@ -0,0 +1,580 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174713.vue b/.history/components/global/modals/is-modal-edit-service_20220830174713.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8128758f69be8bd97390ae1d534891bdd4910ceb
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174713.vue
@@ -0,0 +1,616 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174832.vue b/.history/components/global/modals/is-modal-edit-service_20220830174832.vue
new file mode 100644
index 0000000000000000000000000000000000000000..846ccbd4baf7be29409d178efb7eb2e55f968089
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174832.vue
@@ -0,0 +1,619 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830174955.vue b/.history/components/global/modals/is-modal-edit-service_20220830174955.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e78162acb92e81147841e96f89b7472b1e2d0136
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830174955.vue
@@ -0,0 +1,624 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 45%;
+    justify-content: space-between;
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830175038.vue b/.history/components/global/modals/is-modal-edit-service_20220830175038.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5dbdd9ee94145b8846bea0bb9322f649fc403b2
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830175038.vue
@@ -0,0 +1,624 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830175143.vue b/.history/components/global/modals/is-modal-edit-service_20220830175143.vue
new file mode 100644
index 0000000000000000000000000000000000000000..35f127e18b69a6a28aa92bce88d284944baa5521
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830175143.vue
@@ -0,0 +1,628 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830175332.vue b/.history/components/global/modals/is-modal-edit-service_20220830175332.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1cfb7b170fecc9e25b126d8939e92ae5c48934b4
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830175332.vue
@@ -0,0 +1,632 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editImput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830175417.vue b/.history/components/global/modals/is-modal-edit-service_20220830175417.vue
new file mode 100644
index 0000000000000000000000000000000000000000..77b9448b86184d7b9c1c95625876e2c91c41c934
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830175417.vue
@@ -0,0 +1,633 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editImput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830175422.vue b/.history/components/global/modals/is-modal-edit-service_20220830175422.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1cf041d3a0bd28eb680c2a4e67cb026eeb40f660
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830175422.vue
@@ -0,0 +1,633 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editImput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830175507.vue b/.history/components/global/modals/is-modal-edit-service_20220830175507.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f8f987093ee753b801fad49044f4e0929825bdb
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830175507.vue
@@ -0,0 +1,633 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editInput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830180404.vue b/.history/components/global/modals/is-modal-edit-service_20220830180404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..99e96a12f8b2a2d9af235c577f6ce4dbda409751
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830180404.vue
@@ -0,0 +1,664 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        // coach
+        // this.SuperCoach = this.services[0]
+        this.SCWE = this.services[0].prices.en.week
+        this.SCME = this.services[0].prices.en.month
+        this.SCYE = this.services[0].prices.en.year
+        this.SCWR = this.services[0].prices.ru.week
+        this.SCMR = this.services[0].prices.ru.month
+        this.SCYR = this.services[0].prices.ru.year
+        // athlete
+        this.SAWE = this.services[1].prices.en.week
+        this.SAME = this.services[1].prices.en.month
+        this.SAYE = this.services[1].prices.en.year
+        this.SAWR = this.services[1].prices.ru.week
+        this.SAMR = this.services[1].prices.ru.month
+        this.SAYR = this.services[1].prices.ru.year
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  }
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editInput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830180433.vue b/.history/components/global/modals/is-modal-edit-service_20220830180433.vue
new file mode 100644
index 0000000000000000000000000000000000000000..288b46d5e0f185d5e2e08790a6df6cb5ac8e8114
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830180433.vue
@@ -0,0 +1,664 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        // coach
+        // this.SuperCoach = this.services[0]
+        this.SCWE = this.services[0].prices.en.week
+        this.SCME = this.services[0].prices.en.month
+        this.SCYE = this.services[0].prices.en.year
+        this.SCWR = this.services[0].prices.ru.week
+        this.SCMR = this.services[0].prices.ru.month
+        this.SCYR = this.services[0].prices.ru.year
+        // athlete
+        this.SAWE = this.services[1].prices.en.week
+        this.SAME = this.services[1].prices.en.month
+        this.SAYE = this.services[1].prices.en.year
+        this.SAWR = this.services[1].prices.ru.week
+        this.SAMR = this.services[1].prices.ru.month
+        this.SAYR = this.services[1].prices.ru.year
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  }
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editInput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830180514.vue b/.history/components/global/modals/is-modal-edit-service_20220830180514.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6b5797bc73c3c1c922b42940c33b581141792f0
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830180514.vue
@@ -0,0 +1,664 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+    }
+  },
+  props: {
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        // coach
+        // this.SuperCoach = this.services[0]
+        this.SCWE = this.services[0].prices.en.week
+        this.SCME = this.services[0].prices.en.month
+        this.SCYE = this.services[0].prices.en.year
+        this.SCWR = this.services[0].prices.ru.week
+        this.SCMR = this.services[0].prices.ru.month
+        this.SCYR = this.services[0].prices.ru.year
+        // athlete
+        this.SAWE = this.services[1].prices.en.week
+        this.SAME = this.services[1].prices.en.month
+        this.SAYE = this.services[1].prices.en.year
+        this.SAWR = this.services[1].prices.ru.week
+        this.SAMR = this.services[1].prices.ru.month
+        this.SAYR = this.services[1].prices.ru.year
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editInput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-service_20220830181709.vue b/.history/components/global/modals/is-modal-edit-service_20220830181709.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0ad5a816db05210e0c00bff9e916fc9c818fa88
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-service_20220830181709.vue
@@ -0,0 +1,667 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+      form: [
+
+      ]
+    }
+  },
+  props: {
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        // coach
+        // this.SuperCoach = this.services[0]
+        this.SCWE = this.services[0].prices.en.week
+        this.SCME = this.services[0].prices.en.month
+        this.SCYE = this.services[0].prices.en.year
+        this.SCWR = this.services[0].prices.ru.week
+        this.SCMR = this.services[0].prices.ru.month
+        this.SCYR = this.services[0].prices.ru.year
+        // athlete
+        this.SAWE = this.services[1].prices.en.week
+        this.SAME = this.services[1].prices.en.month
+        this.SAYE = this.services[1].prices.en.year
+        this.SAWR = this.services[1].prices.ru.week
+        this.SAMR = this.services[1].prices.ru.month
+        this.SAYR = this.services[1].prices.ru.year
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editInput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/components/global/modals/is-modal-edit-user.vue b/.history/components/global/modals/is-modal-edit-user_20220830131106.vue
similarity index 95%
rename from components/global/modals/is-modal-edit-user.vue
rename to .history/components/global/modals/is-modal-edit-user_20220830131106.vue
index 6dda312a6a06571da9c617bdff5fa2236e35b916..9116bbf9c1bf80da75e0895c2e1dd59168999487 100644
--- a/components/global/modals/is-modal-edit-user.vue
+++ b/.history/components/global/modals/is-modal-edit-user_20220830131106.vue
@@ -33,26 +33,6 @@ transition(name="modal")
         )
           slot(name="modal-content")
             form.change-account
-              label.account-photo(
-                for="file"
-              )
-                input(
-                  type="file"
-                  id="file"
-                  ref="file"
-                  accept="image/*"
-                  v-on:change="handleFileUpload()"
-                )
-                img.photo-preview(
-                  v-bind:src="imagePreview"
-                  v-show="showPreview"
-                )
-              .btn_photo
-                button(
-                  class=""
-                  @click.prevent='savePhoto'
-                )
-                  | Save Photo
               label(
                 for="firstname"
               )
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830131124.vue b/.history/components/global/modals/is-modal-edit-user_20220830131124.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d057eb965c55960e9f6f90fcac9eafb311b9328
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830131124.vue
@@ -0,0 +1,587 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+              label.label_posr(
+                for="email"
+              )
+                .label_account
+                  | Email
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="email"
+                  is-type="email"
+                  :is-value='email'
+                  :is-disabled='true'
+                )
+              label.label_posr(
+                for="type"
+              )
+                .label_account
+                 | Type of account
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="type"
+                  is-type="text"
+                  :is-value='type'
+                  :is-disabled='true'
+                )
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      firstname: '',
+      secondname: '',
+      email: '',
+      type: '',
+      photoLink: '',
+    }
+  },
+  async mounted() {
+    await this.$axios.get('/api/users/me')
+      .then(response => {
+        this.firstname = response.data.firstname
+        this.secondname = response.data.secondname
+        this.email = response.data.email
+        this.type = response.data.role.name
+        this.imagePreview = response.data.photos[0].link
+      })
+      .catch(err => {
+        this.$ctoast.replace('Error', {
+          type: 'error',
+          description: `[Error]: ${err}`
+        })
+        console.log(err);
+      })
+  },
+  methods: {
+    parseFirstname(data) {
+      this.firstname = data
+    },
+    parseSecondname(data) {
+      this.secondname = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    logout() {
+      this.$ctoast.info(
+        `Log out...`,
+        {
+          delay: false,
+          name: 'logout'
+        })
+      setTimeout(() => {
+        this.$ctoast.replace('logout', {
+          title: 'Log out',
+          type: 'success'
+        })
+        setTimeout(async () => {
+          await this.$auth.logout()
+        }, 500)
+      }, 1000)
+    },
+    handleFileUpload() {
+      this.file = this.$refs.file.files[0];
+      const reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        this.showPreview = true;
+        this.imagePreview = reader.result;
+      }.bind(this), false);
+
+      if (this.file) {
+        if (/\.(jpe?g|png|gif)$/i.test(this.file.name)) {
+          reader.readAsDataURL(this.file);
+        }
+      }
+    },
+    async save() {
+      await this.$nuxt.$axios.patch('/api/users', {
+        firstname: this.firstname,
+        secondname: this.secondname
+      })
+        .then(response => {
+        })
+        .catch(err => {
+          this.$ctoast.show({
+            title: `[Error]: ${err}`,
+            type: 'error'
+          })
+        })
+    },
+    async savePhoto() {
+      const photo = new FormData()
+      photo.append('file', this.file)
+      await this.$nuxt.$axios.post('/api/files/image', photo)
+        .then(response => {
+          this.photoLink = response.data.link
+        })
+      await this.$nuxt.$axios.patch('/api/users', {
+        photos: [
+          {
+            position: 0,
+            link: this.photoLink
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830131154.vue b/.history/components/global/modals/is-modal-edit-user_20220830131154.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a811ee1fedb6e516d6547000c0316b5983e761d4
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830131154.vue
@@ -0,0 +1,587 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+              label.label_posr(
+                for="email"
+              )
+                .label_account
+                  | Email
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="email"
+                  is-type="email"
+                  :is-value='email'
+                  :is-disabled='true'
+                )
+              label.label_posr(
+                for="type"
+              )
+                .label_account
+                 | Type of account
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="type"
+                  is-type="text"
+                  :is-value='type'
+                  :is-disabled='true'
+                )
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      firstname: '',
+      secondname: '',
+      email: '',
+      type: '',
+      photoLink: '',
+    }
+  },
+  async mounted() {
+    await this.$axios.get('/api/users/me')
+      .then(response => {
+        this.firstname = response.data.firstname
+        this.secondname = response.data.secondname
+        this.email = response.data.email
+        this.type = response.data.role.name
+        this.imagePreview = response.data.photos[0].link
+      })
+      .catch(err => {
+        this.$ctoast.replace('Error', {
+          type: 'error',
+          description: `[Error]: ${err}`
+        })
+        console.log(err);
+      })
+  },
+  methods: {
+    parseFirstname(data) {
+      this.firstname = data
+    },
+    parseSecondname(data) {
+      this.secondname = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    logout() {
+      this.$ctoast.info(
+        `Log out...`,
+        {
+          delay: false,
+          name: 'logout'
+        })
+      setTimeout(() => {
+        this.$ctoast.replace('logout', {
+          title: 'Log out',
+          type: 'success'
+        })
+        setTimeout(async () => {
+          await this.$auth.logout()
+        }, 500)
+      }, 1000)
+    },
+    handleFileUpload() {
+      this.file = this.$refs.file.files[0];
+      const reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        this.showPreview = true;
+        this.imagePreview = reader.result;
+      }.bind(this), false);
+
+      if (this.file) {
+        if (/\.(jpe?g|png|gif)$/i.test(this.file.name)) {
+          reader.readAsDataURL(this.file);
+        }
+      }
+    },
+    async save() {
+      await this.$nuxt.$axios.patch('/api/users', {
+        firstname: this.firstname,
+        secondname: this.secondname
+      })
+        .then(response => {
+        })
+        .catch(err => {
+          this.$ctoast.show({
+            title: `[Error]: ${err}`,
+            type: 'error'
+          })
+        })
+    },
+    async savePhoto() {
+      const photo = new FormData()
+      photo.append('file', this.file)
+      await this.$nuxt.$axios.post('/api/files/image', photo)
+        .then(response => {
+          this.photoLink = response.data.link
+        })
+      await this.$nuxt.$axios.patch('/api/users', {
+        photos: [
+          {
+            position: 0,
+            link: this.photoLink
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830132053.vue b/.history/components/global/modals/is-modal-edit-user_20220830132053.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51dab051cbb84a3799621489dcf1c53fea691410
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830132053.vue
@@ -0,0 +1,512 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+              label.label_posr(
+                for="email"
+              )
+                .label_account
+                  | Email
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="email"
+                  is-type="email"
+                  :is-value='email'
+                  :is-disabled='true'
+                )
+              label.label_posr(
+                for="type"
+              )
+                .label_account
+                 | Type of account
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-name="type"
+                  is-type="text"
+                  :is-value='type'
+                  :is-disabled='true'
+                )
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      firstname: '',
+      secondname: '',
+      email: '',
+      type: '',
+      photoLink: '',
+    }
+  },
+  async mounted() {
+  },
+  methods: {
+    parseFirstname(data) {
+      this.firstname = data
+    },
+    parseSecondname(data) {
+      this.secondname = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    async save() {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830132154.vue b/.history/components/global/modals/is-modal-edit-user_20220830132154.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e4f6ae2fd717cbdc154f7d5c0ace810e4071796
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830132154.vue
@@ -0,0 +1,486 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      firstname: '',
+      secondname: '',
+    }
+  },
+  async mounted() {
+  },
+  methods: {
+    parseFirstname(data) {
+      this.firstname = data
+    },
+    parseSecondname(data) {
+      this.secondname = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    async save() {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830132500.vue b/.history/components/global/modals/is-modal-edit-user_20220830132500.vue
new file mode 100644
index 0000000000000000000000000000000000000000..687f57c8b10b55c2def46c00ba9543ad3ae5f1c5
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830132500.vue
@@ -0,0 +1,486 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseFirstname"
+                  :is-required="true"
+                  :is-value='firstname'
+                )
+              label(
+                for="secondname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Secondname"
+                  is-name="secondname"
+                  is-type="text"
+                  is-placeholder="Secondname"
+                  @input="parseSecondname"
+                  :is-required="true"
+                  :is-value='secondname'
+                )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='choose'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      firstname: '',
+      secondname: '',
+    }
+  },
+  async mounted() {
+  },
+  methods: {
+    parseFirstname(data) {
+      this.firstname = data
+    },
+    parseSecondname(data) {
+      this.secondname = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    async choose() {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830132611.vue b/.history/components/global/modals/is-modal-edit-user_20220830132611.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d693d2d963b33b0759f1e77a68bdf76cb91fef4b
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830132611.vue
@@ -0,0 +1,470 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="firstname"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Name"
+                  is-name="firstname"
+                  is-type="text"
+                  is-placeholder="Firstname"
+                  @input="parseUID"
+                  :is-required="true"
+                  :is-value='UID'
+                )
+
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='choose'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      UID: '',
+    }
+  },
+  async mounted() {
+  },
+  methods: {
+    parseUID(data) {
+      this.UID = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    async choose() {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830132733.vue b/.history/components/global/modals/is-modal-edit-user_20220830132733.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94ac514a2be07068944897d87d0805f76534bfb7
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830132733.vue
@@ -0,0 +1,470 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="UID"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Inout User ID"
+                  is-name="UID"
+                  is-type="text"
+                  is-placeholder="UID"
+                  @input="parseUID"
+                  :is-required="true"
+                  :is-value='UID'
+                )
+
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='choose'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      UID: '',
+    }
+  },
+  async mounted() {
+  },
+  methods: {
+    parseUID(data) {
+      this.UID = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    async choose() {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/components/global/modals/is-modal-edit-user_20220830132739.vue b/.history/components/global/modals/is-modal-edit-user_20220830132739.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27fcb959224a98b519d2ec7237e25b7f001e6ada
--- /dev/null
+++ b/.history/components/global/modals/is-modal-edit-user_20220830132739.vue
@@ -0,0 +1,470 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            form.change-account
+              label(
+                for="UID"
+              )
+                is-input(
+                  style="margin-top: 2.5rem;"
+                  is-label="Input User ID"
+                  is-name="UID"
+                  is-type="text"
+                  is-placeholder="UID"
+                  @input="parseUID"
+                  :is-required="true"
+                  :is-value='UID'
+                )
+
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='choose'
+            )
+              | Choose
+</template>
+
+<script>
+
+export default {
+  name: 'IsModalComponent',
+  props: {
+    closeEvent: {
+      type: Function,
+      default: () => {
+        return () => { }
+      }
+    },
+    hardLoad: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      status: false,
+      loaderStatus: false,
+      contentLoaded: false,
+      file: '',
+      showPreview: true,
+      imagePreview: '',
+      UID: '',
+    }
+  },
+  async mounted() {
+  },
+  methods: {
+    parseUID(data) {
+      this.UID = data
+    },
+    closeModal() {
+      this.status = false
+      this.closeEvent()
+    },
+    async choose() {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 600px;
+      min-width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+      .change-account{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .account-photo {
+          width: 200px !important;
+          height: 200px !important;
+          border: 1px solid #e0e0e0 !important;
+          border-radius: 50% !important;
+          overflow: hidden !important;
+          background-color: #fff !important;
+          position: relative !important;
+          transition: all .3s;
+          box-shadow: 0px 7px 7px #e0e0e0 !important;
+          &:hover {
+            box-shadow: 0px 5px 10px #2c3e50 !important;
+          }
+          input{
+            opacity: 0;
+            position: absolute;
+          }
+          .photo-preview {
+            width: 100%;
+          }
+        }
+        .label_posr {
+          position: relative;
+          .label_account {
+            position: absolute;
+            color: rgba(0, 0, 0, .7);
+            font-size: 14px;
+            line-height: 16px;
+            top: 15px;
+          }
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;;
+        border-radius: 10px;
+        background-color: #0FD7CB;;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .25s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateY(100%);
+}
+</style>
diff --git a/.history/pages/service_20220830150042.vue b/.history/pages/service_20220830150042.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d343172be51b2bdd3285b6a166b2750b0c933b4
--- /dev/null
+++ b/.history/pages/service_20220830150042.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+div service
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+  },
+}
+</script>
+<style lang="scss" scoped>
+
+
+</style>
diff --git a/.history/pages/service_20220830150149.vue b/.history/pages/service_20220830150149.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc3c7fef58e8b787e51072e7a9ce509c01f65cae
--- /dev/null
+++ b/.history/pages/service_20220830150149.vue
@@ -0,0 +1,40 @@
+<template lang="pug">
+div service
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+
+
+</style>
diff --git a/.history/pages/service_20220830150204.vue b/.history/pages/service_20220830150204.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3dbf55b8738185caae22b4166a0e00c55d7f403b
--- /dev/null
+++ b/.history/pages/service_20220830150204.vue
@@ -0,0 +1,41 @@
+<template lang="pug">
+div service
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+
+
+</style>
diff --git a/.history/pages/service_20220830150444.vue b/.history/pages/service_20220830150444.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f143277f2fcc0337fa5c68afe1e110f8a4b3c597
--- /dev/null
+++ b/.history/pages/service_20220830150444.vue
@@ -0,0 +1,42 @@
+<template lang="pug">
+.services
+  is-loader(ref="users-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+
+
+</style>
diff --git a/.history/pages/service_20220830150525.vue b/.history/pages/service_20220830150525.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9941c64c529808cbd13d8cc50cbcc5198037fd89
--- /dev/null
+++ b/.history/pages/service_20220830150525.vue
@@ -0,0 +1,46 @@
+<template lang="pug">
+.services
+  is-loader(ref="users-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150551.vue b/.history/pages/service_20220830150551.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9941c64c529808cbd13d8cc50cbcc5198037fd89
--- /dev/null
+++ b/.history/pages/service_20220830150551.vue
@@ -0,0 +1,46 @@
+<template lang="pug">
+.services
+  is-loader(ref="users-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150634.vue b/.history/pages/service_20220830150634.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d443bd58a66df2fc1351ba8aea3bbb0a6dee45e2
--- /dev/null
+++ b/.history/pages/service_20220830150634.vue
@@ -0,0 +1,47 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150653.vue b/.history/pages/service_20220830150653.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ee8f8f382158f9f7e7d426e6a38208ffe9e46973
--- /dev/null
+++ b/.history/pages/service_20220830150653.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$refs['services-loader'].status = false
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150714.vue b/.history/pages/service_20220830150714.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bb1263cc27d5c25a485624722aa695cebe29491
--- /dev/null
+++ b/.history/pages/service_20220830150714.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    setTimeout(await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$refs['services-loader'].status = false
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }), 500)
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150722.vue b/.history/pages/service_20220830150722.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bb1263cc27d5c25a485624722aa695cebe29491
--- /dev/null
+++ b/.history/pages/service_20220830150722.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    setTimeout(await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$refs['services-loader'].status = false
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }), 500)
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150742.vue b/.history/pages/service_20220830150742.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f0b82b7711dd7eb5247716a6186ce11e39c9531
--- /dev/null
+++ b/.history/pages/service_20220830150742.vue
@@ -0,0 +1,49 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    setTimeout(await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$refs['services-loader'].status = false
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }), 500)
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  position: relative;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150803.vue b/.history/pages/service_20220830150803.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bb1263cc27d5c25a485624722aa695cebe29491
--- /dev/null
+++ b/.history/pages/service_20220830150803.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    setTimeout(await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$refs['services-loader'].status = false
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      }), 500)
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830150848.vue b/.history/pages/service_20220830150848.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51357c12496917752e7f04333d19361c643f86e1
--- /dev/null
+++ b/.history/pages/service_20220830150848.vue
@@ -0,0 +1,54 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830151011.vue b/.history/pages/service_20220830151011.vue
new file mode 100644
index 0000000000000000000000000000000000000000..862c39cbe25a607d81cbf61dae184782a759aef5
--- /dev/null
+++ b/.history/pages/service_20220830151011.vue
@@ -0,0 +1,57 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+  .inner
+
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830151029.vue b/.history/pages/service_20220830151029.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1344cf7d3360abe78025865f591d3f4323b6281a
--- /dev/null
+++ b/.history/pages/service_20220830151029.vue
@@ -0,0 +1,58 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices
+  .inner
+
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830151444.vue b/.history/pages/service_20220830151444.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ace0b1b3da50d20705c353214dfa3d6436a7f7d
--- /dev/null
+++ b/.history/pages/service_20220830151444.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+  .inner
+
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830151458.vue b/.history/pages/service_20220830151458.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1ba3a76372bc244bfb8b944c8ba07ff5425e658
--- /dev/null
+++ b/.history/pages/service_20220830151458.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+  .inner
+
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830151727.vue b/.history/pages/service_20220830151727.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4c6a968e96d063921ec96e2459f2cc49170bc82
--- /dev/null
+++ b/.history/pages/service_20220830151727.vue
@@ -0,0 +1,61 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: ''
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830160801.vue b/.history/pages/service_20220830160801.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f00dd507b71f5fc0585d04b39773965554b864a
--- /dev/null
+++ b/.history/pages/service_20220830160801.vue
@@ -0,0 +1,62 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+
+  pre {{services}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830160836.vue b/.history/pages/service_20220830160836.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36b4f667c5c461b93edf02f01270cc75859a8d20
--- /dev/null
+++ b/.history/pages/service_20220830160836.vue
@@ -0,0 +1,61 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{services[0]}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830160842.vue b/.history/pages/service_20220830160842.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5baa03c80801b04f8713bc8f3c5a25e06e8a6cc9
--- /dev/null
+++ b/.history/pages/service_20220830160842.vue
@@ -0,0 +1,61 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{services[1]}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830160930.vue b/.history/pages/service_20220830160930.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36b4f667c5c461b93edf02f01270cc75859a8d20
--- /dev/null
+++ b/.history/pages/service_20220830160930.vue
@@ -0,0 +1,61 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{services[0]}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161203.vue b/.history/pages/service_20220830161203.vue
new file mode 100644
index 0000000000000000000000000000000000000000..29e90520661b73bb0ff782ac402a3d12357420a4
--- /dev/null
+++ b/.history/pages/service_20220830161203.vue
@@ -0,0 +1,62 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{services[0]}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      rus: '',
+      en: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161257.vue b/.history/pages/service_20220830161257.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b025e798280d2ec299297e1bdfa234c871fc4730
--- /dev/null
+++ b/.history/pages/service_20220830161257.vue
@@ -0,0 +1,63 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{services[1]}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      en: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.rus = this.services
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161333.vue b/.history/pages/service_20220830161333.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a23db63042dabe26590d292ab07ccc9d13bac604
--- /dev/null
+++ b/.history/pages/service_20220830161333.vue
@@ -0,0 +1,64 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{services[1]}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161340.vue b/.history/pages/service_20220830161340.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b4e16555e736d6f918984fa440788235bdf9687
--- /dev/null
+++ b/.history/pages/service_20220830161340.vue
@@ -0,0 +1,64 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161349.vue b/.history/pages/service_20220830161349.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb3ec583979c5e902fac164ed5cd690bb25f1469
--- /dev/null
+++ b/.history/pages/service_20220830161349.vue
@@ -0,0 +1,64 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{SuperCoach}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161405.vue b/.history/pages/service_20220830161405.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa29869ea4bf20260a2beba83c4014dcaf496ea7
--- /dev/null
+++ b/.history/pages/service_20220830161405.vue
@@ -0,0 +1,64 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{SuperCoach}}  {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161415.vue b/.history/pages/service_20220830161415.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5dab2464e420d2b19a832682b26ccad27b0bb71
--- /dev/null
+++ b/.history/pages/service_20220830161415.vue
@@ -0,0 +1,64 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+}
+
+</style>
diff --git a/.history/pages/service_20220830161504.vue b/.history/pages/service_20220830161504.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a31702ecafc5aab27f1421ae33c3c4723189351f
--- /dev/null
+++ b/.history/pages/service_20220830161504.vue
@@ -0,0 +1,70 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+  pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161518.vue b/.history/pages/service_20220830161518.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8a4095514a31896f49ac88244fe70ced5e807f18
--- /dev/null
+++ b/.history/pages/service_20220830161518.vue
@@ -0,0 +1,70 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161530.vue b/.history/pages/service_20220830161530.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0fee4a6d6bbeaf3aa3fc1a71f31dd33a40ee206
--- /dev/null
+++ b/.history/pages/service_20220830161530.vue
@@ -0,0 +1,70 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161713.vue b/.history/pages/service_20220830161713.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a57ab2d52fc85a93bceb236a72ffae9cf5ba846
--- /dev/null
+++ b/.history/pages/service_20220830161713.vue
@@ -0,0 +1,74 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .thead
+    .tbody
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161743.vue b/.history/pages/service_20220830161743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..16eae5b13d45f4917f59927955f0ac1599fd3ee0
--- /dev/null
+++ b/.history/pages/service_20220830161743.vue
@@ -0,0 +1,77 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+    .tItem
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem [
+      display: flex;
+    ]
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161803.vue b/.history/pages/service_20220830161803.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84f2e651889f890b7b70f7aaba07564b0968561c
--- /dev/null
+++ b/.history/pages/service_20220830161803.vue
@@ -0,0 +1,77 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+    .tItem
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161824.vue b/.history/pages/service_20220830161824.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb1ebeaffb45afbe76fdfd3ac78a4e5807874c5a
--- /dev/null
+++ b/.history/pages/service_20220830161824.vue
@@ -0,0 +1,78 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+    .tItem
+    .tItem
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161901.vue b/.history/pages/service_20220830161901.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef8a2128ab7412826eab144c9e14cdb11da5411b
--- /dev/null
+++ b/.history/pages/service_20220830161901.vue
@@ -0,0 +1,83 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+    .tItem
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830161943.vue b/.history/pages/service_20220830161943.vue
new file mode 100644
index 0000000000000000000000000000000000000000..995db885ae6c5de84d406434cd3378bdb91b4f1e
--- /dev/null
+++ b/.history/pages/service_20220830161943.vue
@@ -0,0 +1,93 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+      .tBody
+      .tBody
+      .tBody
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162055.vue b/.history/pages/service_20220830162055.vue
new file mode 100644
index 0000000000000000000000000000000000000000..587360244a7bc9f73eb13d445a54be067a475d26
--- /dev/null
+++ b/.history/pages/service_20220830162055.vue
@@ -0,0 +1,95 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+      .tBody
+      .tBody
+      .tBody
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162110.vue b/.history/pages/service_20220830162110.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6334cf3cbd40588b2a94f2e68d649dd4cd09adcb
--- /dev/null
+++ b/.history/pages/service_20220830162110.vue
@@ -0,0 +1,97 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162142.vue b/.history/pages/service_20220830162142.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2306a9f1af3a73e3c19adf4f6e2829dcda6315c7
--- /dev/null
+++ b/.history/pages/service_20220830162142.vue
@@ -0,0 +1,97 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+      .tBody
+      .tBody
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162257.vue b/.history/pages/service_20220830162257.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43d3f538f03a10915e440660d5705a169b78b1b8
--- /dev/null
+++ b/.history/pages/service_20220830162257.vue
@@ -0,0 +1,101 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+      .tBody
+      .tBody
+    pre {{SuperCoach}} after {{SuperAthlete}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162347.vue b/.history/pages/service_20220830162347.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ab915fde630bc37c2afcf45cba3fc5a7125f282
--- /dev/null
+++ b/.history/pages/service_20220830162347.vue
@@ -0,0 +1,102 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+      .tBody
+      .tBody
+    pre {{CoachRus}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162358.vue b/.history/pages/service_20220830162358.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b225a4bdc335d1514d876ecedfab409b063be2a
--- /dev/null
+++ b/.history/pages/service_20220830162358.vue
@@ -0,0 +1,102 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+      .tBody
+      .tBody
+    pre {{CoachRus}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162459.vue b/.history/pages/service_20220830162459.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10b50ba9380642ed239da31ddf36efab1e677197
--- /dev/null
+++ b/.history/pages/service_20220830162459.vue
@@ -0,0 +1,105 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+      .tBody
+      .tBody
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+      .tBody
+      .tBody
+    pre {{CoachRus}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162643.vue b/.history/pages/service_20220830162643.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab8c6cda8cb7abbd1ae757f13a2c13e45b75b0f2
--- /dev/null
+++ b/.history/pages/service_20220830162643.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.}}
+        .tCol {{}}
+      .tBody
+        .tCol {{CoachEn.}}
+        .tCol {{}}
+      .tBody
+        .tCol {{CoachEn.}}
+        .tCol {{}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{}}
+        .tCol {{}}
+      .tBody
+        .tCol {{}}
+        .tCol {{}}
+      .tBody
+        .tCol
+        .tCol
+
+      pre {{CoachEn}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162701.vue b/.history/pages/service_20220830162701.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5b85dd1edd4054b4fd9811fefe4d7c2e5e49876
--- /dev/null
+++ b/.history/pages/service_20220830162701.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{}}
+        .tCol {{}}
+      .tBody
+        .tCol {{}}
+        .tCol {{}}
+      .tBody
+        .tCol
+        .tCol
+
+      pre {{CoachEn}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162754.vue b/.history/pages/service_20220830162754.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3938bdc35446bb5189a2f077432439aaea06ee9b
--- /dev/null
+++ b/.history/pages/service_20220830162754.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{CoachEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{CoachEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{CoachEn.year}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{CoachEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{CoachEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{CoachEn.year}}
+
+      pre {{CoachEn}}
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162802.vue b/.history/pages/service_20220830162802.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ef93039d29742c554f65ffcfa706d20325f8446
--- /dev/null
+++ b/.history/pages/service_20220830162802.vue
@@ -0,0 +1,117 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{CoachEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{CoachEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{CoachEn.year}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{CoachEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{CoachEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{CoachEn.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162838.vue b/.history/pages/service_20220830162838.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c2f52f183347ff27ec24f81663cc43aff64eae7
--- /dev/null
+++ b/.history/pages/service_20220830162838.vue
@@ -0,0 +1,117 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162857.vue b/.history/pages/service_20220830162857.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da43abd534ed17c9673931cba2a1741c043e8744
--- /dev/null
+++ b/.history/pages/service_20220830162857.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830162937.vue b/.history/pages/service_20220830162937.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c74eaf6ad4fa6fae2dce50560d67d065750e8c42
--- /dev/null
+++ b/.history/pages/service_20220830162937.vue
@@ -0,0 +1,119 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163007.vue b/.history/pages/service_20220830163007.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32f5c8ed4bb9f7d9e7b9d3e3e35d226e45d10170
--- /dev/null
+++ b/.history/pages/service_20220830163007.vue
@@ -0,0 +1,121 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163034.vue b/.history/pages/service_20220830163034.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fa4f72da2ea1c962b105c771ff2c3382e2fcc50
--- /dev/null
+++ b/.history/pages/service_20220830163034.vue
@@ -0,0 +1,125 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100%;
+        max-width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163115.vue b/.history/pages/service_20220830163115.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a87ea510fdc2a7db07fe45d134e7006b43a6cd4
--- /dev/null
+++ b/.history/pages/service_20220830163115.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163137.vue b/.history/pages/service_20220830163137.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ca9f7b5d9cd293f3fcfde6edd2712ce11b2d654
--- /dev/null
+++ b/.history/pages/service_20220830163137.vue
@@ -0,0 +1,127 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead Countries
+      .tHead Subscription name
+      .tHead Weekly rate
+      .tHead Monthly rate
+      .tHead Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tHead {
+        width: 100px;
+      }
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163217.vue b/.history/pages/service_20220830163217.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3379b567128ad44661fa8ad9d7b6d494a1e1d680
--- /dev/null
+++ b/.history/pages/service_20220830163217.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163228.vue b/.history/pages/service_20220830163228.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3379b567128ad44661fa8ad9d7b6d494a1e1d680
--- /dev/null
+++ b/.history/pages/service_20220830163228.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}
+        .tCol {{AthleteRus.week}}
+      .tBody
+        .tCol {{CoachRus.month}}
+        .tCol {{AthleteRus.month}}
+      .tBody
+        .tCol {{CoachRus.year}}
+        .tCol {{AthleteRus.year}}
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163336.vue b/.history/pages/service_20220830163336.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df0d1bbea259536b66359b0f5e8b0c0d09bd5592
--- /dev/null
+++ b/.history/pages/service_20220830163336.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}
+        .tCol {{AthleteEn.week}}
+      .tBody
+        .tCol {{CoachEn.month}}
+        .tCol {{AthleteEn.month}}
+      .tBody
+        .tCol {{CoachEn.year}}
+        .tCol {{AthleteEn.year}}
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}} &#x20bd;
+        .tCol {{AthleteRus.week}} &#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}} &#x20bd;
+        .tCol {{AthleteRus.month}} &#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}} &#x20bd;
+        .tCol {{AthleteRus.year}} &#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163413.vue b/.history/pages/service_20220830163413.vue
new file mode 100644
index 0000000000000000000000000000000000000000..418dbea5311e027ee48feb5849b4f87793b676d6
--- /dev/null
+++ b/.history/pages/service_20220830163413.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}&#x24;
+        .tCol {{SuperAthlete.name}}&#x24;
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163430.vue b/.history/pages/service_20220830163430.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5b56cb445b018898cba72e2804ffb496c8e3d40
--- /dev/null
+++ b/.history/pages/service_20220830163430.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 100px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163454.vue b/.history/pages/service_20220830163454.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f9981fdb3f13b83164dfbc795cdea7b3241036d
--- /dev/null
+++ b/.history/pages/service_20220830163454.vue
@@ -0,0 +1,124 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 180px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163534.vue b/.history/pages/service_20220830163534.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07e86459a7c489df3416b284f0f1f3711b47bfff
--- /dev/null
+++ b/.history/pages/service_20220830163534.vue
@@ -0,0 +1,125 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 180px;
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163542.vue b/.history/pages/service_20220830163542.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71f12e3faca5cc950716e0b51baa19861af0fb41
--- /dev/null
+++ b/.history/pages/service_20220830163542.vue
@@ -0,0 +1,125 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163724.vue b/.history/pages/service_20220830163724.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33a01156f19d58a08ee363e345568a3d714b9424
--- /dev/null
+++ b/.history/pages/service_20220830163724.vue
@@ -0,0 +1,125 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 140px;
+        padding: 20px 20px 0;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163745.vue b/.history/pages/service_20220830163745.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71f12e3faca5cc950716e0b51baa19861af0fb41
--- /dev/null
+++ b/.history/pages/service_20220830163745.vue
@@ -0,0 +1,125 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163830.vue b/.history/pages/service_20220830163830.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa6784ad8457c0e07123ff68dc9148c1edb22448
--- /dev/null
+++ b/.history/pages/service_20220830163830.vue
@@ -0,0 +1,128 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830163920.vue b/.history/pages/service_20220830163920.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b31c04d821fc5bee5c2ca6ee74ed83cd85dcf5c5
--- /dev/null
+++ b/.history/pages/service_20220830163920.vue
@@ -0,0 +1,132 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164003.vue b/.history/pages/service_20220830164003.vue
new file mode 100644
index 0000000000000000000000000000000000000000..58a3fb7c7fcb3901c65a023a212cc8f1d9f0237c
--- /dev/null
+++ b/.history/pages/service_20220830164003.vue
@@ -0,0 +1,133 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164022.vue b/.history/pages/service_20220830164022.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ac06a00cdbf864626b60a827b5044e663851ab73
--- /dev/null
+++ b/.history/pages/service_20220830164022.vue
@@ -0,0 +1,133 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164031.vue b/.history/pages/service_20220830164031.vue
new file mode 100644
index 0000000000000000000000000000000000000000..62aaf75b314b32949336a2dde064563bcfdca648
--- /dev/null
+++ b/.history/pages/service_20220830164031.vue
@@ -0,0 +1,133 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    // overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+        // border-bottom: 1px solid #C5DFDE ;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164041.vue b/.history/pages/service_20220830164041.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ff6f212d7f2bab681b2f81e320ac715fe327c26
--- /dev/null
+++ b/.history/pages/service_20220830164041.vue
@@ -0,0 +1,133 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+        // border-bottom: 1px solid #C5DFDE ;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164058.vue b/.history/pages/service_20220830164058.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61da776c9ec27514e94a8e60796c66801c1de3d7
--- /dev/null
+++ b/.history/pages/service_20220830164058.vue
@@ -0,0 +1,134 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+        // border-bottom: 1px solid #C5DFDE ;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164134.vue b/.history/pages/service_20220830164134.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3b910ccdf438d1ee4b20e2ea9673833b068b3a8
--- /dev/null
+++ b/.history/pages/service_20220830164134.vue
@@ -0,0 +1,134 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+        // border-bottom: 1px solid #C5DFDE ;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164203.vue b/.history/pages/service_20220830164203.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af5fff676a5aa23d7c7dd55bccf7667e845f6448
--- /dev/null
+++ b/.history/pages/service_20220830164203.vue
@@ -0,0 +1,134 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+        border-right: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164258.vue b/.history/pages/service_20220830164258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d49dbd1e44b2e604018c3fd3a922aad356f33f04
--- /dev/null
+++ b/.history/pages/service_20220830164258.vue
@@ -0,0 +1,137 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164303.vue b/.history/pages/service_20220830164303.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f67e43b9ddfcde80d928a82602ac3cd617b5548
--- /dev/null
+++ b/.history/pages/service_20220830164303.vue
@@ -0,0 +1,136 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164319.vue b/.history/pages/service_20220830164319.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd1189c3aedc08c9f50bcbcfbbead2e33a08f5bd
--- /dev/null
+++ b/.history/pages/service_20220830164319.vue
@@ -0,0 +1,139 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164400.vue b/.history/pages/service_20220830164400.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0552527cb357e2003d7981d58149cb0eaae79cd3
--- /dev/null
+++ b/.history/pages/service_20220830164400.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:first-of-type {
+
+      }
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164416.vue b/.history/pages/service_20220830164416.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7ee85ea45e578b249fc522c4be4f7e213499a09
--- /dev/null
+++ b/.history/pages/service_20220830164416.vue
@@ -0,0 +1,137 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164501.vue b/.history/pages/service_20220830164501.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e9a2ed2a26d5d7c386d337f084fbb50b941c770
--- /dev/null
+++ b/.history/pages/service_20220830164501.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 100px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164555.vue b/.history/pages/service_20220830164555.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbb1149b2a09e99fc3d07b04fc344e606e67b03c
--- /dev/null
+++ b/.history/pages/service_20220830164555.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 100%;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164639.vue b/.history/pages/service_20220830164639.vue
new file mode 100644
index 0000000000000000000000000000000000000000..04f10ddc62971375979e62b33e50a82351b044fe
--- /dev/null
+++ b/.history/pages/service_20220830164639.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 140px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164700.vue b/.history/pages/service_20220830164700.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b0e544b6fb0b5edea20e57fb3717238a7a0052f
--- /dev/null
+++ b/.history/pages/service_20220830164700.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 160px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164707.vue b/.history/pages/service_20220830164707.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a09327bc4f39e99caf1f962e678dc32d395a856
--- /dev/null
+++ b/.history/pages/service_20220830164707.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 150px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164714.vue b/.history/pages/service_20220830164714.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f8dc3a4bfc81b5d57d4da8b06c277d51fa1e413
--- /dev/null
+++ b/.history/pages/service_20220830164714.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 155px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164719.vue b/.history/pages/service_20220830164719.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e5be9422e53f3909f0c36fcff9d0ebc73d45545
--- /dev/null
+++ b/.history/pages/service_20220830164719.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 156px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164724.vue b/.history/pages/service_20220830164724.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aae679f45e056be6fc211633fc5f98ab499da5c9
--- /dev/null
+++ b/.history/pages/service_20220830164724.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &:nth-child(1) {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164824.vue b/.history/pages/service_20220830164824.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea8dae2c703afd2ed948f0ca1f98d8409c210e18
--- /dev/null
+++ b/.history/pages/service_20220830164824.vue
@@ -0,0 +1,140 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164906.vue b/.history/pages/service_20220830164906.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9a100c6423e3ccadf949505196e5517e42d55e7
--- /dev/null
+++ b/.history/pages/service_20220830164906.vue
@@ -0,0 +1,143 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .button-inner {
+      width: 100%;
+    }
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164916.vue b/.history/pages/service_20220830164916.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c616d70b7d8f58df8767496c1f60fe72c47e9dbf
--- /dev/null
+++ b/.history/pages/service_20220830164916.vue
@@ -0,0 +1,144 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .button-inner {
+      width: 100%;
+      text-align: right;
+    }
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164939.vue b/.history/pages/service_20220830164939.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0eba945fa3e480ccd6f5d926cb365a245542f9d
--- /dev/null
+++ b/.history/pages/service_20220830164939.vue
@@ -0,0 +1,145 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+      width: 100%;
+      text-align: right;
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164947.vue b/.history/pages/service_20220830164947.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc2309330eabf3d04af2c195c0b48333242d0888
--- /dev/null
+++ b/.history/pages/service_20220830164947.vue
@@ -0,0 +1,145 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830164950.vue b/.history/pages/service_20220830164950.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da54baecdc63515ca0aad0ef18c3f0304c88d3c2
--- /dev/null
+++ b/.history/pages/service_20220830164950.vue
@@ -0,0 +1,144 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165012.vue b/.history/pages/service_20220830165012.vue
new file mode 100644
index 0000000000000000000000000000000000000000..056ba4467fe6052b4f27702c7b082cc4c2e8b57d
--- /dev/null
+++ b/.history/pages/service_20220830165012.vue
@@ -0,0 +1,147 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 50px;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165029.vue b/.history/pages/service_20220830165029.vue
new file mode 100644
index 0000000000000000000000000000000000000000..99c5bd5e1a1913329185cc6bf4d7129b9b8fa207
--- /dev/null
+++ b/.history/pages/service_20220830165029.vue
@@ -0,0 +1,147 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165039.vue b/.history/pages/service_20220830165039.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1000cbc3beba73f7f7b9c31e178a238096c94dd3
--- /dev/null
+++ b/.history/pages/service_20220830165039.vue
@@ -0,0 +1,148 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165053.vue b/.history/pages/service_20220830165053.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94223c6130d012781adf731e75dffa9c2d123b67
--- /dev/null
+++ b/.history/pages/service_20220830165053.vue
@@ -0,0 +1,149 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165109.vue b/.history/pages/service_20220830165109.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6c7190e96ac9702e6f0b6d2d94428252e72caff8
--- /dev/null
+++ b/.history/pages/service_20220830165109.vue
@@ -0,0 +1,150 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165129.vue b/.history/pages/service_20220830165129.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1159552c6f69bc5bd07a9b23088fc6c2fd1e124b
--- /dev/null
+++ b/.history/pages/service_20220830165129.vue
@@ -0,0 +1,151 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Edit
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165258.vue b/.history/pages/service_20220830165258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9cee13c1a57c653f733fd3b895e3d68bc0579d7d
--- /dev/null
+++ b/.history/pages/service_20220830165258.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      p Edit
+      i(
+        class="fa fa-pencil"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165404.vue b/.history/pages/service_20220830165404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3563d19617b67ea5bbf30dcf9654f4af1c54682
--- /dev/null
+++ b/.history/pages/service_20220830165404.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pencil"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165413.vue b/.history/pages/service_20220830165413.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d03a80db585b86ed2aa843a11ed9ecb7d8b02e6c
--- /dev/null
+++ b/.history/pages/service_20220830165413.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pencil"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165552.vue b/.history/pages/service_20220830165552.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2978718bd6f6a294b9f124a01942d1d493e67754
--- /dev/null
+++ b/.history/pages/service_20220830165552.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pen-pen-line"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165558.vue b/.history/pages/service_20220830165558.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5bbfdf9bec2da333190fa31789385fc56226143f
--- /dev/null
+++ b/.history/pages/service_20220830165558.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pen-line"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165913.vue b/.history/pages/service_20220830165913.vue
new file mode 100644
index 0000000000000000000000000000000000000000..887b2ada7cfdeb71e721093f70ed56d5089e3868
--- /dev/null
+++ b/.history/pages/service_20220830165913.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pencil-square" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165933.vue b/.history/pages/service_20220830165933.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4172c92149e37d9540e6ca9ed3011d30b3c7ef4c
--- /dev/null
+++ b/.history/pages/service_20220830165933.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830165958.vue b/.history/pages/service_20220830165958.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0cfa8fd9b4384bfb75832a3bc9c68f0e5b82a58
--- /dev/null
+++ b/.history/pages/service_20220830165958.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pen editIcon" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170044.vue b/.history/pages/service_20220830170044.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4172c92149e37d9540e6ca9ed3011d30b3c7ef4c
--- /dev/null
+++ b/.history/pages/service_20220830170044.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170102.vue b/.history/pages/service_20220830170102.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7d76271bf99c7e3a3c012f7d86d41f7217f91b00
--- /dev/null
+++ b/.history/pages/service_20220830170102.vue
@@ -0,0 +1,158 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      | Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      i {
+        margin-left: 5px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170154.vue b/.history/pages/service_20220830170154.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24480ecb3e0b52fbc19cdd3aa00710f0ef216f29
--- /dev/null
+++ b/.history/pages/service_20220830170154.vue
@@ -0,0 +1,158 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      div {
+        display: inline-block;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170210.vue b/.history/pages/service_20220830170210.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dee113344c84d3ed0610a203c6ee082b234f68ab
--- /dev/null
+++ b/.history/pages/service_20220830170210.vue
@@ -0,0 +1,159 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      div {
+        display: inline-block;
+        margin-right: 5px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170219.vue b/.history/pages/service_20220830170219.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1382f8e2ad42da615a2896de3108144c5b995ace
--- /dev/null
+++ b/.history/pages/service_20220830170219.vue
@@ -0,0 +1,159 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170237.vue b/.history/pages/service_20220830170237.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4db4345b528042bd340d0c418d271b66eb2bc26d
--- /dev/null
+++ b/.history/pages/service_20220830170237.vue
@@ -0,0 +1,160 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170243.vue b/.history/pages/service_20220830170243.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b59e5d63f85097c797a90c89fd332af6865e56a1
--- /dev/null
+++ b/.history/pages/service_20220830170243.vue
@@ -0,0 +1,161 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170250.vue b/.history/pages/service_20220830170250.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9e8dfc3ebabda3fefcc656852832a3a3f3230cd
--- /dev/null
+++ b/.history/pages/service_20220830170250.vue
@@ -0,0 +1,162 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170258.vue b/.history/pages/service_20220830170258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84147539a045ce9f78afcd35c450fd85437c7672
--- /dev/null
+++ b/.history/pages/service_20220830170258.vue
@@ -0,0 +1,164 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170356.vue b/.history/pages/service_20220830170356.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7909db0e1827f697ef964dcb6f8ac7bdf22b85e
--- /dev/null
+++ b/.history/pages/service_20220830170356.vue
@@ -0,0 +1,167 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830170428.vue b/.history/pages/service_20220830170428.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fed93a464be94cb3f4a38ed54d522f52e733573d
--- /dev/null
+++ b/.history/pages/service_20220830170428.vue
@@ -0,0 +1,167 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+      div(
+        slot='modal-title'
+      ) Edit Paid Services
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week}}&#x24;
+        .tCol {{AthleteEn.week}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month}}&#x24;
+        .tCol {{AthleteEn.month}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year}}&#x24;
+        .tCol {{AthleteEn.year}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week}}&#x20bd;
+        .tCol {{AthleteRus.week}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month}}&#x20bd;
+        .tCol {{AthleteRus.month}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year}}&#x20bd;
+        .tCol {{AthleteRus.year}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830172912.vue b/.history/pages/service_20220830172912.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6c94311fb750d490fa4265971926046e7298666
--- /dev/null
+++ b/.history/pages/service_20220830172912.vue
@@ -0,0 +1,167 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+      div(
+        slot='modal-title'
+      ) Edit Paid Services
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week?CoachEn.week:0}}&#x24;
+        .tCol {{AthleteEn.week?AthleteEn.week:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month?CoachEn.month:0}}&#x24;
+        .tCol {{AthleteEn.month?AthleteEn.month:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year?CoachEn.year:0}}&#x24;
+        .tCol {{AthleteEn.year?AthleteEn.year:0}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week?CoachRus.week:0}}&#x20bd;
+        .tCol {{AthleteRus.week?AthleteRus.week:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month?CoachRus.month:0}}&#x20bd;
+        .tCol {{AthleteRus.month?AthleteRus.month:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year?CoachRus.year.year:0}}&#x20bd;
+        .tCol {{AthleteRus.year?AthleteRus.year:0}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830172935.vue b/.history/pages/service_20220830172935.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd0f3a505b7fce1e3f9189d33f7feb289360ec1c
--- /dev/null
+++ b/.history/pages/service_20220830172935.vue
@@ -0,0 +1,166 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+      div(
+        slot='modal-title'
+      ) Edit Paid Services
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week?CoachEn.week:0}}&#x24;
+        .tCol {{AthleteEn.week?AthleteEn.week:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month?CoachEn.month:0}}&#x24;
+        .tCol {{AthleteEn.month?AthleteEn.month:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year?CoachEn.year:0}}&#x24;
+        .tCol {{AthleteEn.year?AthleteEn.year:0}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week?CoachRus.week:0}}&#x20bd;
+        .tCol {{AthleteRus.week?AthleteRus.week:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month?CoachRus.month:0}}&#x20bd;
+        .tCol {{AthleteRus.month?AthleteRus.month:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year?CoachRus.year.year:0}}&#x20bd;
+        .tCol {{AthleteRus.year?AthleteRus.year:0}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/service_20220830173802.vue b/.history/pages/service_20220830173802.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3331eadf584d845271f21dccf45e404efabcaf70
--- /dev/null
+++ b/.history/pages/service_20220830173802.vue
@@ -0,0 +1,166 @@
+<template lang="pug">
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+      div(
+        slot='modal-title'
+      ) Edit Paid Services
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week?CoachEn.week:0}}&#x24;
+        .tCol {{AthleteEn.week?AthleteEn.week:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month?CoachEn.month:0}}&#x24;
+        .tCol {{AthleteEn.month?AthleteEn.month:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year?CoachEn.year:0}}&#x24;
+        .tCol {{AthleteEn.year?AthleteEn.year:0}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week?CoachRus.week:0}}&#x20bd;
+        .tCol {{AthleteRus.week?AthleteRus.week:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month?CoachRus.month:0}}&#x20bd;
+        .tCol {{AthleteRus.month?AthleteRus.month:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year?CoachRus.year:0}}&#x20bd;
+        .tCol {{AthleteRus.year?AthleteRus.year:0}}&#x20bd;
+
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
+  },
+  head() {
+    return {
+      title: 'Services',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/.history/pages/users_20220830125901.vue b/.history/pages/users_20220830125901.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e034746945b473b9bec9ffdc2294e5c0fce635b2
--- /dev/null
+++ b/.history/pages/users_20220830125901.vue
@@ -0,0 +1,414 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Изменить участника
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130005.vue b/.history/pages/users_20220830130005.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d18738e0c332156b5f7bff8d4a5acca33fc2b52
--- /dev/null
+++ b/.history/pages/users_20220830130005.vue
@@ -0,0 +1,414 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130215.vue b/.history/pages/users_20220830130215.vue
new file mode 100644
index 0000000000000000000000000000000000000000..456b498c1731c3f04271ff41e283667c83cf88a3
--- /dev/null
+++ b/.history/pages/users_20220830130215.vue
@@ -0,0 +1,419 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130229.vue b/.history/pages/users_20220830130229.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f5130bdf7419cc80220b15e7177bbc876e2aa17
--- /dev/null
+++ b/.history/pages/users_20220830130229.vue
@@ -0,0 +1,419 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 160px;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130245.vue b/.history/pages/users_20220830130245.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f03fed76dc656091d8c76ec736376e15380c329b
--- /dev/null
+++ b/.history/pages/users_20220830130245.vue
@@ -0,0 +1,420 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 160px;
+  padding: 10px 20px;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130319.vue b/.history/pages/users_20220830130319.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ed440ef75f9a463e237b0458d4f289dd9491458
--- /dev/null
+++ b/.history/pages/users_20220830130319.vue
@@ -0,0 +1,422 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 160px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130338.vue b/.history/pages/users_20220830130338.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fadf854a8b26fbbc06a9044cbabda86489b5ad40
--- /dev/null
+++ b/.history/pages/users_20220830130338.vue
@@ -0,0 +1,422 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130353.vue b/.history/pages/users_20220830130353.vue
new file mode 100644
index 0000000000000000000000000000000000000000..18acd6755a1733783fbc35f5d86ed4d4cbee5c65
--- /dev/null
+++ b/.history/pages/users_20220830130353.vue
@@ -0,0 +1,423 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 10px;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130402.vue b/.history/pages/users_20220830130402.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dfe9226c1de14525b8a0d324676f8882bb587905
--- /dev/null
+++ b/.history/pages/users_20220830130402.vue
@@ -0,0 +1,423 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130505.vue b/.history/pages/users_20220830130505.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da0a7785c45d193344d4a660f46956e60ab48bfc
--- /dev/null
+++ b/.history/pages/users_20220830130505.vue
@@ -0,0 +1,428 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  &:hover {
+
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130529.vue b/.history/pages/users_20220830130529.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19474fdf416b0d494a2b76a74431218d75aa4b6d
--- /dev/null
+++ b/.history/pages/users_20220830130529.vue
@@ -0,0 +1,428 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130551.vue b/.history/pages/users_20220830130551.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02b53a87713fcbb718cff674bd8f3b981551ce4e
--- /dev/null
+++ b/.history/pages/users_20220830130551.vue
@@ -0,0 +1,429 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: default;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130606.vue b/.history/pages/users_20220830130606.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1ce7bbadde30d36d914de2de1e47ba821c76886
--- /dev/null
+++ b/.history/pages/users_20220830130606.vue
@@ -0,0 +1,429 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130914.vue b/.history/pages/users_20220830130914.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb12f0f8fa590c9a007675eeba62406a8a1de06d
--- /dev/null
+++ b/.history/pages/users_20220830130914.vue
@@ -0,0 +1,429 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      )  {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830130930.vue b/.history/pages/users_20220830130930.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f10f40bd5c52639948039c67d5878308e853016
--- /dev/null
+++ b/.history/pages/users_20220830130930.vue
@@ -0,0 +1,429 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      )  {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830131025.vue b/.history/pages/users_20220830131025.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b17917845fcc434ab0706ef9f811774cf02c5798
--- /dev/null
+++ b/.history/pages/users_20220830131025.vue
@@ -0,0 +1,429 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    .is-button-change(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830141418.vue b/.history/pages/users_20220830141418.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ac0ef86776991e1ff88f1b096419630fc3989ae
--- /dev/null
+++ b/.history/pages/users_20220830141418.vue
@@ -0,0 +1,429 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    //- is-modal-edit-user(ref='modal')
+    //-   div(
+    //-     slot='modal-title'
+    //-   ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830142529.vue b/.history/pages/users_20220830142529.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95337b35ceb7f71098992492fd3a06b0d8c625ec
--- /dev/null
+++ b/.history/pages/users_20220830142529.vue
@@ -0,0 +1,430 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    //- is-modal-edit-user(ref='modal')
+    //-   div(
+    //-     slot='modal-title'
+    //-   ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(v-for='(user, index) in usersList' :key='index')
+          .forClick
+            td {{ user.id }}
+            td {{ user.phone }}
+            td {{ user.email }}
+            td {{ user.country }}
+            td {{ user.city }}
+            td {{ user.createdAt }}
+            td {{ user.activity_type }}
+            td {{ user.account_type ? user.account_type.name : 'Basic' }}
+            td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830142555.vue b/.history/pages/users_20220830142555.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c8b5c41fe64b0b007a09832004377b4958f382d
--- /dev/null
+++ b/.history/pages/users_20220830142555.vue
@@ -0,0 +1,432 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    //- is-modal-edit-user(ref='modal')
+    //-   div(
+    //-     slot='modal-title'
+    //-   ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830142631.vue b/.history/pages/users_20220830142631.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd996173d27582322d7e155ce3d9a01fc361cdfb
--- /dev/null
+++ b/.history/pages/users_20220830142631.vue
@@ -0,0 +1,433 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    //- is-modal-edit-user(ref='modal')
+    //-   div(
+    //-     slot='modal-title'
+    //-   ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+          @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830142651.vue b/.history/pages/users_20220830142651.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e10655e569f1dc99ad1af3b11580b8c1799acf80
--- /dev/null
+++ b/.history/pages/users_20220830142651.vue
@@ -0,0 +1,433 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+          @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830142753.vue b/.history/pages/users_20220830142753.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ebe428160b1d2dd79c9b33918318eefa7bd807c9
--- /dev/null
+++ b/.history/pages/users_20220830142753.vue
@@ -0,0 +1,434 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td(
+            @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+          ) {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830142844.vue b/.history/pages/users_20220830142844.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8f0289234c8525c734be5e32a175fbfca4a2edf
--- /dev/null
+++ b/.history/pages/users_20220830142844.vue
@@ -0,0 +1,432 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143005.vue b/.history/pages/users_20220830143005.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f083a516407695d87049d9ee67bae1364a81a324
--- /dev/null
+++ b/.history/pages/users_20220830143005.vue
@@ -0,0 +1,433 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+          div {{let i=1, i++}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143017.vue b/.history/pages/users_20220830143017.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd238feb382982e1e420a6b3a7a09e5622a2908b
--- /dev/null
+++ b/.history/pages/users_20220830143017.vue
@@ -0,0 +1,433 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+          div {{const i=1, i++}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143049.vue b/.history/pages/users_20220830143049.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa6070f2ad2c8b7191daca9e592449bb2138c893
--- /dev/null
+++ b/.history/pages/users_20220830143049.vue
@@ -0,0 +1,433 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+          div {{user.id + 1}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143133.vue b/.history/pages/users_20220830143133.vue
new file mode 100644
index 0000000000000000000000000000000000000000..243787e9f53c16deef2daa7f2c3fa435c7765f13
--- /dev/null
+++ b/.history/pages/users_20220830143133.vue
@@ -0,0 +1,436 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+          div {{user.id + 1}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+        tr {
+          position: relative;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143140.vue b/.history/pages/users_20220830143140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7342ccb0a663c4c04f7e0a465783fbac5e1e1a9a
--- /dev/null
+++ b/.history/pages/users_20220830143140.vue
@@ -0,0 +1,437 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+          div {{user.id + 1}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+        tr {
+          position: relative;
+          z-index: 0;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143156.vue b/.history/pages/users_20220830143156.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa6070f2ad2c8b7191daca9e592449bb2138c893
--- /dev/null
+++ b/.history/pages/users_20220830143156.vue
@@ -0,0 +1,433 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+          div {{user.id + 1}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830143214.vue b/.history/pages/users_20220830143214.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8f0289234c8525c734be5e32a175fbfca4a2edf
--- /dev/null
+++ b/.history/pages/users_20220830143214.vue
@@ -0,0 +1,432 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td time
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830144017.vue b/.history/pages/users_20220830144017.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e58cf22b61bfbd94bfc7f4a65ccac2235bf6d33
--- /dev/null
+++ b/.history/pages/users_20220830144017.vue
@@ -0,0 +1,432 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+    //- .is-button-change(
+    //-   @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    //- ) Change member
+    is-modal-edit-user(ref='modal')
+      div(
+        slot='modal-title'
+      ) {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Admin' }}, select a member to edit!
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td {{ user.activity_time ? user.activity_time : 'No data'}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830180855.vue b/.history/pages/users_20220830180855.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c832324d7fd0c9ef64215d38dcc3019bf8f4449e
--- /dev/null
+++ b/.history/pages/users_20220830180855.vue
@@ -0,0 +1,425 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flex
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td {{ user.activity_time ? user.activity_time : 'No data'}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830180929.vue b/.history/pages/users_20220830180929.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db9688b76e64e7e9da9ced4b1f63eb299725b01c
--- /dev/null
+++ b/.history/pages/users_20220830180929.vue
@@ -0,0 +1,425 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flexer
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td {{ user.activity_time ? user.activity_time : 'No data'}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flex {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/pages/users_20220830180946.vue b/.history/pages/users_20220830180946.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0be12d703497a07067218377b9a9f833ce0349fb
--- /dev/null
+++ b/.history/pages/users_20220830180946.vue
@@ -0,0 +1,425 @@
+<template lang="pug">
+.users
+  is-loader(ref="users-loader")
+  .flexer
+    is-input(
+      is-label="Search"
+      is-name="search"
+      is-type="text"
+      is-placeholder="Search"
+      :is-required="true"
+      @input='parseSearch'
+    )
+    v-select.threeItem(
+      :options="[{label:'Athlete', code: 'Athlete'},{label:'Coach', code: 'Coach'},{label:'All', code: ''},]"
+      :value="selectedAccountType.label"
+       @input="setSelectedAccountType"
+       placeholder='Account Type'
+    )
+    v-select.threeItem(
+      :options="[{label:'Super Coach', code: 'Super%20Coach'},{label:'Super Athlete', code: 'Super%20Athlete'},{label:'All', code: ''},]"
+      :value="selectedAccountStatus.label"
+       @input="setSelectedAccountStatus"
+       placeholder='Account status'
+    )
+    v-select.twoItem(
+      :options="[{label:'ASC', code: 'ASC'},{label:'DESC', code: 'DESC'},]"
+      :value="selectedFromAtoZ.label"
+       @input="setSelectedFromAtoZ"
+       placeholder='From A to Z'
+    )
+  .inner
+    table
+      thead
+        tr
+          th(v-for='(title, id) in tableTitle' :key='id') {{title}}
+      tbody
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
+          td {{ user.id }}
+          td {{ user.phone }}
+          td {{ user.email }}
+          td {{ user.country }}
+          td {{ user.city }}
+          td {{ user.createdAt }}
+          td {{ user.activity_type }}
+          td {{ user.account_type ? user.account_type.name : 'Basic' }}
+          td {{ user.activity_time ? user.activity_time : 'No data'}}
+
+  .posa
+    .flex
+      is-button.prev(
+        title="Предыдущая страница"
+        :is-function='PageMM'
+        v-if='page > 1'
+      )
+        span
+          fai(icon="chevron-left")
+      .isPagination
+        button(
+          v-for="(pager, index) in numOfPage"
+          :key="index"
+          @click.prevent='paginateBtn(index)'
+        ) {{pager}}
+      is-button.next(
+        title="Следующая страница"
+        :is-function='PagePP'
+        v-if='page < last_page'
+      )
+        span
+          fai(icon="chevron-right")
+
+</template>
+
+<script>
+
+export default {
+  name: 'UsersPage',
+  layout: 'default',
+  transition: 'page',
+  data () {
+    return {
+      reloading: false,
+      usersList: {},
+      tableTitle: [
+        'ID',
+        'Phone Number',
+        'E-mail',
+        'Country',
+        'City',
+        'Registration date',
+        'Account type',
+        'Account status',
+        'Activity (hours)'
+      ],
+      numOfPage: null,
+      page: 1,
+      per_page: 14,
+      total: null,
+      last_page: null,
+      search: '',
+      range: {},
+      selectedAccountType: '',
+      selectedAccountStatus: '',
+      selectedFromAtoZ: 'ASC'
+    }
+  },
+  head() {
+    return {
+      title: 'Users',
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | ChallengeDrive Mobile App Control Panel` : 'ChallengeDrive Mobile App Control Panel';
+      }
+    }
+  },
+
+  async mounted() {
+    this.$refs['users-loader'].status = true
+    await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+      .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    async reloadData() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&search=${this.search}&account_type=${this.selectedAccountType}&account_status=${this.selectedAccountStatus}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.total = res.data.total
+          this.numOfPage = Math.ceil(this.total / this.per_page)
+          this.last_page = res.data.last_page
+          this.$ctoast.replace('Reloaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    setSelectedAccountType(value) {
+      this.selectedAccountType = value.code
+      this.reloadData()
+    },
+    setSelectedAccountStatus(value) {
+      this.selectedAccountStatus = value.code
+      this.reloadData()
+    },
+    setSelectedFromAtoZ(value) {
+      this.selectedFromAtoZ = value.code
+      this.reloadData()
+    },
+    parseSearch(value) {
+      this.search = value
+      this.reloadData()
+    },
+    async Pagination() {
+      this.$refs['users-loader'].status = true
+      setTimeout(await this.$nuxt.$axios.get(`/api/admin/users?page=${this.page}&per_page=${this.per_page}&sort_by_name=${this.selectedFromAtoZ}`)
+        .then(res => {
+          this.usersList = res.data.data
+          this.$ctoast.replace('Loaded', {
+            title: 'Reloaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['users-loader'].status = false
+          }, 500)
+        })
+        .catch(error => {
+          this.$ctoast.replace('Error', {
+            title: `[Error]: ${error}`,
+            type: 'error'
+          })
+        }), 500)
+    },
+    PagePP() {
+      this.page++
+      this.Pagination()
+    },
+    PageMM() {
+      this.page--
+      this.Pagination()
+    },
+    paginateBtn(index) {
+      this.page = index + 1
+      this.Pagination()
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.users {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .flexer {
+    display: flex;
+    margin-bottom: 10px;
+  }
+    .posa {
+      position: absolute;
+      bottom: 10px;
+      left: 30px;
+      right: 30px;
+      height: 40px;
+      .flex {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .isPagination {
+          width: 100%;
+          text-align: center;
+          align-items: center;
+          button {
+            color: #FFFFFF;
+            border: 2px solid #0FD7CB;
+            background: #0FD7CB;
+            padding: 10px 23px;
+            border-radius: 10px;
+            font-family: Roboto, sans-serif;
+            font-size: 1rem;
+            line-height: 16px;
+            text-align: center;
+            font-weight: 700;
+            margin-left: 5px;
+            margin-right: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            user-select: none;
+            &:hover {
+              color: #4E4E4E;
+              background-color: #FFFFFF;
+            }
+          }
+        }
+
+        .is-button {
+          margin-left: 2px;
+          margin-right: 2px;
+        }
+
+        .prev {
+          position: absolute !important;
+          left: 30px !important;
+          bottom: 0px !important;
+        }
+
+        .next {
+          position: absolute !important;
+          right: 30px !important;
+          bottom: 0px !important;
+        }
+      }
+    }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 510px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      td,
+      th {
+        padding: 6px 18px;
+
+        font-size: 12px;
+        border: #C5DFDE 1px solid;
+      }
+      td {
+        padding: 2px 18px;
+        height: 28.5px;
+      }
+      thead {
+        width: 100%;
+        th:nth-child(1) {
+          width: 23px !important;
+        }
+        th:nth-child(2) {
+          width: 84px !important;
+        }
+        th:nth-child(3) {
+          width: 150px !important;
+        }
+        th:nth-child(4) {
+          width: 60px !important;
+        }
+        th:nth-child(5) {
+          width: 60px !important;
+        }
+        th:nth-child(6) {
+          width: 50px !important;
+        }
+        th:nth-child(7) {
+          width: 50px !important;
+        }
+        th:nth-child(8) {
+          width: 50px !important;
+        }
+        th:nth-child(9) {
+          width: 40px !important;
+        }
+      }
+      tbody {
+        tr:nth-child(even) {
+          background: #F1FFFE;
+        }
+      }
+    }
+  }
+}
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
+</style>
+
+<style lang="scss">
+  .v-select {
+    width: 170px;
+    position: relative;
+    .vs__dropdown-toggle {
+      margin: 0 0 0 5px;
+      .vs__selected-options {
+        .vs__selected {
+          position: absolute;
+          top: 12px;
+          left: 20px;
+        }
+        .vs__search {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e0e0e0;
+          border-radius: 5px;
+          background-color: #fff;
+          box-sizing: border-box;
+          font-size: 12px;
+          line-height: 16px;
+          color: rgba(0, 0, 0, 0.87);
+          resize: none;
+        }
+      }
+      .vs__actions {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        .vs__clear {
+          background-color: #fff;
+          width: 25px;
+          height: 25px;
+          border: 1px solid #e0e0e0;
+          border-radius: 50%;
+          box-sizing: border-box;
+          display: none;
+        }
+      }
+    }
+    .vs__dropdown-menu {
+      position: absolute;
+      left: 5px;
+      top: 45px;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #C5DFDE;
+      border-radius: 5px;
+      width: 144px;
+      height: 100px;
+      padding: 10px;
+      margin: 0;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      li {
+        margin-top: 5px;
+      }
+    }
+  }
+  .twoItem {
+    .vs__dropdown-menu {
+      height: 50px;
+    }
+  }
+  .threeItem {
+    .vs__dropdown-menu {
+      height: 70px;
+    }
+  }
+</style>
diff --git a/.history/plugins/components_20220830151103.js b/.history/plugins/components_20220830151103.js
new file mode 100644
index 0000000000000000000000000000000000000000..7522ebe465d8208d7b4a615139cc366ededce2ff
--- /dev/null
+++ b/.history/plugins/components_20220830151103.js
@@ -0,0 +1,85 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// UI
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('vSelect', vSelect)
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/.history/plugins/components_20220830151133.js b/.history/plugins/components_20220830151133.js
new file mode 100644
index 0000000000000000000000000000000000000000..7522ebe465d8208d7b4a615139cc366ededce2ff
--- /dev/null
+++ b/.history/plugins/components_20220830151133.js
@@ -0,0 +1,85 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// UI
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('vSelect', vSelect)
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/.history/plugins/components_20220830151154.js b/.history/plugins/components_20220830151154.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f818f3fda7df4a6cdcfcec6383b5917293a0ed8
--- /dev/null
+++ b/.history/plugins/components_20220830151154.js
@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// UI
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+import IsModalEditUser from '~/components/global/modals/is-modal-edit-user'
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('vSelect', vSelect);
+Vue.component('IsModalEditUser', IsModalEditUser)
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/.history/plugins/components_20220830151209.js b/.history/plugins/components_20220830151209.js
new file mode 100644
index 0000000000000000000000000000000000000000..7522ebe465d8208d7b4a615139cc366ededce2ff
--- /dev/null
+++ b/.history/plugins/components_20220830151209.js
@@ -0,0 +1,85 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// UI
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('vSelect', vSelect)
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/.history/plugins/components_20220830151625.js b/.history/plugins/components_20220830151625.js
new file mode 100644
index 0000000000000000000000000000000000000000..68c7b844f8833a16c82fde05d5574bf43e86a54b
--- /dev/null
+++ b/.history/plugins/components_20220830151625.js
@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import VCalendar from 'v-calendar'
+
+
+// UI
+import Vuelidate from "vuelidate"
+import vSelect from 'vue-select'
+import IsTooltip from '~/components/global/is-tooltip'
+import IsLoader from '~/components/global/is-loader'
+
+
+// Reusable SFC's
+// Usability
+import IsButton from '~/components/global/is-button'
+import IsLink from '~/components/global/is-link'
+import IsInput from '~/components/global/is-input'
+import IsSelect from '~/components/global/is-select'
+
+// modals
+import IsModal from '~/components/global/modals/is-modal'
+import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
+import IsModalEditService from '~/components/global/modals/is-modal-edit-service'
+
+// Text
+import IsText from '~/components/global/is-text'
+import IsTitle from '~/components/global/is-title'
+
+
+// Navigation
+import IsLogo from '~/components/global/is-logo'
+import IsNavbar from '~/components/global/is-navbar'
+import IsHeader from '~/components/global/is-header'
+import IsSidebar from '~/components/global/is-sidebar'
+
+
+// Table
+import IsRow from '~/components/global/table/is-row'
+import IsTable from '~/components/global/table/is-table'
+import IsTbody from '~/components/global/table/is-tbody'
+import IsTd from '~/components/global/table/is-td'
+import IsTfoot from '~/components/global/table/is-tfoot'
+import IsTh from '~/components/global/table/is-th'
+import IsThead from '~/components/global/table/is-thead'
+
+
+// Pages components
+
+import IsAuthForm from '~/components/pages/is-auth-form'
+
+// SFC declaration
+
+Vue.component('IsButton', IsButton)
+Vue.component('IsInput', IsInput)
+Vue.component('IsModal', IsModal)
+Vue.component('IsText', IsText)
+Vue.component('IsTitle', IsTitle)
+Vue.component('IsAuthForm', IsAuthForm)
+Vue.component('IsLogo', IsLogo)
+Vue.component('IsNavbar', IsNavbar)
+Vue.component('IsHeader', IsHeader)
+Vue.component('IsSidebar', IsSidebar)
+Vue.component('IsTable', IsTable)
+Vue.component('IsRow', IsRow)
+Vue.component('IsTbody', IsTbody)
+Vue.component('IsTd', IsTd)
+Vue.component('IsTfoot', IsTfoot)
+Vue.component('IsTh', IsTh)
+Vue.component('IsThead', IsThead)
+Vue.component('IsLink', IsLink)
+Vue.component('IsModalCalendar', IsModalCalendar)
+Vue.component('IsTooltip', IsTooltip)
+Vue.component('IsLoader', IsLoader)
+Vue.component('IsSelect', IsSelect)
+Vue.component('vSelect', vSelect)
+Vue.component('IsModalEditService', IsModalEditService)
+
+
+
+Vue.use(VCalendar, {
+  componentPrefix: 'vc',
+  screens: {
+    tablet: '576px',
+    laptop: '992px',
+    desktop: '1200px',
+  },
+})
+Vue.use(Vuelidate)
diff --git a/components/global/modals/is-modal-def.vue b/components/global/modals/is-modal-def.vue
index 82f6798256f4825a6b77557ad5bb6d7f6e37be0c..129c8494e4f4291334f83f2744909481f970b548 100644
--- a/components/global/modals/is-modal-def.vue
+++ b/components/global/modals/is-modal-def.vue
@@ -10,13 +10,6 @@ transition(name="modal")
         v-show="status"
         class="is-modal__wrapper"
       )
-        div(style="position: relative;")
-          is-loader(
-            ref="modal-loader"
-          )
-            span(slot="loader")
-              | Please, wait...
-
         div(
           class="is-modal__wrapper-header"
           v-if="status"
@@ -29,23 +22,14 @@ transition(name="modal")
           )
         div(
           class="is-modal__wrapper-content"
-          v-if="status"
         )
-          slot(name="modal-content")
             | SectionContent
         slot(
           name="modal-footer"
-          v-if="status"
         )
           div(class="is-modal__wrapper-footer")
             button(class="is-modal__wrapper-footer__btn")
-              | Кнопка
-        div
-          button(
-            class="toAuth"
-            @click='logout'
-          )
-            | Выйти
+              | Save
 </template>
 
 <script>
@@ -54,41 +38,15 @@ export default {
   data() {
     return {
       status: false,
-      loaderStatus: false,
-      contentLoaded: false,
     }
   },
   props: {
-    closeEvent: {
-      type: Function,
-      default: () => {
-        return () => { }
-      }
-    },
-    hardLoad: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    }
   },
   methods: {
     closeModal() {
       this.status = false
       this.closeEvent()
     },
-    logout() {
-      this.$ctoast.info(`${this.$t('logOut')}...`, { delay: false, name: 'logout' })
-      setTimeout(() => {
-        this.$ctoast.replace('logout', {
-          title: 'Log out',
-          type: 'success'
-        })
-        setTimeout(async () => {
-          await this.$auth.logout()
-        }, 750)
-      }, 1000)
-    },
 
   }
 }
diff --git a/components/global/modals/is-modal-edit-service.vue b/components/global/modals/is-modal-edit-service.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0ad5a816db05210e0c00bff9e916fc9c818fa88
--- /dev/null
+++ b/components/global/modals/is-modal-edit-service.vue
@@ -0,0 +1,667 @@
+<template lang="pug">
+transition(name="modal")
+  div(
+    @click.self="closeModal"
+    class="is-modal"
+    v-show="status"
+  )
+    transition(name="modal-wrapper")
+      div(
+        v-show="status"
+        class="is-modal__wrapper"
+      )
+        div(style="position: relative;")
+          is-loader(
+            ref="modal-loader"
+          )
+            span(slot="loader")
+              | Please, wait...
+
+        div(
+          class="is-modal__wrapper-header"
+          v-if="status"
+        )
+          slot(name="modal-title")
+            | SectionTitle
+          fai(
+            @click="closeModal"
+            icon="times"
+          )
+        div(
+          class="is-modal__wrapper-content"
+          v-if="status"
+        )
+          slot(name="modal-content")
+            .edit.flex
+              .editItem
+                .editTitle Super Coach
+                .editInput
+                  label(
+                    for="Super Coach Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Week"
+                      is-name="Super Coach Week"
+                      is-type="text"
+                      is-placeholder="Super Coach Week"
+                      @input="parseSCWE"
+                      :is-required="true"
+                      :is-value='SCWE'
+                    )
+                  label(
+                    for="Super Coach Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Month"
+                      is-name="Super Coach Month"
+                      is-type="text"
+                      is-placeholder="Super Coach Month"
+                      @input="parseSCME"
+                      :is-required="true"
+                      :is-value='SCME'
+                    )
+                  label(
+                    for="Super Coach Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Coach Year"
+                      is-name="Super Coach Year"
+                      is-type="text"
+                      is-placeholder="Super Coach Year"
+                      @input="parseSCYE"
+                      :is-required="true"
+                      :is-value='SCYE'
+                    )
+
+              .editItem
+                .editTitle Super Athlete
+                .editInput
+                  label(
+                    for="Super Athlete Week"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Week"
+                      is-name="Super Athlete Week"
+                      is-type="text"
+                      is-placeholder="Super Athlete Week"
+                      @input="parseSAWE"
+                      :is-required="true"
+                      :is-value='SAWE'
+                    )
+                  label(
+                    for="Super Athlete Month"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Month"
+                      is-name="Super Athlete Month"
+                      is-type="text"
+                      is-placeholder="Super Athlete Month"
+                      @input="parseSAME"
+                      :is-required="true"
+                      :is-value='SAME'
+                    )
+                  label(
+                    for="Super Athlete Year"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Super Athlete Year"
+                      is-name="Super Athlete Year"
+                      is-type="text"
+                      is-placeholder="Super Athlete Year"
+                      @input="parseSAYE"
+                      :is-required="true"
+                      :is-value='SAYE'
+                    )
+
+                           .editItem
+
+              .editItem
+                .editTitle Супер Тренер
+                .editInput
+                  label(
+                    for="Super Coach Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Неделя"
+                      is-name="Super Coach Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Неделя "
+                      @input="parseSCWR"
+                      :is-required="true"
+                      :is-value='SCWR'
+                    )
+                  label(
+                    for="Super Coach Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Месяц"
+                      is-name="Super Coach Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Месяц"
+                      @input="parseSCMR"
+                      :is-required="true"
+                      :is-value='SCMR'
+                    )
+                  label(
+                    for="Super Coach Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Тренер Год"
+                      is-name="Super Coach Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Тренер Год"
+                      @input="parseSCYR"
+                      :is-required="true"
+                      :is-value='SCYR'
+                    )
+
+              .editItem
+                .editTitle Супер Атлет
+                .editInput
+                  label(
+                    for="Super Athlete Week Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Неделя"
+                      is-name="Super Athlete Week Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Неделя"
+                      @input="parseSAWR"
+                      :is-required="true"
+                      :is-value='SAWR'
+                    )
+                  label(
+                    for="Super Athlete Month Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Месяц"
+                      is-name="Super Athlete Month Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Месяц"
+                      @input="parseSAMR"
+                      :is-required="true"
+                      :is-value='SAMR'
+                    )
+                  label(
+                    for="Super Athlete Year Rus"
+                  )
+                    is-input(
+                      style="margin-top: 2.5rem;"
+                      is-label="Супер Атлет Год"
+                      is-name="Super Athlete Year Rus"
+                      is-type="text"
+                      is-placeholder="Супер Атлет Год"
+                      @input="parseSAYR"
+                      :is-required="true"
+                      :is-value='SAYR'
+                    )
+
+        slot(
+          name="modal-footer"
+          v-if="status"
+        )
+          div(class="is-modal__wrapper-footer")
+            button(
+              class="is-modal__wrapper-footer__btn"
+              @click.prevent='save'
+            )
+              | Save
+</template>
+
+<script>
+export default {
+  name: 'IsModalComponent',
+  data() {
+    return {
+      status: false,
+      SCWE: '',
+      SCME: '',
+      SCYE: '',
+      SAWE: '',
+      SAME: '',
+      SAYE: '',
+      SCWR: '',
+      SCMR: '',
+      SCYR: '',
+      SAWR: '',
+      SAMR: '',
+      SAYR: '',
+      form: [
+
+      ]
+    }
+  },
+  props: {
+  },
+  async mounted() {
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        // coach
+        // this.SuperCoach = this.services[0]
+        this.SCWE = this.services[0].prices.en.week
+        this.SCME = this.services[0].prices.en.month
+        this.SCYE = this.services[0].prices.en.year
+        this.SCWR = this.services[0].prices.ru.week
+        this.SCMR = this.services[0].prices.ru.month
+        this.SCYR = this.services[0].prices.ru.year
+        // athlete
+        this.SAWE = this.services[1].prices.en.week
+        this.SAME = this.services[1].prices.en.month
+        this.SAYE = this.services[1].prices.en.year
+        this.SAWR = this.services[1].prices.ru.week
+        this.SAMR = this.services[1].prices.ru.month
+        this.SAYR = this.services[1].prices.ru.year
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
+  methods: {
+    closeModal() {
+      this.status = false
+    },
+    parseSCWE(data) {
+      this.SCWE = data
+    },
+    parseSCME(data) {
+      this.SCME = data
+    },
+    parseSCYE(data) {
+      this.SCYE = data
+    },
+    parseSAWE(data) {
+      this.SAWE = data
+    },
+    parseSAME(data) {
+      this.SAME = data
+    },
+    parseSAYE(data) {
+      this.SAYE = data
+    },
+    parseSCWR(data) {
+      this.SCWR = data
+    },
+    parseSCMR(data) {
+      this.SCMR = data
+    },
+    parseSCYR(data) {
+      this.SCYR = data
+    },
+    parseSAWR(data) {
+      this.SAWR = data
+    },
+    parseSAMR(data) {
+      this.SAMR = data
+    },
+    parseSAYR(data) {
+      this.SAYR = data
+    },
+    save() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  .editItem {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #C5DFDE ;
+    .editTitle {
+      width: 30%;
+      margin-top: 2.5em;
+    }
+    .editInput {
+      width: 60%;
+    }
+  }
+}
+.is-modal {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .54);
+  z-index: 1100;
+  transition: visibility .3s, background-color .3s;
+  visibility: visible;
+  height: 100vh;
+  cursor: pointer;
+  display: block;
+
+  &.show {
+    transition: visibility .3s, background-color .3s;
+    background-color: rgba(0, 0, 0, .54);
+    visibility: visible;
+
+    .is-modal {
+      &__wrapper {
+        transform: translateX(0);
+        transition: .3s transform ease-out 1s;
+      }
+    }
+  }
+
+  &__wrapper {
+    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .38);
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    top: 8px;
+    overflow: hidden;
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    width: 100%;
+    min-width: 480px;
+    max-width: 600px;
+    background-color: #fafafa;
+    transform: translateX(-50%);
+    transition: transform .3s;
+    cursor: default;
+
+    .is-loader {
+      top: 0 !important;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 56px;
+      border-bottom: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      svg {
+        padding: .5rem;
+        cursor: pointer;
+        color: rgba(0, 0, 0, .38);
+        transition: color .3s;
+
+        &:hover {
+          transition: color .3s;
+          color: rgba(0, 0, 0, .54);
+        }
+      }
+    }
+
+    &-content {
+      position: fixed;
+      top: 56px;
+      right: 0;
+      bottom: 66px;
+      width: 100%;
+      background-color: #fafafa;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: #2c3e50 #f1f1f1;
+      transition: all .3s;
+
+
+      .input-label {
+        margin: 10px 0;
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .2px;
+        color: rgba(0, 0, 0, .38);
+        user-select: none;
+      }
+
+      .pass-edit {
+        position: relative;
+        pointer-events: none;
+        z-index: 998;
+
+        &:before {
+          content: 'Функционал в разработке';
+          position: absolute;
+          pointer-events: auto;
+          background-color: rgba(255, 255, 255, .75);
+          color: #9b9b9b;
+          font-weight: 600;
+          width: 100%;
+          z-index: 999;
+          height: 100%;
+          top: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+        }
+      }
+
+      input,
+      textarea {
+        position: relative;
+        width: 100%;
+        padding: 9px 11px;
+        border: 1px solid #e0e0e0;
+        border-radius: 5px;
+        background-color: #fff;
+        box-sizing: border-box;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(0, 0, 0, .87);
+        transition: border-color .3s;
+        resize: none;
+        -webkit-appearance: none;
+        outline: none;
+
+        &:focus {
+          border-color: rgba(0, 0, 0, 0.87);
+          transition: border-color .3s;
+
+          &:hover {
+            border-color: rgba(0, 0, 0, 0.87);
+            transition: border-color .3s;
+          }
+        }
+
+        &:hover {
+          border-color: #BDBDBD;
+          transition: border-color .3s;
+        }
+      }
+
+      textarea {
+        height: 100px;
+      }
+
+      .password-input-group {
+        position: relative;
+
+        svg {
+          position: absolute;
+          right: .75rem;
+          top: 27.5%;
+          user-select: none;
+          color: rgba(0, 0, 0, .12);
+          cursor: pointer;
+          transition: color .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .34);
+            transition: color .3s;
+          }
+        }
+      }
+
+      .send_to_email {
+        display: flex !important;
+        align-items: center;
+
+        input {
+          cursor: pointer;
+          visibility: hidden;
+          width: 16px;
+          height: 16px;
+        }
+
+        label {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 5px;
+          border: 1px solid #e0e0e0;
+          background-color: #fff;
+          transition: all .3s;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        span {
+          padding-left: 0;
+          color: rgba(0, 0, 0, .38);
+          transition-duration: .25s;
+          font-size: 12px;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      width: 480px;
+      border-top: 1px solid #eee;
+      background-color: #fafafa;
+      box-sizing: border-box;
+      padding: 16px 24px 15px;
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      &__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 23px;
+        border: solid 1px #0FD7CB;
+        ;
+        border-radius: 10px;
+        background-color: #0FD7CB;
+        ;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+        line-height: 34px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        color: #fff;
+        transition: background-color .3s;
+        cursor: pointer;
+
+        &:hover {
+          transition: background-color .3s;
+          background-color: #fff;
+          color: #4E4E4E
+        }
+      }
+    }
+  }
+}
+
+.toAuth {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 23px;
+  border: solid 1px #eb1717;
+  ;
+  border-radius: 10px;
+  background-color: #eb1717;
+  ;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: #fff;
+  transition: background-color .3s;
+  cursor: pointer;
+
+  &:hover {
+    transition: background-color .3s;
+    background-color: #fff;
+    color: #4E4E4E
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .3s;
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-wrapper-enter-active {
+  transition: all .45s ease-in-out;
+}
+
+.modal-wrapper-leave-active {
+  transition: all .25s ease-out;
+}
+
+.modal-wrapper-enter,
+.modal-wrapper-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/pages/service.vue b/pages/service.vue
index faab032f863403d46b4fbe5c2d63429618ad3707..3331eadf584d845271f21dccf45e404efabcaf70 100644
--- a/pages/service.vue
+++ b/pages/service.vue
@@ -1,5 +1,56 @@
 <template lang="pug">
-div service
+.services
+  is-loader(ref="services-loader")
+  .button-inner
+    .editServices(
+      @click='() => { this.$refs.modal.status = !this.$refs.modal.status }'
+    )
+      div Edit
+      i(
+        class="fa fa-pen" aria-hidden="true"
+      )
+    is-modal-edit-service(ref='modal')
+      div(
+        slot='modal-title'
+      ) Edit Paid Services
+  .inner
+    .tItem
+      .tHead.tCol.local Countries
+      .tHead.tCol Subscription name
+      .tHead.tCol Weekly rate
+      .tHead.tCol Monthly rate
+      .tHead.tCol Annual rate
+    .tItem
+      .tBody
+        .tCol.local English
+      .tBody
+        .tCol {{SuperCoach.name}}
+        .tCol {{SuperAthlete.name}}
+      .tBody
+        .tCol {{CoachEn.week?CoachEn.week:0}}&#x24;
+        .tCol {{AthleteEn.week?AthleteEn.week:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.month?CoachEn.month:0}}&#x24;
+        .tCol {{AthleteEn.month?AthleteEn.month:0}}&#x24;
+      .tBody
+        .tCol {{CoachEn.year?CoachEn.year:0}}&#x24;
+        .tCol {{AthleteEn.year?AthleteEn.year:0}}&#x24;
+    .tItem
+      .tBody
+        .tCol.local Русский
+      .tBody
+        .tCol Супер Тренер
+        .tCol Супер Атлет
+      .tBody
+        .tCol {{CoachRus.week?CoachRus.week:0}}&#x20bd;
+        .tCol {{AthleteRus.week?AthleteRus.week:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.month?CoachRus.month:0}}&#x20bd;
+        .tCol {{AthleteRus.month?AthleteRus.month:0}}&#x20bd;
+      .tBody
+        .tCol {{CoachRus.year?CoachRus.year:0}}&#x20bd;
+        .tCol {{AthleteRus.year?AthleteRus.year:0}}&#x20bd;
+
 </template>
 
 <script>
@@ -8,7 +59,15 @@ export default {
   layout: 'default',
   transition: 'page',
   data () {
-    return {}
+    return {
+      services: '',
+      SuperCoach: '',
+      SuperAthlete: '',
+      CoachRus: '',
+      CoachEn: '',
+      AthleteRus: '',
+      AthleteEn: '',
+    }
   },
   head() {
     return {
@@ -18,9 +77,90 @@ export default {
       }
     }
   },
+  async mounted() {
+    this.$refs['services-loader'].status = true
+    await this.$nuxt.$axios.get('/api/admin/account-types')
+      .then(res => {
+        this.services = res.data
+        this.SuperCoach = this.services[0]
+        this.SuperAthlete = this.services[1]
+        this.CoachRus = this.SuperCoach.prices.ru
+        this.CoachEn = this.SuperCoach.prices.en
+        this.AthleteRus = this.SuperAthlete.prices.ru
+        this.AthleteEn = this.SuperAthlete.prices.en
+        this.$ctoast.replace('Loaded', {
+            title: 'Loaded',
+            type: 'success'
+          })
+          setTimeout(() => {
+            this.$refs['services-loader'].status = false
+          }, 500)
+      })
+      .catch(error => {
+        this.$ctoast.replace('Error', {
+          title: `[Error]: ${error}`,
+          type: 'error'
+        })
+      })
+  },
 }
 </script>
 <style lang="scss" scoped>
-
+.services {
+  margin-top: 20px;
+  padding: 20px 30px;
+  background: #FFFFFF;
+  .button-inner {
+    width: 100%;
+    height: 40px;
+    position: relative;
+    .editServices {
+      width: 70px;
+      padding: 10px 15px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #0FD7CB;
+      position: absolute;
+      top: 0;
+      right: 0;
+      div {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .inner {
+    border: 1px solid #C5DFDE;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .tItem {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      &:last-of-type {
+        background: #F1FFFE;
+      }
+      .tCol {
+        width: 157px;
+        padding: 10px 20px;
+        &.local {
+          width: 80px;
+        }
+      }
+      .tBody {
+        border-right: 1px solid #C5DFDE ;
+      }
+      .tHead {
+        border-right: 1px solid #C5DFDE ;
+        padding-top: 30px;
+        border-bottom: 1px solid #C5DFDE ;
+      }
+    }
+  }
+}
 
 </style>
diff --git a/pages/users.vue b/pages/users.vue
index dfccf05093d3d0b0578ce21ad759bb30b620bb6e..0be12d703497a07067218377b9a9f833ce0349fb 100644
--- a/pages/users.vue
+++ b/pages/users.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .users
   is-loader(ref="users-loader")
-  .flex
+  .flexer
     is-input(
       is-label="Search"
       is-name="search"
@@ -28,20 +28,16 @@
        @input="setSelectedFromAtoZ"
        placeholder='From A to Z'
     )
-    is-button(
-      :is-function='() => { this.$refs.modal.status = !this.$refs.modal.status }'
-    ) Изменить участника
-    is-modal-edit-user(ref='modal')
-      div(
-        slot='modal-title'
-      ) Hello, {{ this.$auth.user.firstname ? this.$auth.user.firstname :  'Super' }} {{ this.$auth.user.secondname ? this.$auth.user.secondname : 'Admin' }}!
   .inner
     table
       thead
         tr
           th(v-for='(title, id) in tableTitle' :key='id') {{title}}
       tbody
-        tr.relative(v-for='(user, index) in usersList' :key='index')
+        tr.relative(
+          v-for='(user, index) in usersList'
+          :key='index'
+        )
           td {{ user.id }}
           td {{ user.phone }}
           td {{ user.email }}
@@ -50,7 +46,7 @@
           td {{ user.createdAt }}
           td {{ user.activity_type }}
           td {{ user.account_type ? user.account_type.name : 'Basic' }}
-          td time
+          td {{ user.activity_time ? user.activity_time : 'No data'}}
 
   .posa
     .flex
@@ -222,7 +218,7 @@ export default {
   margin-top: 20px;
   padding: 20px 30px;
   background: #FFFFFF;
-  .flex {
+  .flexer {
     display: flex;
     margin-bottom: 10px;
   }
@@ -339,6 +335,21 @@ export default {
     }
   }
 }
+
+.is-button-change {
+  width: 100%;
+  max-width: 120px;
+  padding: 10px 20px;
+  margin-left: 10px;
+  border: 1px solid #c5dfde;
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s linear;
+  cursor: pointer;
+  &:hover {
+    background: #f1fffe;
+  }
+}
 </style>
 
 <style lang="scss">
diff --git a/plugins/components.js b/plugins/components.js
index 0f818f3fda7df4a6cdcfcec6383b5917293a0ed8..68c7b844f8833a16c82fde05d5574bf43e86a54b 100644
--- a/plugins/components.js
+++ b/plugins/components.js
@@ -19,7 +19,7 @@ import IsSelect from '~/components/global/is-select'
 // modals
 import IsModal from '~/components/global/modals/is-modal'
 import IsModalCalendar from '~/components/global/modals/is-modal-calendar'
-import IsModalEditUser from '~/components/global/modals/is-modal-edit-user'
+import IsModalEditService from '~/components/global/modals/is-modal-edit-service'
 
 // Text
 import IsText from '~/components/global/is-text'
@@ -71,8 +71,8 @@ Vue.component('IsModalCalendar', IsModalCalendar)
 Vue.component('IsTooltip', IsTooltip)
 Vue.component('IsLoader', IsLoader)
 Vue.component('IsSelect', IsSelect)
-Vue.component('vSelect', vSelect);
-Vue.component('IsModalEditUser', IsModalEditUser)
+Vue.component('vSelect', vSelect)
+Vue.component('IsModalEditService', IsModalEditService)