diff --git a/src/components/base/Calendar/BaseCalendar.vue b/src/components/base/Calendar/BaseCalendar.vue
index 43da3ce..dc31725 100644
--- a/src/components/base/Calendar/BaseCalendar.vue
+++ b/src/components/base/Calendar/BaseCalendar.vue
@@ -1,15 +1,14 @@
 <template lang="pug">
   .calendar-wrapper.bg-white
     component(
-      v-bind:is="currentForm",
+      v-bind:is="currentForm?.component",
       v-model:internal-date="internalDate",
-      v-model:external-date="externalDate",
+      v-model:external-date="value",
       :range="range",
       :start-year="startYear",
       :end-year="endYear",
       :range-count="rangeCount",
-      :next-form="nextForm",
-      :previous-form="previousForm",
+      :change-form="changeForm",
       :internal-month="internalMonth",
     )
     .footer.flex.justify-end.items-center.px-5.py-3
@@ -20,16 +19,16 @@
         label="Отменить",
         size="14px",
         padding="10px 12px",
-        @click="cancelChanges"
+        @click="currentForm?.cancelFunction"
       )
       q-btn(
         color="primary",
         flat,
         no-caps,
-        label="Сохранить",
+        :label="currentForm?.saveBtnLabel",
         size="14px",
         padding="10px 12px",
-        @click="saveChanges"
+        @click="currentForm?.saveFunction"
       )
 </template>
 
@@ -57,17 +56,36 @@ export default {
       type: Function,
       default: () => {},
     },
