diff --git a/package-lock.json b/package-lock.json
index 1969837..39f8c6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5042,6 +5042,14 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -12675,6 +12683,18 @@
       "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
       "dev": true
     },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz",
+      "integrity": "sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -17182,6 +17202,14 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -22908,6 +22936,18 @@
         }
       }
     },
+    "vue-template-compiler": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz",
+      "integrity": "sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
diff --git a/src/App.vue b/src/App.vue
index 24216a6..1063d29 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,17 @@
 <template lang="pug">
-  div(class="app-container")
-    header-component
-    div(class="pages-container")
-      sidebar-component
+  .app-container
+    the-header
+    .pages-container
+      the-sidebar
       router-view
 </template>
 
 <script>
-  import HeaderComponent from "./components/homePageComponents/HeaderComponent";
-  import SidebarComponent from "./components/homePageComponents/SidebarComponent";
+  import TheHeader from "@/components/theComponents/TheHeader";
+  import TheSidebar from "@/components/theComponents/TheSidebar";
   export default {
     name: 'App',
-    components: {HeaderComponent, SidebarComponent}
+    components: {TheHeader, TheSidebar}
   }
 </script>
 
diff --git a/src/components/buttons/AddEventButton.vue b/src/components/baseComponents/buttons/AddEventButton.vue
similarity index 100%
rename from src/components/buttons/AddEventButton.vue
rename to src/components/baseComponents/buttons/AddEventButton.vue
diff --git a/src/components/buttons/ButtonPlus.vue b/src/components/baseComponents/buttons/ButtonPlus.vue
similarity index 77%
rename from src/components/buttons/ButtonPlus.vue
rename to src/components/baseComponents/buttons/ButtonPlus.vue
index 6ca80cd..3337cab 100644
--- a/src/components/buttons/ButtonPlus.vue
+++ b/src/components/baseComponents/buttons/ButtonPlus.vue
@@ -5,8 +5,8 @@
 </template>
 
 <script>
