diff --git a/package.json b/package.json
index 9a42306..6732083 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "signale": "^1.4.0",
     "vue": "^2.6.7",
     "vue-carousel": "^0.18.0",
-    "vue-router": "^3.0.2"
+    "vue-router": "^3.0.2",
+    "vuelidate": "^0.7.5"
   }
 }
diff --git a/src/admin/App.vue b/src/admin/App.vue
index e7d9d0c..c011c82 100644
--- a/src/admin/App.vue
+++ b/src/admin/App.vue
@@ -1,3 +1,130 @@
 <template lang="pug">
-  h1 Welcome to the Vue App
-</template>
\ No newline at end of file
+  .root-container
+    header.header-container
+      Header
+    nav.nav-container
+      Navigation
+    main.content-container
+      router-view
+
+</template>
+<script>
+import Header from "./components/Header"
+import Navigation from "./components/Navigation"
+import About from "./components/About/About"
+import Works from "./components/Works/Works"
+import Reviews from "./components/Reviews/Reviews"
+
+export default {
+  components: {
+    Header,
+    Navigation,
+    About,
+    Works,
+    Reviews
+  }  
+}
+</script>
+<style lang="postcss">
+@import "normalize.css";
+@import "../styles/mixins.pcss";
+@import "../styles/layout/base.pcss";
+@import "../styles/layout/fonts.pcss";
+
+  .divider {
+    margin: 0;
+    background-color: #1f232d;
+    opacity: 0.15;
+  }
+
+  .admin-wrapper {
+    display: flex;
+
+    .maincontent {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+  }
+
+  .container {
+    max-width: 1080px;
+    /* width: 90%; */
+  }
+
+  .root-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    color: $admin-font;
+  }
+
+  .header-container {
+    padding: 17px 0;
+    background-image: linear-gradient(to right, #3e3e59 0%, #454573 100%);
+  }
+
+  .page-title {
+    font-size: 21px;
+    font-weight: 700;
+    margin-bottom: 60px;
+
+    @include tablets {
+      margin-bottom: 50px;
+    }
+
+    @include phonesLg {
+      font-size: 18px;
+      margin-bottom: 40px;
+    }
+  }
+
+  .nav-container {
+    background: $white;
+  }
+
+  .content-container {
+    background: url("../images/bg/bg-admin.jpg") center center /cover no-repeat;
+    flex: 1;
+    padding-top: 60px;
+  }
+
+  .form__btn {
+    color: $white;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 20px 40px;
+    background-image: linear-gradient(to right, #006aed 0%, #3f35cb 100%);
+    border-radius: 30px;
+
+    @include phonesLg {
+      font-size: 14px;
+    }
+
+    &--big {
+      padding: 20px 35px;
+      border-radius: 35px;
+    }
+
+    &--plain {
+      text-transform: initial;
+      background: transparent;
+      color: #383bcf;
+      margin-right: 10px;
+      padding: 20px 30px;
+    }
+  }
+    
+  .card {
+    box-shadow: 4px 3px 20px rgba(0, 0, 0, 0.07);
+    background-color: $white;
+  }
+
+  .blocked {
+    opacity: 0.5;
+    filter: grayscale(100%);
+    pointer-events: none;
+    user-select: none;
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/About/About.vue b/src/admin/components/About/About.vue
new file mode 100644
index 0000000..36f7b02
--- /dev/null
+++ b/src/admin/components/About/About.vue
@@ -0,0 +1,161 @@
+<template lang="pug">
+  .about
+    .about__header
+      .container.about__header-container
+        h1.page-title.about__title Блок «Обо мне»
+        .about__header-btn
+          AddBtn(
+            text="Добавить группу"
+            size="small"
+            type='button'
+            @click="showAddSkillGroup = true")
+    .about__content
+      .container.about__content-container
+        ul.skill-group__list
+          li.skill-group__item(v-if="showAddSkillGroup")
+            SkillGroup(:value="emptySkillGroup")
+          li(
+            v-for="skillGroup in skillGroups"
+            :key="skillGroup.id"
+          ).skill-group__item
+            SkillGroup(
+              :value="skillGroup"
+            )
+</template>
+<script>
+import AddBtn from "../AddBtn"
+import SkillGroup from "./SkillGroup"
+export default {
+  components: {
+    AddBtn,
+    SkillGroup
+  },
+
+  data () {
+    return {
+      skillGroups: [
+        {
+          "id": 1,
+          "title": "Frontend",
+          "skills": [
+            {
+              "id": 1,
+              "title": "HTML5",
+              "percent": 100
+            },
+            {
+              "id": 2,
+              "title": "CSS3",
+              "percent": 50
+            },
+            {
+              "id": 3,
+              "title": "JavaScript",
+              "percent": 25
+            },
+            {
+              "id": 4,
+              "title": "VueJs",
+              "percent": 30
+            }
+          ]
+        },
+        {
+          "id": 2,
+          "title": "Workflow",
+          "skills": [
+            {
+              "id": 1,
+              "title": "GIT",
+              "percent": 45
+            },
+            {
+              "id": 2,
+              "title": "Terminal",
+              "percent": 60
+            },
+            {
+              "id": 3,
+              "title": "Gulp",
+              "percent": 30
+            },
+            {
+              "id": 4,
+              "title": "Webpack",
+              "percent": 75
+            }
+          ]
+        }
+      ],
+      emptySkillGroup: {
+        id: '',
+        title: '',
+        skills: []
+      },
+      showAddSkillGroup: false
+    }
+  }
+  
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .about__header {
+    margin-bottom: 60px;
+
+    @include phonesLg {
+      margin-bottom: 40px;
+    }
+  }
+
+  .about__header-container {
+    display: flex;
+
+    @include phonesLg {
+      flex-direction: column;
+    }
+  }
+
+  .about__title {
+    margin-right: 60px;
+    margin-bottom: 0;
+
+    @include phonesLg {
+      margin-right: 0;
+      margin-bottom: 30px;
+    }
+  }
+
+  .about__header-btn {
+    display: flex;
+  }
+
+  .about__content-container {
+    @include phonesLg {
+      width: 100%;
+    }
+  }
+
+  .skill-group__list {
+    display: flex;
+    margin-left: -30px;
+    flex-wrap: wrap;
+  }
+
+  .skill-group__item {
+    width: calc(100% / 2 - 30px);
+    margin-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+
+    @include phonesLg {
+      width: 100%;
+      margin-bottom: 10px;
+            
+      &:last-child {
+        margin-bottom: 25px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/About/Skill.vue b/src/admin/components/About/Skill.vue
new file mode 100644
index 0000000..ffdc6cb
--- /dev/null
+++ b/src/admin/components/About/Skill.vue
@@ -0,0 +1,216 @@
+<template lang="pug">
+  .skill
+    .skill__data(v-if="!editMode")
+      .skill__title {{skill.title}}
+      .skill__percent
+        .skill__percent-value {{skill.percent}}
+      .skill__btns
+        CardBtn(
+          icon="edit"
+          type="button"
+          @click="switchEdit"
+        ).skill__btn
+        CardBtn(
+          icon="trash"
+          type="button"
+          @click="delSkill"
+        ).skill__btn
+    form(@submit.prevent="saveSkill")(v-else)
+      .skill__data
+        .skill__field 
+          CustomInput(
+            v-model="tmpSkill.title"
+            :errorText="validationMessage('title')"
+            :noSidePaddings="true"
+          )
+        .skill__field 
+          CustomInput(
+            v-model="tmpSkill.percent"
+            :errorText="validationMessage('percent')"
+            :noSidePaddings="true"
+          )
+        .skill__btns.skill__btns--colored
+          CardBtn(
+            type="submit"
+            icon="confirm"
+          ).skill__btn
+          CardBtn(
+            icon="delete" 
+            type="button"
+            @click="switchEdit"
+          ).skill__btn
+</template>
+<script>
+import CardBtn from "../CardBtn"
+import CustomInput from "../CustomInput"
+import { required, minLength, numeric, maxValue } from 'vuelidate/lib/validators'
+
+export default {
+  components: {
+    CardBtn,
+    CustomInput
+  },
+  
+  props: {
+    skill: Object
+  },
+
+  data () {
+    return {
+      editMode: false,
+      tmpSkill: {...this.skill}
+    }
+  },
+
+  validations: {
+    tmpSkill: {
+      title: {
+        required,
+        minLength: minLength(2)
+      },
+      percent: {
+        required,
+        numeric,
+        maxValue: maxValue(100)
+      }
+    }
+  },
+
+  methods: {
+    switchEdit () {
+      if (this.editMode) {
+        this.tmpSkill = {...this.skill}
+      }
+      this.editMode = !this.editMode
+      this.$v.tmpSkill.$reset()
+    },
+
+    validationMessage (field) {
+      if (!this.$v.tmpSkill) return ''
+
+      const obj = this.$v.tmpSkill[field]
+
+      if (!this.$v.tmpSkill.$error) return ''
+
+      if (!obj.required) {
+        return "Поле обязательно" 
+      }
+
+      if (field !== 'percent' && !obj.minLength) {
+        return `Введите не меньше ${obj.$params.minLength.min} символов`
+      }
+
+      if (field === 'percent') {
+
+        if (!obj.numeric) {
+          return `Введите только цифры`
+        }
+        
+        if (!obj.maxValue) {
+          return  `Значение не должно быть больше ${obj.$params.maxValue.max}`
+        }
+      }
+    },
+
+    saveSkill () {
+      this.$v.tmpSkill.$touch()
+      if (!this.$v.tmpSkill.$error) {
+        this.switchEdit()
+        console.log("All is ok: ", this.tmpSkill)
+      }
+    },
+
+    delSkill () {
+
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .skill {
+    width: 100%;
+  }
+
+  .skill__data {
+    display: flex;
+    justify-content: space-between;
+
+    .skill__field {
+      &:nth-child(1) {
+        flex-basis: 56%;
+        margin-right: 10%;
+      }
+      &:nth-child(2) {
+        flex-basis: 60px;
+        margin-right: 30px;
+        display: flex;
+        align-items: center;
+    
+        &:after {
+          content: "%";
+          display: inline-block;
+          opacity: .7;
+        }
+      }
+    }
+
+    &--underline {
+      .skill__title,
+      .skill__percent {
+        border-bottom: 1px solid currentColor;
+      }
+    }
+
+    @include phones {
+      font-size: 14px;
+    }
+  }
+
+  .skill__title {
+    width: 56%;
+    margin-right: 10%;
+  }
+  
+  .skill__percent {
+    display: flex;
+    width: 60px;
+    margin-right: 30px;
+    
+    &:after {
+      content: "%";
+      display: inline-block;
+      opacity: .7;
+    }
+  }
+
+  .skill__percent-value {
+    margin-right: auto;
+  }
+  
+  .skill__btns {
+    width: 20%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    &--colored {
+      .skill__btn {
+        filter: none;
+      }
+    }
+  }
+
+  .skill__btn {
+    filter: grayscale(1) brightness(2.5);
+
+    &:hover {
+      filter: none;
+    }
+
+    &:first-child {
+      margin-right: 25%;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/About/SkillGroup.vue b/src/admin/components/About/SkillGroup.vue
new file mode 100644
index 0000000..eafccff
--- /dev/null
+++ b/src/admin/components/About/SkillGroup.vue
@@ -0,0 +1,339 @@
+<template lang="pug">
+  .skill-group.card
+    .skill-group__header
+      .skill-group__header-value(v-if="!editMode")
+        .skill-group__header-title {{tmpGroup.title}}
+        CardBtn(
+          icon="edit" 
+          type="button"
+          @click="switchEdit"
+        ).btn
+      .skill-group__header-form(v-else)
+        form(@submit.prevent="saveGroup").add__form.add__form--group
+          .add__form-wrap
+            .add__form-field
+              CustomInput(
+                v-model="tmpGroup.title"
+                placeholder="Название новой группы"
+                :errorText="validationMessage('tmpGroup', 'title')"
+              )
+            .add__form-btns.add__form-btns--colored
+              CardBtn(
+                icon="confirm"
+                type="submit"
+              ).btn
+              CardBtn(
+                icon="delete"
+                type="button"
+                @click="switchEdit"
+              ).btn 
+      hr.divider
+    .skill-group__content
+      ul.skill-group__list
+        li(
+          v-for="skill in tmpGroup.skills"
+          :key="skill.id"
+        ).skill-group__item
+          Skill(
+            :skill="skill"
+          )
+    .skill-group__add-item(:class="blockAdding")
+      form.add__form.add__form--skill(@submit.prevent="addSkill")
+        .add__form-wrap
+          .add__form-field 
+            CustomInput(
+              v-model="newSkill.title"
+              placeholder="Новый навык"
+              :errorText="validationMessage('newSkill', 'title')"
+            )
+          .add__form-field 
+            CustomInput(
+              v-model="newSkill.percent"
+              placeholder="100 %"
+              :errorText="validationMessage('newSkill', 'percent')"
+            )
+          AddBtn(type="submit")
+</template>
+<script>
+import Skill from "./Skill"
+import AddBtn from "../AddBtn"
+import CardBtn from "../CardBtn"
+import CustomInput from "../CustomInput"
+import { required, minLength, numeric, maxValue } from 'vuelidate/lib/validators'
+export default {
+  components: {
+    Skill,
+    AddBtn,
+    CardBtn,
+    CustomInput
+  },
+
+  props: {
+    value: Object
+  },
+
+  data () {
+    return {
+      editMode: false,
+      tmpGroup: {...this.value},
+      newSkill: {
+        title: '',
+        percent: ''
+      }
+    }
+  },
+
+  validations () {
+    let rules = {
+      tmpGroup:{
+        title: {
+          required,
+          minLength: minLength(6)
+        }
+      }
+    }
+
+    if (this.tmpGroup.id && !this.editMode) {
+      rules.newSkill = {
+          title: {
+          required,
+          minLength: minLength(2)
+        },
+
+        percent: {
+          required,
+          numeric,
+          maxValue: maxValue(100)
+        }
+      }
+    }
+
+    return rules
+  },
+
+  computed: {
+    blockAdding () {
+      return !this.tmpGroup.id ? 'blocked' : ''
+    }
+  },
+
+  created() {
+    if (!this.tmpGroup.id) {
+      this.editMode=true
+    }
+  },
+
+  methods: {
+    switchEdit () {
+      this.editMode = !this.editMode
+      this.$v.tmpGroup.$reset()
+    },
+    
+    validationMessage (object, field) {
+      if (!this.$v[object]) return ''
+
+      const obj = this.$v[object][field]
+
+      if (!this.$v[object].$error) return ''
+
+      if (!obj.required) {
+        return "Поле обязательно" 
+      }
+
+      if (field !== 'percent' && !obj.minLength) {
+        return `Введите не меньше ${obj.$params.minLength.min} символов`
+      }
+
+      if (field === 'percent') {
+
+        if (!obj.numeric) {
+          return `Введите только цифры`
+        }
+        
+        if (!obj.maxValue) {
+          return  `Значение не должно быть больше ${obj.$params.maxValue.max}`
+        }
+      }
+    },
+
+    saveGroup () {
+      this.$v.tmpGroup.$touch()
+      if (!this.$v.tmpGroup.$error) {
+        this.switchEdit()
+        this.tmpGroup.id =  Math.floor(Math.random() * Math.floor(100))
+        console.log("All is ok: ", this.tmpGroup)
+      }
+    },
+
+    addSkill () {
+      this.$v.newSkill.$touch()
+      if (!this.$v.newSkill.$error) {
+        this.newSkill.id =  Math.floor(Math.random() * Math.floor(100))
+        this.tmpGroup.skills = [...this.tmpGroup.skills, this.newSkill]
+        this.newSkill = {
+          title: '',
+          percent: ''
+        }
+        this.$v.newSkill.$reset()
+        console.log("All is ok: ", this.newSkill)
+      }
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .skill-group {
+    width: 100%;
+    min-height: 390px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    @include phonesLg {
+      padding: 20px 0
+    }
+  }
+
+  .skill-group__header-value {
+    display: flex;
+    align-items: center;
+    margin-bottom: 25px;
+    padding: 10px 10px 0 10px;
+    justify-content: space-between;
+
+    @include phonesLg {
+      padding: 10px 20px 0 20px;
+    }
+  }
+
+  .skill-group__header-form {
+    padding: 0 10px;
+    margin-bottom: 15px;
+
+    @include phonesLg {
+      padding: 0 20px;
+    }
+  }
+
+  .skill-group__header-title {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.2;
+
+    @include phones {
+      font-size: 16px;
+    }
+  }
+
+  .skill-group__content {
+    padding: 30px 10px 10px 10px;
+
+    @include phonesLg {
+      padding: 30px 20px 10px 20px;
+    }
+  }
+
+  .skill-group__list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .skill-group__item {
+    display: flex;
+    padding: 8px 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .skill-group__add-item {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: auto;
+    margin-bottom: 10px;
+    padding-right: 10px;
+
+    @include tablets {
+      padding-left: 10px;
+    }
+
+    @include phonesLg {
+      padding: 0 20px
+    }
+  }
+
+  .add__form {
+    &--group {
+      .add__form-field {
+        flex-basis: 60%;
+
+        @include tablets {
+          flex-basis: 70%;
+        }
+      }
+    }
+
+    &--skill {
+      width: 79%;
+
+      @include tablets {
+        width: 100%;
+      }
+
+      .add__form-wrap {
+        align-items: initial;
+        justify-content: initial;
+
+        @include phonesLg {
+          justify-content: space-between;
+        }
+
+        .add__form-field {
+          &:nth-child(1) {
+            margin-right: 10px;
+            flex-basis: 58%;
+          }
+
+          &:nth-child(2) {
+            flex-basis: 20%;
+            margin-right: 30px;
+            @include tablets {
+              margin-right: 25px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .add__form-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .add__form-btns {
+    display: flex;
+
+    &--colored {
+      .btn {
+        filter: none;
+      }
+    }
+  }
+
+  .btn {
+    filter: grayscale(1) brightness(2.5);
+
+    &:hover {
+      filter: none;
+    }
+
+    &:first-child  {
+      margin-right: 20px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/AddBtn.vue b/src/admin/components/AddBtn.vue
new file mode 100644
index 0000000..0061bf3
--- /dev/null
+++ b/src/admin/components/AddBtn.vue
@@ -0,0 +1,137 @@
+<template lang="pug">
+  button(
+    v-if="size === 'plain'"
+    v-on="$listeners"
+    type="button"
+  ).add-new-btn.add-new-btn--plain
+    .add-new-btn__text {{text.split(' ').join('\n') }}
+  button(
+    v-else
+    v-on="$listeners"
+    :class="smallClass"
+    v-bind="$attrs"
+  ).add-new-btn {{text ? text : ''}}
+</template>
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    smallClass () {
+       return this.size ? 'add-new-btn--small' : "";
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../styles/mixins.pcss";
+
+  .add-new-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: $links-color;
+    font-weight: 600;
+    padding: 0;
+    border: none;
+    font-size: 16px;
+
+    @include tablets {
+      font-size: 14px;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: svg-load('cross.svg', fill=$white, width=15px, height=15px, transform='rotate(45deg)') center center no-repeat, linear-gradient(to right, #006aed, #3f35cb);
+      color: $white;
+      flex-shrink: 0;
+      flex-basis: 40px;
+      font-size: 30px;
+      line-height: 40px;
+    } 
+
+    &--small {
+      &:before {
+        content: "";
+        background: svg-load('cross.svg', fill=$white, width=8px, height=8px, transform='rotate(45deg)') center center no-repeat, linear-gradient(to right, #006aed, #3f35cb);
+        width: 20px;
+        height: 20px;
+        flex-basis: 20px;
+        font-size: 18px;
+        margin-right: 13px;
+        line-height: 1;
+      }
+    }
+
+    &--plain {
+      flex: 1;
+      background-image: linear-gradient(to right, #006aed 0%, #3f35cb 100%);
+
+      @include phonesLg {
+        padding: 30px 0 30px 20px;
+        justify-content: flex-start;
+      }
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  .add-new-btn__text {
+    color: $white;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 25px;
+    white-space: break-spaces;
+
+    
+    @include phonesLg {
+      display: flex;
+      align-items: center;
+      white-space: initial;
+
+    }
+    
+    @include phones {
+      font-size: 16px;
+    }
+    
+    &:before {
+      display: flex;
+      content: '+';
+      font-weight: 300;
+      font-size: 72px;
+      justify-content: center;
+      align-items: center;
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      border: 2px solid currentColor;
+      margin-bottom: 30px;
+
+      @include phonesLg {
+        margin-bottom: 0;
+        width: 50px;
+        height: 50px;
+        font-size: 24px;
+        margin-right: 20px;
+      }
+
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/CardBtn.vue b/src/admin/components/CardBtn.vue
new file mode 100644
index 0000000..7625328
--- /dev/null
+++ b/src/admin/components/CardBtn.vue
@@ -0,0 +1,83 @@
+<template lang="pug">
+  button(
+    :class="[className, noMargin]"
+    v-on="$listeners"
+    v-bind="$attrs"
+  ).btn {{title}}
+</template>
+<script>
+export default {
+  props: {
+    title: String,
+    icon: String
+  },
+
+  computed: {
+    className() {
+      return `btn--${this.icon}`
+    },
+
+    noMargin() {
+      return  this.title ? "" : "btn--empty-after-margin"
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  .btn {
+    color: rgba(#414c63, .7);
+    border: none;
+    background: transparent;
+    font-weight: 600;
+    padding: 0;
+    display: flex;
+    align-items: center;
+
+    &:after {
+      width: 15px;
+      height: 15px;
+      content: "";
+      margin-left: 10px;
+      display: inline-block;
+    }
+
+    &--edit {
+      &:after {
+        background: svg-load('pencil.svg', fill=$links-color, width=100%, height=100%) center center no-repeat;
+      }
+    }
+
+    &--remove {
+      &:after {
+        background: svg-load('remove.svg', fill=#c92e2e, width=100%, height=100%) center center no-repeat;
+      }
+    }
+
+    &--delete {
+      &:after {
+        background: svg-load('cross.svg', fill=#bf2929, width=100%, height=100%) center center no-repeat;
+      }
+    }
+
+    &--confirm {
+      &:after {
+        background: svg-load('tick.svg', fill=#00d70a, width=100%, height=100%) center center no-repeat;
+      }
+    }
+
+    &--trash {
+      &:after {
+        background: svg-load('trash.svg', fill=#bf2929, width=100%, height=100%) center center no-repeat;
+      }
+    }
+
+    &--empty-after-margin {
+      width: 15px;
+      height: 15px;
+
+      &:after {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/CustomInput.vue b/src/admin/components/CustomInput.vue
new file mode 100644
index 0000000..15e1e34
--- /dev/null
+++ b/src/admin/components/CustomInput.vue
@@ -0,0 +1,199 @@
+<template lang="pug">
+  label.input(
+    v-if="fieldType === 'input'" 
+    :class="[{'input_labeled' : !!title, 'no-side-paddings' : noSidePaddings}, iconClass, {'error' : !!errorText}]"
+  )
+    .input__title(v-if="title") {{title}}
+    .input__wrap
+      Icon(
+        v-if="icon"
+        className="input__icon",
+        :iconName="icon")
+      input(
+        v-bind="$attrs"
+        :value="value" 
+        @input="$emit('input', $event.target.value)"
+      ).input__elem.field__elem
+    .input__error-tooltip
+      InputTooltip(
+        :errorText="errorText"
+      )
+
+  label.textarea(
+    v-else-if="fieldType === 'textarea'"
+      :class="{'error' : !!errorText}"
+  )
+    .input__title(v-if="title") {{title}} 
+    textarea.textarea__elem.field__elem(
+      v-bind="$attrs"
+      :value="value"
+      @input="$emit('input', $event.target.value)"
+    )
+    .input__error-tooltip
+      InputTooltip(
+        :errorText="errorText"
+      )
+</template>
+
+<script>
+import Icon from "./Icon"
+import InputTooltip  from "./InputTooltip"
+
+export default {
+  inheritAttrs: false,
+  props: {
+    title: String,
+    noSidePaddings: Boolean,
+    fieldType: {
+      type: String,
+      default: "input"
+    },
+    value: String | Number,
+    icon: {
+      type: String,
+      default: ""
+    },
+    errorText: {
+      type: String,
+      default: ""
+    },
+  },
+
+  components: {
+    Icon,
+    InputTooltip
+  },
+
+  computed: {
+    iconClass() {
+      const iconName = this.icon;
+      return iconName.length ? ` input_iconed input_icon-${iconName}` : "";
+    }
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+  @import url("../../styles/mixins.pcss");
+
+  .input {
+    display: block;
+    position: relative;
+
+    @include phonesLg {
+      font-size: 14px; 
+    }
+
+    &.no-side-paddings {
+      .input__elem {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+
+    &_labeled {
+      .input__elem {
+        padding: 15px 0 18px;
+      }
+    }
+
+    &_iconed {
+      .input__title {
+        margin-left: 45px;
+        margin-bottom: 13px;
+      }
+
+      .input__elem {
+        padding-left: 20px;
+        font-size: 18px;
+        font-weight: 700;
+        padding-top: 17px;
+        padding-bottom: 17px;
+      }
+    }
+  }
+
+  .input__error-tooltip {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 45%;
+    transform: translateX(-50%);
+    z-index: 100;
+  }
+
+  .input__title {
+    color: rgba(65, 76, 99, 0.5);
+    font-weight: 600;
+    opacity: 0.5;
+  }
+
+  .input__elem {
+    width: 100%;
+    padding: 10px 8%;
+    border: none;
+    outline: none;
+    font-weight: 600;
+    color: $admin-font;
+
+    &::placeholder {
+      color: rgba(55, 62, 66, 0.25);
+    }
+  }
+
+  .textarea__elem {
+    height: 115px;
+    padding: 20px;
+    border: 1px solid rgba($text-color, 0.2);
+    resize: none;
+    font-weight: 600;
+    margin-top: 10px;
+    width: 100%;
+    line-height: 30px;
+  }
+  
+  .textarea {
+    position: relative;
+
+    @include phonesLg {
+      font-size: 14px;
+    }
+  }
+
+  .input__icon {
+    width: 30px;
+    height: 30px;
+    fill: currentColor;
+    opacity: .5;
+    flex-shrink: 0;
+  }
+
+  .input__wrap {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid  #1f232d;
+    
+    &:focus-within {
+      outline: rgb(77, 144, 254) auto 0.0625em;
+    }
+  }
+
+  .error {
+    .input__wrap {
+      border-bottom: 2px solid $errors-color;
+    }
+
+    .input__icon {
+      fill: $errors-color;
+      opacity: 1;
+    }
+
+    .textarea__elem {
+      border: 2px solid $errors-color;
+    }
+
+    .input__error-tooltip {
+      display: block;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Header.vue b/src/admin/components/Header.vue
new file mode 100644
index 0000000..cc03bd5
--- /dev/null
+++ b/src/admin/components/Header.vue
@@ -0,0 +1,94 @@
+<template lang="pug">
+  .header
+    .container.header__container
+      .header__info
+        .user
+          .user__avatar
+              img(src="../../images/userfiles/admin.jpg").user__avatar-img
+          .user__name
+            span Максим Стогний
+            a.exit-btn(href="#") Выйти
+      .header__title Панель Администрирования
+      .header__btn
+        a.exit-btn(href="#") Выйти
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="postcss" scooped>
+  @import url("../../styles/mixins.pcss");
+
+  .header {
+    color: $white;
+  }
+
+  .header__container {
+    display: flex;
+    align-items: center;
+  }
+
+  .header__btn {
+    margin-left: auto;
+  }
+
+  .header__title {
+    opacity: .5;
+    font-size: 14px;
+
+    @include phones {
+      display: none;
+    }
+  }
+
+  .user {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+  }
+
+  .user__avatar {
+    height: 45px;
+    width: 45px;
+    border-radius: 50%;
+    display: block;
+    overflow: hidden;
+    flex-shrink: 0;
+    margin-right: 20px;
+  }
+
+  .user__avatar-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .user__name {
+    font-size: 18px;
+    font-weight: 600;
+
+    @include phones {
+      font-size: 16px;
+    }
+
+    .exit-btn {
+      display: none;
+      font-size: 14px;
+      @include phones {
+        display: block;
+      }
+    }
+  }
+
+  .exit-btn {
+    opacity: .7;
+    text-decoration: underline;
+    font-size: 16px;
+    font-weight: 400;
+
+    @include phones {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Icon.vue b/src/admin/components/Icon.vue
new file mode 100644
index 0000000..700e062
--- /dev/null
+++ b/src/admin/components/Icon.vue
@@ -0,0 +1,41 @@
+<template lang="pug">
+  svg(
+    :class="className"
+    :viewBox="viewBox"
+    preserveAspectRatio="none"
+  )
+    use(:xlink:href="src")
+</template>
+<script>
+export default {
+  props: {
+    iconName: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+  },
+
+  data() {
+    return {
+      icon: null,
+    };
+  },
+
+  computed: {
+    src() {
+      return this.icon.url;
+    },
+    viewBox() {
+      return this.icon.viewBox;
+    },
+  },
+
+  created() {
+    this.icon = require(`../../images/icons/${this.iconName}.svg`).default;
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/admin/components/InputTooltip.vue b/src/admin/components/InputTooltip.vue
new file mode 100644
index 0000000..ac870b2
--- /dev/null
+++ b/src/admin/components/InputTooltip.vue
@@ -0,0 +1,41 @@
+<template lang="pug">
+  .input__error-tooltip {{errorText}}
+</template>
+
+<script>
+export default {
+  props: {
+    errorText: {
+      type: String,
+      default: "Ошибка"
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss" scoped>
+.input__error-tooltip {
+  z-index: 100;
+  background: $errors-color-message;
+  color: #fff;
+  padding: 12px 20px;
+  font-size: 14px;
+  white-space: nowrap;
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    border-top: 0;
+    border-bottom-color: $errors-color-message;
+    border-bottom-width: 7px;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>
+
diff --git a/src/admin/components/Login.vue b/src/admin/components/Login.vue
new file mode 100644
index 0000000..8d0fe85
--- /dev/null
+++ b/src/admin/components/Login.vue
@@ -0,0 +1,173 @@
+<template lang="pug">
+  .login
+    .login__content
+      form(
+        @submit.prevent="login"
+      ).login__form
+        .login__form-title Авторизация
+        .login__row
+          CustomInput(
+            title="Логин"
+            icon="user-empty"
+            v-model="user.login"
+            :errorText="validationMessage('login')"
+          )
+        .login__row
+          CustomInput(
+            title="Пароль"
+            icon="key"
+            type="password"
+            v-model="user.password"
+            :errorText="validationMessage('password')"
+          )
+        .login__btn
+          button(
+            type="submit"
+          ).login__send-data Отправить
+</template>
+<script>
+import Icon from "./Icon"
+import CustomInput from "./CustomInput"
+import { required, minLength } from 'vuelidate/lib/validators'
+
+export default {
+  components: {
+    Icon,
+    CustomInput
+  },
+
+  data () {
+    return {
+      user: {
+        login: '',
+        password: ''
+      }
+    }
+  },
+
+  validations: {
+    user:{
+      login: {
+        required,
+        minLength: minLength(4)
+      },
+      password: {
+        required,
+        minLength: minLength(6)
+      }
+    }
+  },
+
+  methods: {
+    login() {
+      this.$v.$touch()
+      if (!this.$v.$error) {
+        try {
+          console.log("All is ok: ", this.user)
+          this.$router.replace("/");
+        } catch (error) {
+          //error handling
+        }
+      }
+    },
+
+    validationMessage (field) {
+      const obj = this.$v.user[field]
+
+      if (!this.$v.$error) return ''
+
+      if (!obj.required) {
+        return "Поле обязательно" 
+      }
+      if (!obj.minLength) {
+        return `Введите не меньше ${obj.$params.minLength.min} символов`
+      }
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../styles/mixins.pcss";
+
+  .login {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url("../../images/bg/bg-admin.jpg") center center /cover no-repeat;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      opacity: 0.5;
+      background: #2d3c4e;
+    }
+  }
+
+  .login__form {
+    width: 563px;
+    padding: 50px 77px 60px;
+    background: $white;
+
+    
+    @include phones {
+      width: 100%;
+      padding-right: 7%;
+      padding-left: 7%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  .login__form-title {
+    font-size: 36px;
+    text-align: center;
+    font-weight: 600;
+    margin-bottom: 30px;
+  }
+
+  .login__content {
+    position: relative;
+
+    @include phones {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .login__row {
+    margin-bottom: 35px;
+  }
+
+  .login__btn {
+    display: flex;
+    width: 100%;
+    padding: 0 8%;
+    justify-content: center;
+
+    @include phones {
+      padding: 0;
+    }
+  }
+
+  .login__send-data {
+    width: 100%;
+    padding: 30px;
+    background-image: linear-gradient(to right, #ad00ed, #5500f2);
+    border-radius: 40px 5px;
+    color: $white;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 18px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Navigation.vue b/src/admin/components/Navigation.vue
new file mode 100644
index 0000000..7735a1c
--- /dev/null
+++ b/src/admin/components/Navigation.vue
@@ -0,0 +1,81 @@
+<template lang="pug">
+  .container
+    ul.nav__list
+      li.nav__item(
+        v-for="(tab, ndx) in tabs"
+      ) 
+        router-link(
+          :to="tab.href"
+          exact-active-class="active"
+        ).nav__link {{tab.title}}
+</template>
+<script>
+export default {
+  data () {
+    return {
+      tabs: [
+        {
+          title: 'Обо мне',
+          href: '/'
+        },
+        {
+          title: 'Работы',
+          href: '/works'
+        },
+        {
+          title: 'Отзывы',
+          href: '/reviews'
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="postcss" scooped>
+  @import url("../../styles/mixins.pcss");
+  
+  .nav__list {
+    display: flex;
+    align-items: center;
+    height: 77px;
+
+    @include phones {
+      justify-content: center;
+    }
+  }
+
+  .nav__item {
+    height: 100%;
+    cursor: pointer;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @include phones {
+      flex: 1;
+    }
+  }
+
+  .nav__link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    height: 100%;
+    border-bottom: 3px solid transparent;
+    padding: 0 30px;
+
+    &:hover,
+    &.active {
+      color: #383bcf;
+      border-color: currentColor;
+      font-weight: 600;
+    }
+
+    @include phones {
+      padding: 0;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Reviews/Review.vue b/src/admin/components/Reviews/Review.vue
new file mode 100644
index 0000000..4374ec3
--- /dev/null
+++ b/src/admin/components/Reviews/Review.vue
@@ -0,0 +1,110 @@
+<template lang="pug">
+  .review.card
+    .review__author
+      .author
+        .author__avatar
+            img(:src="value.photo").author__avatar-img
+        .author__data
+          .author__name {{value.author}}
+          .author__desc {{value.occ}}
+      hr.divider
+    .review__content
+      .review__text
+        p {{value.text}}
+    .review__btns
+      CardBtn(title="Править" icon="edit")
+      CardBtn(title="Удалить" icon="delete")
+</template>
+<script>
+import CardBtn from "../CardBtn"
+export default {
+  props: {
+    value: Object
+  },
+
+  components: {
+    CardBtn
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .review {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    min-height: 380px;
+
+    @include phones {
+      padding: 30px 0;
+    }
+  }
+
+  .author {
+    padding: 10px 10px 0 10px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+
+    @include phones {
+      padding: 0 20px;
+    }
+  }
+
+  .author__avatar {
+    overflow: hidden;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    margin-right: 20px;
+    flex-shrink: 0;
+  }
+
+  .author__name {
+    font-size: 18px;
+    font-weight: 700;
+
+    @include phones {
+      font-size: 16px;
+      margin-bottom: 5px;
+    }
+
+  }
+
+  .author__desc {
+    font-weight: 600;
+    opacity: .5;
+
+    @include phones {
+      font-size: 14px;
+    }
+  }
+
+  .review__content {
+    padding: 30px 10px 20px 10px;
+    font-weight: 600;
+
+    @include phones {
+      padding: 30px 20px 20px 20px;
+    }
+  }
+
+  .review__text {
+    opacity: .7;
+    line-height: 30px;
+  }
+
+  .review__btns {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    margin-top: auto;
+    font-weight: 600;
+    margin-bottom: 10px;
+
+    @include phones {
+      padding: 0 20px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Reviews/ReviewEdit.vue b/src/admin/components/Reviews/ReviewEdit.vue
new file mode 100644
index 0000000..500685b
--- /dev/null
+++ b/src/admin/components/Reviews/ReviewEdit.vue
@@ -0,0 +1,345 @@
+<template lang="pug">
+  .review-edit.card
+    form(@submit.prevent="saveReview")
+      .form__container
+        .form__header {{formTitle}}
+        hr.divider
+        .form__content
+          .form__content-wrap
+            .form__avatar(:class="photoError")
+              label.form__avatar-upload
+                input(
+                  type="file"
+                  @change="appendFileAndRenderPhoto"
+                ).form__avatar-file
+                .form__avatar-wrap
+                  img(
+                    v-if="tmpReview.photo"
+                    :src="tmpReview.photo"
+                  ).form__avatar-img
+                  Icon(
+                    v-else
+                    iconName="user"
+                    className="form__avatar-empty-icon"
+                  )
+                .form__load-text {{`${photo ? 'Изменить' : 'Добавить'} фото`}}
+                .form__error-tooltip
+                  InputTooltip(
+                    :errorText="validationMessage('photo')"
+                  )
+            .form__review
+              .form__row
+                .form__block
+                  CustomInput(
+                    title="Имя автора"
+                    v-model="tmpReview.author"
+                    :errorText="validationMessage('author')"
+                  )
+                .form__block  
+                  CustomInput(
+                    title="Титул автора"
+                    v-model="tmpReview.occ"
+                    :errorText="validationMessage('occ')"
+                  )
+              .form__row    
+                .form__block
+                  CustomInput(
+                    title="Отзыв"
+                    field-type="textarea"
+                    v-model="tmpReview.text"
+                    :errorText="validationMessage('text')"
+                  )
+        .form__btns
+          button(
+            type="button"
+            @click="cancelAndHide"
+          ).form__btn.form__btn--plain Отмена          
+          button(type="submit").form__btn.form__btn--big Загрузить          
+</template>
+<script>
+import Icon from "../Icon"
+import CustomInput from "../CustomInput"
+import InputTooltip  from "../InputTooltip"
+import { required, minLength } from 'vuelidate/lib/validators'
+
+export default {
+  props: {
+    review: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+
+  components: {
+    Icon,
+    CustomInput,
+    InputTooltip
+  },
+
+  data () {
+    return {
+      photo: '',
+      tmpReview: {
+        author: "",
+        occ: "",
+        photo: "",
+        text: ""
+      }
+    }
+  },
+
+  validations: {
+    tmpReview:{
+      author: {
+        required,
+        minLength: minLength(4)
+      },
+      occ: {
+        required,
+        minLength: minLength(6)
+      },
+      photo: {
+        required
+      },
+      text: {
+        required,
+        minLength: minLength(6)
+      }
+    }
+  },
+  
+  computed: {
+    formTitle() {
+      return `${this.review.id ? 'Редактировать' : 'Добавить'} отзыв`
+    },
+
+    btnTitle() {
+      return this.review.id ? 'Сохранить' : 'Загрузить'
+    },
+
+    photoError() {
+      return !this.tmpReview.photo && this.validationMessage('photo') ? 'error' : ''
+    }
+  },
+
+  methods: {
+    appendFileAndRenderPhoto (e) {
+     const test = e.target.files[0];
+      const reader = new FileReader();
+
+      try {
+        reader.readAsDataURL(test);
+        reader.onload = () => {
+          this.tmpReview.photo = reader.result;
+        };
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    cancelAndHide () {
+    },
+
+    saveReview () {
+      this.$v.$touch()
+      if (!this.$v.$error) {
+        console.log("All is ok: ", this.tmpReview)
+      }
+    },
+
+    validationMessage (field) {
+      const obj = this.$v.tmpReview[field]
+
+      if (!this.$v.$error) return ''
+
+      if (!obj.required) {
+        return "Поле обязательно" 
+      }
+      if (field !== 'photo' && !obj.minLength) {
+        return `Введите не меньше ${obj.$params.minLength.min} символов`
+      }
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import url("../../../styles/mixins.pcss");
+
+  .review-edit {
+    width: 100%;
+    margin-bottom: 30px;
+
+    @include phones {
+      margin-bottom: 10px;
+    }
+  }
+
+  .form__container {
+    width: 78%;
+    padding: 30px 0 50px 20px;
+
+    @include tabletsLg {
+      width: 100%;
+      padding: 30px 20px 50px 20px;
+    }
+
+    @include phonesLg {
+      padding: 30px 0 30px 0;
+    }
+  }
+
+  .form__header {
+    margin-bottom: 25px;
+    font-size: 18px;
+    font-weight: 700;
+    padding-left: 10px;
+
+    @include phonesLg {
+      padding-left: 20px;
+    }
+  }
+
+  .form__content {
+    padding: 50px 0 30px 10px;
+    
+    @include tabletsLg {
+      padding: 50px 10px 30px 10px;
+    }
+
+    @include phonesLg {
+      padding: 30px 20px;
+    }
+  }
+
+  .form__content-wrap {
+    display: flex;
+
+    @include tablets {
+      flex-direction: column;
+    }
+  }
+
+  .form__avatar {
+    margin-right: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    @include tablets {
+      margin-right: 0;
+      margin-bottom: 45px;
+    }
+  }
+
+  .form__avatar-upload {
+    cursor: pointer;
+
+    &:hover {
+      .form__load-text {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .form__avatar-file {
+    display: none;
+  }
+
+  .form__avatar-wrap {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background-color: #dee4ed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 30px;
+    overflow: hidden;
+  }
+
+  .form__avatar-img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .form__avatar-empty-icon {
+    height: 113px;
+    width: 113px;
+    fill: $white;
+  }
+
+  .form__load-text {
+    color: #383bcf;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .form__review {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .form__btns {
+    display: flex;
+    justify-content: flex-end;
+
+    @include phonesLg {
+      padding-right: 20px;
+    }
+  }
+
+  .form__row {
+    display: flex;
+    margin-bottom: 40px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    @include tablets {
+      flex-direction: column;
+    }
+  }
+
+  .form__block {
+    flex: 1;
+    margin-right: 30px;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @include tablets {
+      margin-right: 0;
+
+      &:not(:last-child) {
+        margin-bottom: 40px;
+      }
+    }
+  }
+
+  .form__error-tooltip {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+  }
+
+  .error {
+    .form__avatar-wrap {
+      border: 2px solid $errors-color;
+    }
+    
+    .form__error-tooltip {
+      display: block;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Reviews/Reviews.vue b/src/admin/components/Reviews/Reviews.vue
new file mode 100644
index 0000000..dd18a66
--- /dev/null
+++ b/src/admin/components/Reviews/Reviews.vue
@@ -0,0 +1,119 @@
+<template lang="pug">
+  .reviews
+    .reviews__header
+      .container
+        h1.page-title.reviews__title Блок «Отзывы»
+    .reviews__content
+      .container.reviews__container
+        ReviewEdit(v-if="showAddReview")
+
+        ul.reviews__list
+          li.reviews__item
+            AddBtn(
+              text="Добавить отзыв"
+              size="plain"
+              @click="showAddReview = true")
+          li.reviews__item(
+            v-for="review in reviews"
+            :key="review.id"
+          )
+            review(
+            :value="review")
+</template>
+<script>
+import Review from "./Review"
+import AddBtn from "../AddBtn"
+import ReviewEdit from "./ReviewEdit"
+export default {
+  components: {
+    AddBtn,
+    Review,
+    ReviewEdit
+  },
+
+  created() {
+    this.reviews = this.makeArrWithRequireImages(this.reviews)
+  },
+
+  data () {
+    return {
+      reviews: [
+        {
+          id: 1,
+          text: "Этот парень проходил обучение веб-разработке не где-то, а в Loftschool! 4,5 месяца только самых тяжелых испытаний и бессонных ночей!",
+          author: "Ковальчук Дмитрий",
+          occ: "Основатель Loftschool",
+          photo: "user.jpg"
+        },
+        {
+          id: 2,
+          text: "Этот код выдержит любые испытания. Только пожалуйста, не загружайте сайт на слишком старых браузерах",
+          author: "Владимир Сабанцев",
+          occ: "Преподаватель",
+          "photo": "user2.jpg"
+        },
+        {
+          id: 3,
+          text: "Таким образом, постоянный количественный рост и сфера нашей активности напрямую зависит от форм воздействия.",
+          author: "Иванов Иван",
+          occ: "Заказчик сайта",
+          photo: "user.jpg"
+        }
+      ],
+      showAddReview: false
+    }
+  },
+
+   methods: {
+    makeArrWithRequireImages(array) {
+      return array.map((item) => {
+        const requirePic = require(`../../../images/userfiles/${item.photo}`);
+        item.photo = requirePic;
+        return item;
+      });
+    }
+  }
+  
+}
+</script>
+<style lang="postcss" scoped>  
+  @import "../../../styles/mixins.pcss";
+
+  .reviews__container {
+    display: flex;
+    flex-direction: column;
+
+    @include phonesLg {
+      width: 100%;
+    }
+  }
+
+  .reviews__list {
+    display: flex;
+    margin-left: -30px;
+    flex-wrap: wrap;
+  }
+
+  .reviews__item {
+    width: calc(100% / 3 - 30px);
+    margin-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+
+    @include tablets {
+      width: calc(100% / 2 - 30px);
+    }
+
+    @include phonesLg {
+      width: 100%;
+    }
+
+    @include phones {
+      margin-bottom: 10px;
+      
+      &:last-child {
+        margin-bottom: 25px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Works/Work.vue b/src/admin/components/Works/Work.vue
new file mode 100644
index 0000000..e42fa63
--- /dev/null
+++ b/src/admin/components/Works/Work.vue
@@ -0,0 +1,127 @@
+<template lang="pug">
+  .work.card
+    .work__preview
+      .work__image-wrap
+        img(:src="value.image").work__image
+      .work__tags
+        ul.work__tags-list
+          li.work__tag(
+            v-for="tag in tags"
+            :key="tag"
+          )
+            .tag {{tag}}
+    .work__info
+      .work__title {{value.title}}
+      .work__decs
+        p {{value.desc}}
+      a(:href="value.link").work__link http:{{value.link}}
+    .work__btns
+      CardBtn(title="Править" icon="edit")
+      CardBtn(title="Удалить" icon="delete")
+</template>
+<script>
+import CardBtn from "../CardBtn"
+export default {
+  props: {
+    value: Object
+  },
+
+  components: {
+    CardBtn
+  },
+
+  computed: {
+    tags () {
+      if (!this.value) return []
+      return this.value.skills.split(", ");
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .work {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .work__preview {
+    position: relative;
+  }
+
+  .work__image-wrap {
+    height: 190px;
+  }
+
+  .work__image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .work__tags {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
+
+  .work__tags-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .work__tag {
+    font-size: 13px;
+    color: #283340;
+    margin-left: 8px;
+    font-weight: 600;
+    margin-top: 5px;
+  }
+
+  .tag {
+    padding: 8px 18px;
+    border-radius: 25px;
+    background-color: $white;
+  }
+
+  .work__info {
+    padding: 40px 30px 0 30px;
+    margin-bottom: 20px;
+    font-weight: 600;
+
+    @include phonesLg {
+      padding: 30px 20px 0 20px;
+    }
+  }
+
+  .work__title {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 25px;
+  }
+
+  .work__decs {
+    opacity: .7;
+    line-height: 30px;
+    margin-bottom: 30px;
+  }
+
+  .work__link {
+    color: #383bcf;
+  }
+
+  .work__btns {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 30px;
+    margin-top: auto;
+    font-weight: 600;
+    margin-bottom: 40px;
+
+    @include phonesLg {
+      padding: 0 20px;
+      margin-bottom: 30px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Works/WorkEdit.vue b/src/admin/components/Works/WorkEdit.vue
new file mode 100644
index 0000000..6e43897
--- /dev/null
+++ b/src/admin/components/Works/WorkEdit.vue
@@ -0,0 +1,437 @@
+<template lang="pug">
+  .work-edit.card
+    form(@submit.prevent="saveWork")
+      .form__container
+        .form__header {{formTitle}}
+        hr.divider
+        .form__content
+          .form__content-wrap
+            .form__col
+              .form__image(v-if="tmpWork.photo")
+                img(:src="tmpWork.photo").form__image-pic
+                .form__image-btn-wrap
+                  button(
+                    type="button"
+                    @click="showInputFile"
+                  ).form__image-btn Изменить превью
+              .form__load-area(v-else)(:class="photoError")
+                .form__load-text Перетащите либо загрузите изображение
+                .form__load-btn
+                  button(
+                    type="button"
+                    @click="showInputFile"
+                  ).form__btn Загрузить
+                .form__error-tooltip
+                  InputTooltip(
+                    :errorText="validationMessage('photo')"
+                  )  
+              input(
+                type="file"
+                @change="appendFileAndRenderPhoto"
+              )#upload-pic.form__load-file    
+            .form__col
+              .form__block
+                CustomInput(
+                  title="Название"
+                  v-model="tmpWork.title"
+                  :errorText="validationMessage('title')"
+                )
+              .form__block
+                CustomInput(
+                  title="Ссылка"
+                  v-model="tmpWork.link"
+                  :errorText="validationMessage('link')"
+                )
+              .form__block
+                CustomInput(
+                  title="Описание"
+                  field-type="textarea"
+                  v-model="tmpWork.description"
+                  :errorText="validationMessage('description')"
+                )
+              .form__block
+                CustomInput(
+                  title="Добавление тэга"
+                  v-model="tmpWork.techs"
+                  :errorText="validationMessage('techs')"
+                )
+              ul.tags__list
+                li.tags__item(
+                  v-for="(tag, ndx) in tags"
+                  :key="ndx")
+                  .tag
+                    span {{ tag }}
+                    button(
+                      type="button"
+                      @click="delTag(ndx)").tag__remove-btn
+                      Icon(
+                        iconName="cross"
+                        className="tag__remove-icon"
+                      )
+        .form__btns
+          button(
+            type="button"
+            @click="cancelAndHide"
+          ).form__btn.form__btn--plain Отмена          
+          button(type="submit").form__btn.form__btn--big Загрузить          
+</template>
+<script>
+import Icon from "../Icon"
+import CustomInput from "../CustomInput"
+import InputTooltip  from "../InputTooltip"
+import { required, minLength, url } from 'vuelidate/lib/validators'
+export default {
+  props: {
+    work: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+
+  components: {
+    Icon,
+    CustomInput,
+    InputTooltip
+  },
+
+  data() {
+    return {
+      tags: [],
+      tmpWork: {
+        link: "",
+        title: "",
+        techs: "",
+        photo: "",
+        description: ""
+      }
+    }
+  },
+
+  validations: {
+    tmpWork:{
+      title: {
+        required,
+        minLength: minLength(6)
+      },
+      link: {
+        required,
+        url
+      },
+      techs: {
+        required,
+        minLength: minLength(2)
+      },
+      photo: {
+        required
+      },
+      description: {
+        required,
+        minLength: minLength(15)
+      }
+    }
+  },
+
+  computed: {
+    formTitle() {
+      return `${this.work.id ? 'Редактирование' : 'Добавление'} работы`
+    },
+
+    btnTitle() {
+      return this.work.id ? 'Сохранить' : 'Загрузить'
+    },
+
+    photoError() {
+      return !this.tmpWork.photo && this.validationMessage('photo') ? 'error' : ''
+    }
+  },
+  
+  watch: {
+    'tmpWork.techs'() {
+      this.tags = this.tmpWork.techs.split(',');
+    }
+  },
+  
+  created () {
+    if (this.tmpWork.techs.length > 0) {
+      this.tags =  this.tmpWork.techs.split(',');
+    }
+  },
+
+  methods: {
+    showInputFile () {
+      document.querySelector("#upload-pic").click()
+    },
+
+    delTag(index) {
+      this.tags.splice(index, 1);
+      this.tmpWork.techs = this.tags.join(',')
+    },
+
+    appendFileAndRenderPhoto (e) {
+     const test = e.target.files[0];
+      const reader = new FileReader();
+
+      try {
+        reader.readAsDataURL(test);
+        reader.onload = () => {
+          this.tmpWork.photo = reader.result;
+        };
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    saveWork () {
+      this.$v.$touch()
+      if (!this.$v.$error) {
+        console.log("All is ok: ", this.tmpWork)
+      }
+    },
+
+    cancelAndHide () {
+    },
+    
+    validationMessage (field) {
+      const obj = this.$v.tmpWork[field]
+
+      if (!this.$v.$error) return ''
+
+      if (!obj.required) {
+        return "Поле обязательно" 
+      }
+      
+      if (field === 'link' && !obj.url) {
+        return "Введите корректный url" 
+      }
+
+      if (field !== 'photo' && field !== 'link' && !obj.minLength) {
+        return `Введите не меньше ${obj.$params.minLength.min} символов`
+      }
+    }
+  }
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .work-edit {
+    width: 100%;
+    margin-bottom: 30px;
+
+    @include phones {
+      margin-bottom: 10px;
+    }
+  }
+
+  .form__container {
+    padding: 30px 20px 30px 20px;
+
+    @include phonesLg {
+      padding: 30px 0 30px 0;
+    }
+  }
+
+  .form__header {
+    margin-bottom: 25px;
+    font-size: 18px;
+    font-weight: 700;
+    padding-left: 10px;
+
+    @include phonesLg {
+      padding-left: 20px;
+      font-size: 16px;
+    }
+  }
+
+  .form__content {
+    padding: 50px 10px 40px 10px;
+
+    @include tablets {
+      padding-top: 25px;
+    }
+
+    @include tablets {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  .form__content-wrap {
+    display: flex;
+    justify-content: space-between;
+
+    @include tablets {
+      flex-direction: column;
+    }
+  }
+
+  .form__col {
+    width: 50%;
+    margin-right: 30px;
+    display: flex;
+    flex-direction: column;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @include tablets {
+      width: 100%;
+      padding: 0 12%;
+      margin-right: 0;
+
+      &:first-child {
+        padding: 0 15%;
+      }
+    }
+
+    @include phonesLg {
+      padding: 0;
+      &:first-child {
+        padding: 0;
+      }
+    }
+  }
+
+  .form__btns {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 10px;
+  }
+
+  .form__load-area {
+    min-height: 276px;
+    border: 1px dashed #a1a1a1;
+    background-color: #dee4ed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    position: relative;
+
+    @include tablets {
+      margin-bottom: 55px;
+    }
+
+    &.error {
+      border: 2px solid $errors-color;
+    }
+  }
+
+  .form__load-file {
+    display: none;
+  }
+
+  .form__load-text {
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 0 20%;
+    font-weight: 600;
+    opacity: .5;
+    line-height: 2;
+  }
+
+  .form__load-btn {
+    display: flex;
+    justify-content: center;
+  }
+
+  .form__image {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include tablets {
+      margin-bottom: 55px;
+    }
+  }
+
+  .form__image-pic {
+    flex-shrink: 0;
+    margin-bottom: 30px;
+    max-height: 277px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  
+  .form__image-btn-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .form__image-btn {
+    border: none;
+    background: transparent;
+    color: #383bcf;
+    font-weight: 600;
+    padding: 1px 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    @include phonesLg {
+      font-size: 14px;
+    }
+  }
+
+  .form__block {
+    flex: 1;
+    margin-bottom: 30px;
+  }
+
+  .tags__list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tags__item {
+    margin-right: 10px;
+    margin-bottom: 5px;
+  }
+
+  .tag {
+    font-size: 13px;
+    font-weight: 600;
+    padding: 8px 15px 8px 20px;
+    border-radius: 20px;
+    background-color: #f4f4f4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 34px;
+  }
+  .tag__remove-btn {
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin-left: 10px;
+    display: flex;
+  }
+
+  .tag__remove-icon {
+    height: 11px;
+    width: 11px;
+    fill: #414c63;
+  }
+
+  .form__error-tooltip {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+  }
+
+  .error {
+    .form__error-tooltip {
+      display: block;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/components/Works/Works.vue b/src/admin/components/Works/Works.vue
new file mode 100644
index 0000000..ed99193
--- /dev/null
+++ b/src/admin/components/Works/Works.vue
@@ -0,0 +1,122 @@
+<template lang="pug">
+  .works
+    .works__header
+      .container
+        h1.page-title.works__title Блок «Работы»
+    .works__content
+      .container.works__container
+        WorkEdit(v-if="showAddWork")
+        
+        ul.works__list
+          li.works__item
+            AddBtn(
+              text="Добавить работу"
+              size="plain"
+              @click="showAddWork = true")
+          li.works__item(
+            v-for="work in works"
+            :key="work.id"
+          )
+            work(
+            :value="work")
+</template>
+<script>
+import Work from "./Work"
+import AddBtn from "../AddBtn"
+import WorkEdit from "./WorkEdit"
+export default {
+  components: {
+    Work,
+    AddBtn,
+    WorkEdit
+  },
+
+  created() {
+    this.works = this.makeArrWithRequireImages(this.works)
+  },
+
+  data () {
+    return {
+      works: [
+        {
+          "id": 1,
+          "title": "Сайт об экстримальном отдыхе",
+          "skills": "Html, Css, JavaScript",
+          "image": "1.jpg",
+          "link": "//google.com",
+          "desc": "Этот парень проходил обучение веб-разработке не где-то, а в LoftSchool! 2 месяца только самых тяжелых испытаний и бессонных ночей!"
+        },
+        {
+          "id": 2,
+          "title": "Сайт небольшого города",
+          "skills": "Pug, PostCss, VueJS",
+          "image": "2.jpg",
+          "link": "//yandex.ru",
+          "desc": "Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности требует от нас анализа форм воздействия. "
+        },
+        {
+          "id": 3,
+          "title": "Сайт автомобильного журнала",
+          "skills": "Laravel, Saas, React",
+          "image": "3.jpg",
+          "link": "//rambler.ru",
+          "desc": "Дорогие друзья, повышение уровня гражданского сознания играет важную роль в формировании существующих финансовых и административных условий."
+        }
+      ],
+      showAddWork: false
+    }
+  },
+
+   methods: {
+    makeArrWithRequireImages(array) {
+      return array.map((item) => {
+        const requirePic = require(`../../../images/content/works/${item.image}`);
+        item.image = requirePic;
+        return item;
+      });
+    }
+  }
+  
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .works__container {
+    display: flex;
+    flex-direction: column;
+
+    @include phonesLg {
+      width: 100%;
+    }
+  }
+
+  .works__list {
+    display: flex;
+    margin-left: -30px;
+    flex-wrap: wrap;
+  }
+
+  .works__item {
+    width: calc(100% / 3 - 30px);
+    margin-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+
+    @include tablets {
+      width: calc(100% / 2 - 30px);
+    }
+
+    @include phonesLg {
+      width: 100%;
+    }
+
+    @include phones {
+      margin-bottom: 10px;
+      
+      &:last-child {
+        margin-bottom: 25px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/admin/main.js b/src/admin/main.js
index 6e47267..f4abce2 100644
--- a/src/admin/main.js
+++ b/src/admin/main.js
@@ -1,7 +1,15 @@
 import Vue from 'vue';
 import App from './App.vue'
+import VueRouter from 'vue-router'
+import router from './routes'
+import Vuelidate from 'vuelidate'
+
+Vue.use(Vuelidate)
+Vue.use(VueRouter)
+Vue.router = router
 
 new Vue({
   el: "#app-root",
-  render: h => h(App)
+  render: h => h(App),
+  router
 });
\ No newline at end of file
diff --git a/src/admin/routes.js b/src/admin/routes.js
new file mode 100644
index 0000000..69400fb
--- /dev/null
+++ b/src/admin/routes.js
@@ -0,0 +1,51 @@
+import VueRouter from 'vue-router'
+import About from './components/About/About'
+import Reviews from './components/Reviews/Reviews'
+import Works from './components/Works/Works'
+import Login from './components/Login'
+
+const routes = [
+  {
+    path: '/',
+    name: 'about',
+    component: About,
+    meta:
+      {
+        title: "Блок «Обо мне»"
+      }
+  },
+  {
+    path: '/reviews',
+    component: Reviews,
+    meta:
+      {
+        title: "Блок «Работы»"
+      }
+  },
+  {
+    path: '/works',
+    component: Works,
+    meta:
+      {
+        title: "Блок «Отзывы»"
+      }
+  },
+  {
+    path: '/login',
+    component: Login
+  },
+  {
+    path: '*',
+    redirect: 'about'
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+router.afterEach((to, from) => {
+  document.title = to.meta.title || ''
+})
+
+export default router
diff --git a/src/components/about.pug b/src/components/about.pug
index a2dab13..b25eaa4 100644
--- a/src/components/about.pug
+++ b/src/components/about.pug
@@ -5,7 +5,7 @@ section.about(id="about")
         .user
           .user__avatar
             .avatar
-              +image('userfiles/user.jpg', 'avatar__img')
+              +image('userfiles/admin.jpg', 'avatar__img')
           .user__info
             - 
               var info = [
diff --git a/src/components/contacts.pug b/src/components/contacts.pug
index 10a4a73..43bf798 100644
--- a/src/components/contacts.pug
+++ b/src/components/contacts.pug
@@ -2,13 +2,13 @@ section.contacts(id="contacts")
   .container.contacts__container
     h2.section__title.contacts__title Связаться со мной
     .contacts__form
-      form
+      form(novalidate)#contacts__form
         .form__container
           .form__row
             - 
               var fields = [
-                ["Введите ваше имя", "Иванов Иван", "user"],
-                ["Введите ваш email", "example@mail.com", "envelope"]
+                ["Введите ваше имя", "Иванов Иван", "user-empty", "text"],
+                ["Введите ваш email", "example@mail.com", "envelope", "email"]
               ]
             each field in fields
               label.form__block
@@ -16,14 +16,23 @@ section.contacts(id="contacts")
                 .form__block-wrap
                   +icon(field[2],'form__block-icon')
                   .form__block-field
-                    input(placeholder=field[1]).form__block-input
+                    input(type=field[3] placeholder=field[1] required).form__block-input
+                .error-tooltip    
           .form__row.form__row--more-margin
             label.form__block
               .form__block-label Сообщение к письму
               .form__block-wrap.form__block-wrap--align-top
                 +icon('message','form__block-icon')
                 .form__block-field
-                  textarea(placeholder="Требуется ваша помощь в создании сайта. \nИнтересуют сроки и цена вопроса" rows="3").form__block-input.form__block-textarea
+                  textarea(required minlength="15" placeholder="Требуется ваша помощь в создании сайта. \nИнтересуют сроки и цена вопроса" rows="3").form__block-input.form__block-textarea
+              .error-tooltip
           .form__row
             .form__buttons
-              button(type="submit").custom-btn Отправить
\ No newline at end of file
+              button(type="submit" id="contacts__form-submit").custom-btn Отправить
+
+  script(type="template" id="modalTemplate")
+    .modal
+      .modal__container
+        .modal__content
+          .modal__content-text Письмо отправлено
+          button(type=button)#modal__close.custom-btn Закрыть
\ No newline at end of file
diff --git a/src/images/bg/bg-admin.jpg b/src/images/bg/bg-admin.jpg
new file mode 100644
index 0000000..7a833e1
Binary files /dev/null and b/src/images/bg/bg-admin.jpg differ
diff --git a/src/images/icons/key.svg b/src/images/icons/key.svg
new file mode 100644
index 0000000..ccb2678
--- /dev/null
+++ b/src/images/icons/key.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M334.974,0c-95.419,0-173.049,77.63-173.049,173.049c0,21.213,3.769,41.827,11.211,61.403L7.672,399.928
+			c-2.365,2.366-3.694,5.573-3.694,8.917v90.544c0,6.965,5.646,12.611,12.611,12.611h74.616c3.341,0,6.545-1.325,8.91-3.686
+			l25.145-25.107c2.37-2.366,3.701-5.577,3.701-8.925v-30.876h30.837c6.965,0,12.611-5.646,12.611-12.611v-12.36h12.361
+			c6.964,0,12.611-5.646,12.611-12.611v-27.136h27.136c3.344,0,6.551-1.329,8.917-3.694l40.121-40.121
+			c19.579,7.449,40.196,11.223,61.417,11.223c95.419,0,173.049-77.63,173.049-173.049C508.022,77.63,430.393,0,334.974,0z
+			 M334.974,320.874c-20.642,0-40.606-4.169-59.339-12.393c-4.844-2.126-10.299-0.956-13.871,2.525
+			c-0.039,0.037-0.077,0.067-0.115,0.106l-42.354,42.354h-34.523c-6.965,0-12.611,5.646-12.611,12.611v27.136H159.8
+			c-6.964,0-12.611,5.646-12.611,12.611v12.36h-30.838c-6.964,0-12.611,5.646-12.611,12.611v38.257l-17.753,17.725H29.202v-17.821
+			l154.141-154.14c4.433-4.433,4.433-11.619,0-16.051s-11.617-4.434-16.053,0L29.202,436.854V414.07l167.696-167.708
+			c0.038-0.038,0.067-0.073,0.102-0.11c3.482-3.569,4.656-9.024,2.53-13.872c-8.216-18.732-12.38-38.695-12.38-59.33
+			c0-81.512,66.315-147.827,147.827-147.827S482.802,91.537,482.802,173.05C482.8,254.56,416.484,320.874,334.974,320.874z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M387.638,73.144c-26.047,0-47.237,21.19-47.237,47.237s21.19,47.237,47.237,47.237s47.237-21.19,47.237-47.237
+			S413.686,73.144,387.638,73.144z M387.638,142.396c-12.139,0-22.015-9.876-22.015-22.015s9.876-22.015,22.015-22.015
+			s22.015,9.876,22.015,22.015S399.777,142.396,387.638,142.396z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/images/icons/user-empty.svg b/src/images/icons/user-empty.svg
new file mode 100644
index 0000000..2373903
--- /dev/null
+++ b/src/images/icons/user-empty.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 482.9 482.9" style="enable-background:new 0 0 482.9 482.9;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M239.7,260.2c0.5,0,1,0,1.6,0c0.2,0,0.4,0,0.6,0c0.3,0,0.7,0,1,0c29.3-0.5,53-10.8,70.5-30.5
+			c38.5-43.4,32.1-117.8,31.4-124.9c-2.5-53.3-27.7-78.8-48.5-90.7C280.8,5.2,262.7,0.4,242.5,0h-0.7c-0.1,0-0.3,0-0.4,0h-0.6
+			c-11.1,0-32.9,1.8-53.8,13.7c-21,11.9-46.6,37.4-49.1,91.1c-0.7,7.1-7.1,81.5,31.4,124.9C186.7,249.4,210.4,259.7,239.7,260.2z
+			 M164.6,107.3c0-0.3,0.1-0.6,0.1-0.8c3.3-71.7,54.2-79.4,76-79.4h0.4c0.2,0,0.5,0,0.8,0c27,0.6,72.9,11.6,76,79.4
+			c0,0.3,0,0.6,0.1,0.8c0.1,0.7,7.1,68.7-24.7,104.5c-12.6,14.2-29.4,21.2-51.5,21.4c-0.2,0-0.3,0-0.5,0l0,0c-0.2,0-0.3,0-0.5,0
+			c-22-0.2-38.9-7.2-51.4-21.4C157.7,176.2,164.5,107.9,164.6,107.3z"/>
+		<path d="M446.8,383.6c0-0.1,0-0.2,0-0.3c0-0.8-0.1-1.6-0.1-2.5c-0.6-19.8-1.9-66.1-45.3-80.9c-0.3-0.1-0.7-0.2-1-0.3
+			c-45.1-11.5-82.6-37.5-83-37.8c-6.1-4.3-14.5-2.8-18.8,3.3c-4.3,6.1-2.8,14.5,3.3,18.8c1.7,1.2,41.5,28.9,91.3,41.7
+			c23.3,8.3,25.9,33.2,26.6,56c0,0.9,0,1.7,0.1,2.5c0.1,9-0.5,22.9-2.1,30.9c-16.2,9.2-79.7,41-176.3,41
+			c-96.2,0-160.1-31.9-176.4-41.1c-1.6-8-2.3-21.9-2.1-30.9c0-0.8,0.1-1.6,0.1-2.5c0.7-22.8,3.3-47.7,26.6-56
+			c49.8-12.8,89.6-40.6,91.3-41.7c6.1-4.3,7.6-12.7,3.3-18.8c-4.3-6.1-12.7-7.6-18.8-3.3c-0.4,0.3-37.7,26.3-83,37.8
+			c-0.4,0.1-0.7,0.2-1,0.3c-43.4,14.9-44.7,61.2-45.3,80.9c0,0.9,0,1.7-0.1,2.5c0,0.1,0,0.2,0,0.3c-0.1,5.2-0.2,31.9,5.1,45.3
+			c1,2.6,2.8,4.8,5.2,6.3c3,2,74.9,47.8,195.2,47.8s192.2-45.9,195.2-47.8c2.3-1.5,4.2-3.7,5.2-6.3
+			C447,415.5,446.9,388.8,446.8,383.6z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/images/icons/user.svg b/src/images/icons/user.svg
index 2373903..2c40f6f 100644
--- a/src/images/icons/user.svg
+++ b/src/images/icons/user.svg
@@ -1,24 +1,17 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 482.9 482.9" style="enable-background:new 0 0 482.9 482.9;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M239.7,260.2c0.5,0,1,0,1.6,0c0.2,0,0.4,0,0.6,0c0.3,0,0.7,0,1,0c29.3-0.5,53-10.8,70.5-30.5
-			c38.5-43.4,32.1-117.8,31.4-124.9c-2.5-53.3-27.7-78.8-48.5-90.7C280.8,5.2,262.7,0.4,242.5,0h-0.7c-0.1,0-0.3,0-0.4,0h-0.6
-			c-11.1,0-32.9,1.8-53.8,13.7c-21,11.9-46.6,37.4-49.1,91.1c-0.7,7.1-7.1,81.5,31.4,124.9C186.7,249.4,210.4,259.7,239.7,260.2z
-			 M164.6,107.3c0-0.3,0.1-0.6,0.1-0.8c3.3-71.7,54.2-79.4,76-79.4h0.4c0.2,0,0.5,0,0.8,0c27,0.6,72.9,11.6,76,79.4
-			c0,0.3,0,0.6,0.1,0.8c0.1,0.7,7.1,68.7-24.7,104.5c-12.6,14.2-29.4,21.2-51.5,21.4c-0.2,0-0.3,0-0.5,0l0,0c-0.2,0-0.3,0-0.5,0
-			c-22-0.2-38.9-7.2-51.4-21.4C157.7,176.2,164.5,107.9,164.6,107.3z"/>
-		<path d="M446.8,383.6c0-0.1,0-0.2,0-0.3c0-0.8-0.1-1.6-0.1-2.5c-0.6-19.8-1.9-66.1-45.3-80.9c-0.3-0.1-0.7-0.2-1-0.3
-			c-45.1-11.5-82.6-37.5-83-37.8c-6.1-4.3-14.5-2.8-18.8,3.3c-4.3,6.1-2.8,14.5,3.3,18.8c1.7,1.2,41.5,28.9,91.3,41.7
-			c23.3,8.3,25.9,33.2,26.6,56c0,0.9,0,1.7,0.1,2.5c0.1,9-0.5,22.9-2.1,30.9c-16.2,9.2-79.7,41-176.3,41
-			c-96.2,0-160.1-31.9-176.4-41.1c-1.6-8-2.3-21.9-2.1-30.9c0-0.8,0.1-1.6,0.1-2.5c0.7-22.8,3.3-47.7,26.6-56
-			c49.8-12.8,89.6-40.6,91.3-41.7c6.1-4.3,7.6-12.7,3.3-18.8c-4.3-6.1-12.7-7.6-18.8-3.3c-0.4,0.3-37.7,26.3-83,37.8
-			c-0.4,0.1-0.7,0.2-1,0.3c-43.4,14.9-44.7,61.2-45.3,80.9c0,0.9,0,1.7-0.1,2.5c0,0.1,0,0.2,0,0.3c-0.1,5.2-0.2,31.9,5.1,45.3
-			c1,2.6,2.8,4.8,5.2,6.3c3,2,74.9,47.8,195.2,47.8s192.2-45.9,195.2-47.8c2.3-1.5,4.2-3.7,5.2-6.3
-			C447,415.5,446.9,388.8,446.8,383.6z"/>
-	</g>
+	 viewBox="0 0 350 350" style="enable-background:new 0 0 350 350;" xml:space="preserve">
+<g>
+	<path d="M175,171.173c38.914,0,70.463-38.318,70.463-85.586C245.463,38.318,235.105,0,175,0s-70.465,38.318-70.465,85.587
+		C104.535,132.855,136.084,171.173,175,171.173z"/>
+	<path d="M41.909,301.853C41.897,298.971,41.885,301.041,41.909,301.853L41.909,301.853z"/>
+	<path d="M308.085,304.104C308.123,303.315,308.098,298.63,308.085,304.104L308.085,304.104z"/>
+	<path d="M307.935,298.397c-1.305-82.342-12.059-105.805-94.352-120.657c0,0-11.584,14.761-38.584,14.761
+		s-38.586-14.761-38.586-14.761c-81.395,14.69-92.803,37.805-94.303,117.982c-0.123,6.547-0.18,6.891-0.202,6.131
+		c0.005,1.424,0.011,4.058,0.011,8.651c0,0,19.592,39.496,133.08,39.496c113.486,0,133.08-39.496,133.08-39.496
+		c0-2.951,0.002-5.003,0.005-6.399C308.062,304.575,308.018,303.664,307.935,298.397z"/>
 </g>
 <g>
 </g>
diff --git a/src/images/userfiles/admin.jpg b/src/images/userfiles/admin.jpg
new file mode 100644
index 0000000..42f9c66
Binary files /dev/null and b/src/images/userfiles/admin.jpg differ
diff --git a/src/main.js b/src/main.js
index 2da8888..daa4f5a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,4 +7,5 @@ import "./scripts/skills";
 import "./scripts/works";
 import "./scripts/reviews";
 import "./scripts/parallax";
-import "./scripts/nav";
\ No newline at end of file
+import "./scripts/nav";
+import "./scripts/contacts";
\ No newline at end of file
diff --git a/src/scripts/contacts.js b/src/scripts/contacts.js
new file mode 100644
index 0000000..b32021c
--- /dev/null
+++ b/src/scripts/contacts.js
@@ -0,0 +1,112 @@
+const submitBtn = document.querySelector("#contacts__form-submit")
+const form = document.querySelector("#contacts__form")
+let formInValid
+
+( () => {
+  Array.from(form.elements).forEach(elem => {
+    if (elem.type === "submit") return
+    elem.addEventListener("input", () => {
+      if (formInValid) {
+        validateElem(elem)
+      }
+    })
+  })
+})()
+
+function switchScroll () {
+  document.body.classList.toggle('body--scroll-block')
+}
+
+
+function formValidate (form) {
+  formInValid = Array.from(form.elements).some(elem => !elem.checkValidity())
+}
+submitBtn.addEventListener("click", (e) => {
+  e.preventDefault()
+  formValidate(form)
+  if (formInValid) {
+    Array.from(form.elements).forEach(elem => {
+      if (elem.type === "submit") return
+      validateElem(elem)
+    })
+  } else {
+    const template = document.querySelector("#modalTemplate").innerHTML;
+    const modal = createModal(template);
+    modal.open();
+  }
+})
+
+function validateElem(elem) {
+  if (!elem.checkValidity()) {
+    showError(elem)
+  } else {
+    hideError(elem)
+  }
+}
+
+function showError (elem) {
+  let errorText = ''
+  const parent = elem.closest('.form__block')
+  const tooltip = parent.querySelector('.error-tooltip')
+  parent.classList.add('error')
+  if (elem.value.length === 0) {
+    errorText = "Поле не должно быть пустым"
+  } else {
+    switch (elem.type) {
+      case 'email':
+        errorText = "Введите корректный e-mail"
+        break
+      case 'textarea':
+        errorText = "Введите не менее 15 символов"
+        break
+    }
+  }
+
+  tooltip.innerText = errorText
+  tooltip.classList.add("error-tooltip--showed")
+}
+
+function emptyForm (form) {
+  form.reset()
+}
+
+function hideError (elem) {
+  const parent = elem.closest('.form__block')
+  const tooltip = parent.querySelector('.error-tooltip')
+  parent.classList.remove('error')
+  tooltip.innerText = ''
+  tooltip.classList.remove("error-tooltip--showed")
+}
+
+function createModal(template) {
+  const fragment = document.createElement('div');
+
+  fragment.innerHTML = template;
+
+  const modalElement = fragment.querySelector(".modal");
+  const closeElement = fragment.querySelector("#modal__close");
+  
+  modalElement.addEventListener("click", e => {
+    if (e.target === modalElement) {
+      closeElement.click(e);
+
+    }
+  });
+
+  closeElement.addEventListener("click", (e) => {
+    e.preventDefault()
+    document.querySelector('.contacts').removeChild(modalElement);
+    switchScroll()
+    emptyForm(form)
+  });
+
+  return {
+    open() {
+      document.querySelector('.contacts').appendChild(modalElement);
+      switchScroll()
+    },
+    close() {
+      closeElement.click();
+    }
+  };
+}
\ No newline at end of file
diff --git a/src/styles/blocks/error-tooltip.pcss b/src/styles/blocks/error-tooltip.pcss
new file mode 100644
index 0000000..1998df8
--- /dev/null
+++ b/src/styles/blocks/error-tooltip.pcss
@@ -0,0 +1,26 @@
+.error-tooltip {
+  opacity: 0;
+  position: absolute;
+  left: 5%;
+  font-size: 14px;
+  line-height: 44px;
+  color: #fff;
+  background-color: $errors-color;
+  padding: 0 20px;
+  z-index: 9999;
+  user-select: none;
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-bottom: 6px solid $errors-color;
+  }
+
+  &--showed {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/blocks/form.pcss b/src/styles/blocks/form.pcss
index d9d468f..3badc59 100644
--- a/src/styles/blocks/form.pcss
+++ b/src/styles/blocks/form.pcss
@@ -27,10 +27,12 @@
 .form__block {
   flex: 1;
   margin-right: 90px;
-  border-bottom: 1px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  position: relative;
 
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     border-color: $main;
 
     .form__block-icon {
@@ -43,6 +45,14 @@
     margin-right: 0;
   }
 
+  &.error {
+    border-color: #fb0000;
+
+    .form__block-icon {
+      fill: #fb0000;
+      opacity: 1;
+    }
+  }
   
   @include tablets {
     margin-right: 20px;
diff --git a/src/styles/blocks/modal.pcss b/src/styles/blocks/modal.pcss
new file mode 100644
index 0000000..7ebf30b
--- /dev/null
+++ b/src/styles/blocks/modal.pcss
@@ -0,0 +1,44 @@
+.modal {
+  display: flex;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: block;
+    content: "";
+    background-color: #2d3c4e;
+    opacity: .9;
+  }
+}
+
+.modal__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  z-index: 10;
+}
+
+.modal__content {
+  background-color: $white;
+  width: 565px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+
+.modal__content-text {
+  margin-bottom: 30px;
+  font-weight: 500;
+  font-size: 36px;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/styles/blocks/slider-btn.pcss b/src/styles/blocks/slider-btn.pcss
index de1d91c..b07621f 100644
--- a/src/styles/blocks/slider-btn.pcss
+++ b/src/styles/blocks/slider-btn.pcss
@@ -5,6 +5,11 @@
   padding: 0;
   border: none;
 
+  &:disabled {
+    cursor: unset;
+    opacity: .3;
+  }
+
   &:enabled {
     &:hover {
       background-color: #5500f2;
diff --git a/src/styles/blocks/social.pcss b/src/styles/blocks/social.pcss
index 95558db..1d9090b 100644
--- a/src/styles/blocks/social.pcss
+++ b/src/styles/blocks/social.pcss
@@ -21,8 +21,11 @@
       opacity: .3;
 
       &:hover {
+        border-color: #ff9a00;
+        opacity: 1;
+
         .social__icon {
-          fill: currentColor;
+          fill: #ff9a00;
         }
       }
 
diff --git a/src/styles/variables.json b/src/styles/variables.json
index 85e6c90..4d4ade2 100644
--- a/src/styles/variables.json
+++ b/src/styles/variables.json
@@ -13,11 +13,14 @@
 
 
   "text-color": "#464d62",
-  "links-color": "#4b6fd7",
+  "links-color": "#383bcf",
   "main": "#5500f2",
   "font": "#464d62",
   "footer": "#252830",
   "href": "#586ed3",
   "white": "#fff",
-  "tag": "#859ec2"
+  "tag": "#859ec2",
+  "admin-font": "#414c63",
+  "errors-color": "#fb0000",
+  "errors-color-message": "#cd1515"
 }
diff --git a/yarn.lock b/yarn.lock
index c6c1568..0c6338f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7170,6 +7170,11 @@ vue@^2.5.17, vue@^2.6.7:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
+vuelidate@^0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.5.tgz#ff48c75ae9d24ea24c24e9ea08065eda0a0cba0a"
+  integrity sha512-GAAG8QAFVp7BFeQlNaThpTbimq3+HypBPNwdkCkHZZeVaD5zmXXfhp357dcUJXHXTZjSln0PvP6wiwLZXkFTwg==
+
 watchpack@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"