-    cancel: {
-      type: Function,
-      default: () => {},
-    },
+    // cancel: {
+    //   type: Function,
+    //   default: () => {},
+    // },
   },
   data() {
     return {
       internalDate: moment(),
-      externalDate: null,
-      currentFormIndex: 0,
-      forms: ["CalendarDates", "CalendarYears", "CalendarMonths"],
+      currentForm: null,
+      forms: [
+        {
+          component: "CalendarDates",
+          saveBtnLabel: "Сохранить",
+          cancelFunction: this.cancelExternalChanges,
+          saveFunction: this.saveExternalChanges,
+        },
+        {
+          component: "CalendarYears",
+          saveBtnLabel: "Применить",
+          cancelFunction: this.cancelInternalChanges,
+          saveFunction: this.applyInternalChanges,
+        },
+        {
+          component: "CalendarMonths",
+          saveBtnLabel: "Применить",
+          cancelFunction: this.cancelInternalChanges,
+          saveFunction: this.applyInternalChanges,
+        },
+      ],
+      previousValue: null,
     };
   },
   computed: {
@@ -79,9 +97,6 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
-    currentForm() {
-      return this.forms[this.currentFormIndex];
-    },
     internalMonth() {
       let formattedMonth = this.internalDate.format("MMMM");
       return `${
@@ -90,38 +105,58 @@ export default {
     },
   },
   methods: {
-    nextForm() {
-      this.currentFormIndex += 1;
+    changeForm(form) {
+      this.currentForm = this.forms.find((elem) => elem.component === form);
     },
-    previousForm() {
-      this.currentFormIndex -= 1;
-    },
-    cancelChanges() {
-      this.cancel();
-    },
-    saveChanges() {
-      this.value = this.externalDate?.from
+    cancelExternalChanges() {
+      this.value = this.range
         ? {
-            from: this.externalDate?.from?.clone(),
-            to: this.externalDate?.to?.clone(),
+            from: this.previousValue?.from?.clone(),
+            to: this.previousValue?.to?.clone(),
           }
-        : this.externalDate.clone();
+        : this.previousValue;
+    },
+    cancelInternalChanges() {
+      if (this.range) {
+        this.value = {
+          from: this.previousValue?.from?.clone(),
+          to: this.previousValue?.to?.clone(),
+        };
+        this.internalDate = this.previousValue?.from?.clone();
+      } else {
+        this.value = this.previousValue;
+        this.internalDate = this.previousValue;
+      }
+      this.changeForm("CalendarDates");
+    },
+    saveExternalChanges() {
       this.save();
     },
+    applyInternalChanges() {
+      switch (this.currentForm.component) {
+        case "CalendarYears":
+          this.changeForm("CalendarMonths");
+          break;
+        case "CalendarMonths":
+          this.changeForm("CalendarDates");
+          break;
+      }
+    },
   },
   mounted() {
     if (this.value) {
       if (this.range) {
         this.internalDate = this.value?.from?.clone();
-        this.externalDate = {
+        this.previousValue = {
           from: this.value?.from?.clone(),
           to: this.value?.to?.clone(),
         };
       } else {
         this.internalDate = this.value?.clone();
-        this.externalDate = this.value?.clone();
+        this.previousValue = this.value?.clone();
       }
     }
+    this.currentForm = this.forms[0];
   },
 };
 </script>
diff --git a/src/components/base/Calendar/CalendarDates.vue b/src/components/base/Calendar/CalendarDates.vue
index 2262142..9fc435e 100644
--- a/src/components/base/Calendar/CalendarDates.vue
+++ b/src/components/base/Calendar/CalendarDates.vue
@@ -8,7 +8,7 @@
         :label="internalMonth"
         no-caps,
         padding="10px 12px"
-        @click="nextForm"
+        @click="switchForm"
       )
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
@@ -53,7 +53,7 @@ export default {
     range: Boolean,
     rangeCount: Number,
     internalMonth: String,
-    nextForm: {
+    changeForm: {
       type: Function,
       default: () => {},
     },
@@ -97,6 +97,9 @@ export default {
     },
   },
   methods: {
+    switchForm() {
+      this.changeForm("CalendarYears");
+    },
     previousMonth() {
       this.internalValue = this.internalValue.clone().subtract(1, "month");
     },
diff --git a/src/components/base/Calendar/CalendarMonths.vue b/src/components/base/Calendar/CalendarMonths.vue
index 3a843c8..a5e7ddd 100644
--- a/src/components/base/Calendar/CalendarMonths.vue
+++ b/src/components/base/Calendar/CalendarMonths.vue
@@ -1,17 +1,82 @@
 <template lang="pug">
-  
+  .w-full
+    .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-center
+      q-btn(
+        size="14px"
+        color="dark"
+        flat,
+        :label="internalMonth",
+        no-caps,
+        padding="10px 12px"
+      )
+    .body.py-5.px-6
+      .cell.flex.items-center.justify-center.cursor-pointer.rounded.text-sm(
+        v-for="month in internalMonthsList",
+        :key="month",
+        :id="month",
+        :class="calculateActiveCell(month)",
+        @click="selectMonth(month)",
+      ) {{ month[0].toUpperCase() + month.slice(1) }}
 </template>
 
 <script>
+import * as moment from "moment/moment";
 export default {
   name: "CalendarMonths",
-  props: {},
-  data() {
-    return {};
+  props: {
+    internalDate: Object,
+    internalMonth: String,
+  },
+  data() {
+    return {
+      internalMonthsList: null,
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.internalDate;
+      },
+      set(value) {
+        this.$emit("update:internalDate", value);
+      },
+    },
+  },
+  methods: {
+    calculateActiveCell(month) {
+      return {
+        "active-cell": this.internalValue.format("MMMM") === month,
+      };
+    },
+    selectMonth(month) {
+      this.internalValue = this.internalValue.clone().month(month);
+    },
+  },
+  mounted() {
+    this.internalMonthsList = [...Array(12)].map((_, index) =>
+      moment().month(index).format("MMMM")
+    );
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+.body
+  height: 298px
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  row-gap: 4px
+  column-gap: 4px
+.cell
+  background-color:  var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
+.active-cell
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  &:hover
+    background-color: var(--btn-blue-color)
+</style>
diff --git a/src/components/base/Calendar/CalendarYears.vue b/src/components/base/Calendar/CalendarYears.vue
index d2fea67..a339047 100644
--- a/src/components/base/Calendar/CalendarYears.vue
+++ b/src/components/base/Calendar/CalendarYears.vue
@@ -14,7 +14,7 @@
         v-for="year in internalYearsList",
         :key="year",
         :id="year",
-        :class="activeCellClass(year), cellsClass",
+        :class="calculateActiveCell(year), cellsClass",
         @click="selectYear(year)",
       ) {{ year }}
 </template>
@@ -61,7 +61,7 @@ export default {
     },
   },
   methods: {
-    activeCellClass(year) {
+    calculateActiveCell(year) {
       return {
         "active-cell": parseInt(this.internalValue.format("YYYY"), 10) === year,
       };
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index d81579d..9e82487 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -31,7 +31,7 @@
       )
         .h-5.w-5.flex.items-center.justify-center
           q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
-            :size="calendarVisibility ? '10px' : '16px'"
+            :size="calendarVisibility ? '10px' : '16px'",
           )
             q-menu(
               :style="{'margin-top': '4px !important'}"
@@ -42,11 +42,10 @@
               :offset="[122, 14]"
             )
               base-calendar(
-                v-model="date",
+                v-model="dates",
                 range,
                 :range-count="7",
-                :save="saveNewDate",
-                :cancel="cancelDateChanges",
+                :save="saveDatesChange",
               )
       q-btn(
         color="secondary",
@@ -88,7 +87,7 @@ export default {
           value: "collapsed",
         },
       ],
-      date: {
+      dates: {
         from: null,
         to: null,
       },
@@ -97,9 +96,9 @@ export default {
   },
   computed: {
     currentWeek() {
-      return `${this.date?.from?.format(
+      return `${this.dates?.from?.format(
         "D MMMM YYYY"
-      )} - ${this.date?.to?.format("D MMMM YYYY")}`;
+      )} - ${this.dates?.to?.format("D MMMM YYYY")}`;
     },
     ...mapState({
       selectedDates: (state) => state.calendar.selectedDates,
@@ -107,40 +106,53 @@ export default {
   },
   methods: {
     previousWeek() {
-      this.date.from = this.date.from.clone().subtract(1, "week");
-      this.date.to = this.date.to.clone().subtract(1, "week");
+      this.dates.from = this.dates.from.clone().subtract(1, "week");
+      this.dates.to = this.dates.to.clone().subtract(1, "week");
+      this.changeSelectedDates(this.dates);
     },
     nextWeek() {
-      this.date.from = this.date.from.clone().add(1, "week");
-      this.date.to = this.date.to.clone().add(1, "week");
+      this.dates.from = this.dates.from.clone().add(1, "week");
+      this.dates.to = this.dates.to.clone().add(1, "week");
+      this.changeSelectedDates(this.dates);
     },
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
-    saveNewDate() {
+    saveDatesChange() {
+      this.calendarVisibility = false;
+      if (
+        !this.dates?.from.isSame(this.selectedDates?.from) &&
+        !this.dates?.to.isSame(this.selectedDates?.to)
+      )
+        this.changeSelectedDates(this.dates);
+    },
+    cancelDatesChange() {
       this.calendarVisibility = false;
     },
-    cancelDateChanges() {
-      this.calendarVisibility = false;
+    initializeDates() {
+      this.dates = {
+        from: this.selectedDates.from.clone(),
+        to: this.selectedDates.to.clone(),
+      };
     },
   },
   watch: {
-    date: {
-      deep: true,
-      handler(val) {
-        if (
-          !this.val?.from.isSame(this.selectedDates?.from) &&
-          !this.val?.to.isSame(this.selectedDates?.to)
-        )
-          this.changeSelectedDates(val);
-      },
-    },
+    // dates: {
+    //   deep: true,
+    //   handler(val) {
+    //     if (
+    //       !this.val?.from.isSame(this.selectedDates?.from) &&
+    //       !this.val?.to.isSame(this.selectedDates?.to)
+    //     )
+    //       this.changeSelectedDates(val);
+    //   },
+    // },
+    // calendarVisibility(val) {
+    //   if (val === false) this.initializeDates();
+    // }
   },
   mounted() {
-    this.date = {
-      from: this.selectedDates.from.clone(),
-      to: this.selectedDates.to.clone(),
-    };
+    this.initializeDates();
   },
 };
 </script>