-  import PlusIcon from "../iconsComponents/PlusIcon";
-  import BasicIcon from "../iconsComponents/basicIcon/BasicIcon";
+  import PlusIcon from "@/components/iconsComponents/PlusIcon"
+  import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
   export default {
     name: "ButtonPlus",
     components: {BasicIcon, PlusIcon}
diff --git a/src/components/homePageComponents/SidebarComponent.vue b/src/components/homePageComponents/SidebarComponent.vue
deleted file mode 100644
index e7ca147..0000000
--- a/src/components/homePageComponents/SidebarComponent.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template lang="pug">
-  div(class='sidebar-container')
-    div(class='top-button-container')
-      button-sidebar-component(id="home" path="#/")
-        home-icon
-      button-sidebar-component(id="calendar" path="#/calendar")
-        calendar-icon
-      button-sidebar-component(id="user" path="#/user")
-        user-icon
-    div(class="bottom-button-container")
-      button-sidebar-component(id="settings" path="#/settings")
-        settings-icon
-</template>
-
-<script>
-  import HomeIcon from '../iconsComponents/HomeIcon';
-  import CalendarIcon from '../iconsComponents/CalendarIcon';
-  import UserIcon from '../iconsComponents/UserIcon';
-  import SettingsIcon from '../iconsComponents/SettingsIcon';
-  import ButtonSidebarComponent from "../ButtonSidebarComponent";
-
-  export default {
-    name: "SidebarComponent",
-    components: {ButtonSidebarComponent, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
-  }
-</script>
-
-<style lang="sass">
-  .sidebar-container
-    display: flex
-    flex-direction: column
-    justify-content: space-between
-    flex: auto
-    padding: 24px 0 24px 0
-    box-sizing: border-box
-    max-width: 80px
-    background-color: #F8F8FF
-
-  .top-button-container
-    display: flex
-    flex-direction: column
-    row-gap: 24px
-</style>
diff --git a/src/components/pages/calendarPages/CalendarPages.vue b/src/components/pages/calendarPages/CalendarPages.vue
index f533c08..95b9146 100644
--- a/src/components/pages/calendarPages/CalendarPages.vue
+++ b/src/components/pages/calendarPages/CalendarPages.vue
@@ -1,4 +1,5 @@
 <template lang="pug">
+  form-add-event
 </template>
 
 <script>
diff --git a/src/components/pages/calendarPages/FormAddEvent.vue b/src/components/pages/calendarPages/FormAddEvent.vue
index 26fa88b..7894f71 100644
--- a/src/components/pages/calendarPages/FormAddEvent.vue
+++ b/src/components/pages/calendarPages/FormAddEvent.vue
@@ -1,73 +1,73 @@
 <template lang="pug">
-  div.event-form-change(v-if="formOpen")
-    div.form-item-container
-      div.close-icon-position
+  .event-form-change(v-if="formOpen")
+    .form-item-container
+      .close-icon-position
         span.title-form Ответственный
         basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
           close-icon
-      div.input-container(@click="openSelectResponsible")
-        div.form-select
-          div.form-item-input.select-container-res {{eventData.responsible}}
-            div.option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
-              div.option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
-        div.select-form-separator
+      .input-container(@click="openSelectResponsible")
+        .form-select
+          .form-item-input.select-container-res {{eventData.responsible}}
+            .option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
+              .option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
+        .select-form-separator
         basic-icon(width="24" height="24" icon-color="#090A15")
           arrow-down-icon
-    div.form-item-container
+    .form-item-container
       span.title-form Оновная информация
-      div.form-inform-container
+      .form-inform-container
         basic-icon(width="24" height="24" icon-color="#090A15" )
           clock-icon
-        div.time-input-container
-          div.input-container
+        .time-input-container
+          .input-container
             input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
           span —
-          div.input-container
+          .input-container
             input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
-      div.form-inform-container
+      .form-inform-container
         basic-icon(width="24" height="24" icon-color="#090A15")
           user-icon
-        div.input-container
+        .input-container
           input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
-    div.form-item-container(class='additional-information')
-      div.form-inform-container
+    .form-item-container(class='additional-information')
+      .form-inform-container
         span.title-form Дополнительная информация
         button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
-      div.form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
+      .form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
         span.number-additional {{info}}
-        div.input-container
+        .input-container
           input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
-    div.form-item-container
+    .form-item-container
       span.title-form Вид события
-      div.input-container(@click="openSelectKindEvent")
-        div.form-select
-          div.form-item-input.select-container-kind {{eventData.kindEvent}}
-            div.option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
-              div.option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
-        div.select-form-separator
+      .input-container(@click="openSelectKindEvent")
+        .form-select
+          .form-item-input.select-container-kind {{eventData.kindEvent}}
+            .option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
+              .option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
+        .select-form-separator
         basic-icon(width="24" height="24" icon-color="#090A15")
           arrow-down-icon
-    div.form-item-container
-      div.form-inform-container
+    .form-item-container
+      .form-inform-container
         span.title-form Контакты
         button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
-      div.form-inform-container(v-for="(contact, index) in listContacts" :key="index")
+      .form-inform-container(v-for="(contact, index) in listContacts" :key="index")
         basic-icon(width="24" height="20" icon-color="#090A15")
           mail-icon
-        div.input-container
+        .input-container
           input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
     add-event-button(@click="createEvent")
 </template>
 
 <script>
-import BasicIcon from "../../iconsComponents/basicIcon/BasicIcon";
-import ArrowDownIcon from "../../iconsComponents/ArrowDownIcon";
-import ClockIcon from  "../../iconsComponents/ClockIcon";
-import UserIcon from "../../iconsComponents/UserSmallIcon";
-import MailIcon from "../../iconsComponents/MailIcon";
-import CloseIcon from "../../iconsComponents/CloseIcon"
-import AddEventButton from "../../buttons/AddEventButton";
-import ButtonPlus from "../../buttons/ButtonPlus";
+import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
+import ArrowDownIcon from "@/components/iconsComponents/ArrowDownIcon";
+import ClockIcon from  "@/components/iconsComponents/ClockIcon";
+import UserIcon from "@/components/iconsComponents/UserSmallIcon";
+import MailIcon from "@/components/iconsComponents/MailIcon";
+import CloseIcon from "@/components/iconsComponents/CloseIcon"
+import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
+import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
 export default {
   name: "FormChangeEvent",
   components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus},
diff --git a/src/components/ButtonSidebarComponent.vue b/src/components/theComponents/TheButtonSidebar.vue
similarity index 100%
rename from src/components/ButtonSidebarComponent.vue
rename to src/components/theComponents/TheButtonSidebar.vue
diff --git a/src/components/homePageComponents/HeaderComponent.vue b/src/components/theComponents/TheHeader.vue
similarity index 82%
rename from src/components/homePageComponents/HeaderComponent.vue
rename to src/components/theComponents/TheHeader.vue
index fee3a28..8078c6a 100644
--- a/src/components/homePageComponents/HeaderComponent.vue
+++ b/src/components/theComponents/TheHeader.vue
@@ -1,24 +1,24 @@
 <template lang="pug">
-  div.header-wrapper
-    div.header-left-side
-      img.logo-img(src="../../assets/images/logo.svg" alt="Logo")
-    div.header-right-side
-      div.header-inputs-wrapper
-        img.search-icon(src="../../assets/icons/search.svg" alt="Search")
+  .header-wrapper
+    .header-left-side
+      img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
+    .header-right-side
+      .header-inputs-wrapper
+        img.search-icon(src="@/assets/icons/search.svg" alt="Search")
         select.header-inputs.select(v-model="selectedFilter")
           option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
-        span.header-inputs-separator  
+        span.header-inputs-separator
         input.header-inputs.search-input(placeholder="Искать ...")
       button.header-buttons.btn-notification
-        img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications")
-      div.avatar-wrapper
+        img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
+      .avatar-wrapper
         img.avatar-img(:src="avatarSrc")
         button.header-buttons.btn-down-arrow
-          img.arrow-icon(src="../../assets/icons/down-arrow-2.svg" alt="Down Arrow")
+          img.arrow-icon(src="@/assets/icons/down-arrow-2.svg" alt="Down Arrow")
 </template>
 
 <script>
-  import img from '../../assets/images/avatar.svg'
+  import img from '@/assets/images/avatar.svg'
   export default {
     name: 'HeaderComponent',
     data() {
@@ -33,7 +33,7 @@
 
 <style lang='sass'>
   input
-    padding: 0 
+    padding: 0
 
   .header-buttons
     outline: none
@@ -59,12 +59,12 @@
   .header-left-side
     box-sizing: border-box
     margin: 4px 0
-    height: 32px 
+    height: 32px
     cursor: pointer
 
   .logo-img
     height: 32px
-    width: 70px 
+    width: 70px
 
   .header-inputs-wrapper
     display: inline-block
@@ -78,12 +78,12 @@
     height: 24px
     width: 24px
     color: var(--btn-blue-color)
-    opacity: 0.7 
+    opacity: 0.7
 
   .btn-notification
     display: flex
     justify-content: center
-    align-items: center  
+    align-items: center
     margin-right: 32px
 
   .arrow-icon
diff --git a/src/components/theComponents/TheSidebar.vue b/src/components/theComponents/TheSidebar.vue
new file mode 100644
index 0000000..02c4179
--- /dev/null
+++ b/src/components/theComponents/TheSidebar.vue
@@ -0,0 +1,43 @@
+<template lang="pug">
+  .sidebar-container
+    .top-button-container
+      the-button-sidebar(id="home" path="#/")
+        home-icon
+      the-button-sidebar(id="calendar" path="#/calendar")
+        calendar-icon
+      the-button-sidebar(id="user" path="#/user")
+        user-icon
+    .bottom-button-container
+      the-button-sidebar(id="settings" path="#/settings")
+        settings-icon
+</template>
+
+<script>
+  import HomeIcon from '@/components/iconsComponents/HomeIcon';
+  import CalendarIcon from '@/components/iconsComponents/CalendarIcon';
+  import UserIcon from '@/components/iconsComponents/UserIcon';
+  import SettingsIcon from '@/components/iconsComponents/SettingsIcon';
+  import TheButtonSidebar from "@/components/theComponents/TheButtonSidebar";
+
+  export default {
+    name: "SidebarComponent",
+    components: {TheButtonSidebar, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
+  }
+</script>
+
+<style lang="sass">
+  .sidebar-container
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    flex: auto
+    padding: 24px 0 24px 0
+    box-sizing: border-box
+    max-width: 80px
+    background-color: #F8F8FF
+
+  .top-button-container
+    display: flex
+    flex-direction: column
+    row-gap: 24px
+</style>