diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index e3f7366..43d492a 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -46,6 +46,11 @@ export default {
           height: "48px",
           "min-height": "48px",
         };
+      if (this.size === "S")
+        return {
+          height: "32px",
+          "min-height": "32px",
+        };
       return {
         height: "40px",
         "min-height": "40px",
@@ -116,6 +121,24 @@ export default {
     background-color: var(--btn-mini-color-active)
     color: var(--bg-status-green)
 
+.grey
+  color: var(--font-dark-blue-color)
+  border: 1.5px solid var(--gray-secondary)
+  background-color: var(--gray-thirdly)
+  font-weight: 500
+  font-size: 14px
+  line-height: 19px
+  &:hover
+    background-color: var(--btn-blue-sec-color-hover)
+  &:active
+    background-color: var(--btn-blue-sec-color-active)
+  &:disabled, &[disabled]
+    opacity: 1 !important
+    color: var(--btn-blue-sec-color-disabled)
+    background-color: white
+    border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
+
+
 .q-btn :deep(.q-focus-helper)
   display: none
 .q-btn :deep(.q-ripple)
diff --git a/src/components/base/BaseTimeModal.vue b/src/components/base/BaseTimeModal.vue
index 089e4b6..e49e8f1 100644
--- a/src/components/base/BaseTimeModal.vue
+++ b/src/components/base/BaseTimeModal.vue
@@ -1,13 +1,15 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6
+  .flex.flex-col.gap-y-6.pt-6.dark-blue
     .table-time.flex.p-4
-      .flex.flex-col.gap-1(v-for="time in timeCoil")
-        .flex {{ time }}
-        .side.flex.p-1.h-9(:style="{columnGap: '2px'}")
-          q-btn.left-side(size="9px", padding="0 8px", color="primary")
-            q-icon(name="app:icon-ok")
-          q-btn.right-side(size="4px", padding="0 4px")
-            img(:src="lockIcon")
+      .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
+        .timeline.flex.text-smm.font-medium {{time.hour}}
+        .side.flex.p-1.h-9
+          q-btn.left-btn(:class="{'default-btn': !checkStartTime(time.hour)}", size="9px", padding="0 8px")
+            q-icon.icon(v-if="checkStartTime(time.hour)", name="app:lock", size="20px")
+            q-icon.icon-grey(v-else, name="app:plus", size="20px")
+          q-btn.right-btn(:class="{'default-btn': !checkEndTime(time.hour)}", size="4px", padding="0 4px")
+            q-icon.icon(v-if="checkEndTime(time.hour  )", name="app:lock", size="20px")
+            q-icon.icon-grey(v-else, name="app:plus", size="20px")
     .flex.justify-between.items-center
       .flex.gap-2
         base-button(
@@ -21,19 +23,18 @@
           label="Сохранить",
           @click="closeModalTime"
         )
-      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
+      .dark-blue.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
 </template>
 
 <script>
-import lockIcon from "@/assets/icons/locked.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseTimeModal",
-  props: { times: Object, closeModalTime: Function },
+  props: { times: Object, closeModalTime: Function, data: Array },
   components: { BaseButton },
   data() {
-    return { lockIcon, select: false };
+    return { select: false };
   },
   computed: {
     validateStartTime() {
@@ -45,7 +46,7 @@ export default {
     timeCoil() {
       let time = [];
       for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
-        time.push(`${i}:00`);
+        time.push({ hour: `${i}:00`, check: false });
       }
       return time;
     },
@@ -56,6 +57,17 @@ export default {
       let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
       return newTime;
     },
+    checkStartTime(time) {
+      return this.data.find((e) => e.start === time || e.end === time)
+        ? true
+        : false;
+    },
+    checkEndTime(time) {
+      let subtime = time.substr(0, 2) + ":30";
+      return this.data.find((e) => e.end === subtime || e.start === subtime)
+        ? true
+        : false;
+    },
   },
 };
 </script>
@@ -64,22 +76,35 @@ export default {
 .table-time
   width: 463px
   height: 174px
-  border: 1px solid var(--border-light-grey-color)
   border-radius: 6px
   flex-wrap: wrap !important
+  border: 1px solid var(--gray-secondary)
 
-.text
+.dark-blue
   color: var(--font-dark-blue-color)
 
 .side
-  border-left: 1px solid var(--border-light-grey-color)
-  border-right: 1px solid var(--border-light-grey-color)
+  border-left: 1px solid var(--font-dark-blue-color)
+  margin-left: 16px
+  margin-bottom: 24px
+  height: 36px
 
-.left-side
+.left-btn
+  width: 29px
   border-radius: 6px 1px 1px 6px
-  background: #4772F2
+  border: 1px solid var(--gray-secondary)
 
-.right-side
+.right-btn
+  width: 29px
   border-radius: 1px 6px 6px 1px
-  background: #FF6565
+  border: 1px solid var(--gray-secondary)
+
+.icon :deep(path)
+  fill: var(--system-color-red)
+
+.icon-grey :deep(path)
+  fill: var(--font-grey-color)
+
+.default-btn
+  background: var(--gray-thirdly)
 </style>
diff --git a/src/pages/newCalendar/components/HeaderRecordForm.vue b/src/pages/newCalendar/components/HeaderRecordForm.vue
index 51fa07e..f815467 100644
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/src/pages/newCalendar/components/HeaderRecordForm.vue
@@ -2,28 +2,29 @@
   .flex.gap-x-10
     .flex.flex-col.gap-y-4.text-smm
       .flex.gap-x-3.items-center
-        .text.font-semibold Статус
+        .text.font-semibold Статус:
         .flex.gap-x-1
           .input.flex.items-center.pl-4.gap-x-1.rounded-md
             img(:src="currentStatus.icon")
             .dark-blue.font-medium {{currentStatus.name}}
           q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
-            img(:src="folder")
-            q-menu
-              .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
-                v-for="status in statuses",
-                @click="choiceStatus(status)",
-                v-close-popup
-              )
-                img(:src="status.icon")
-                span {{status.name}}
+            q-icon.icon(name="app:folder", size="20px")
+            q-menu(:offset="[140, 8]")
+              .flex.p-2.flex-col
+                .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+                  v-for="status in statuses",
+                  @click="choiceStatus(status)",
+                  v-close-popup
+                )
+                  img(:src="status.icon")
+                  span {{status.name}}
       .flex.gap-x-3.items-center
         .text.font-semibold Дата:
         .flex.gap-x-1
           .input.flex.items-center.pl-4.rounded-md
             .dark-blue.font-medium {{currentDate.format("DD MMMM YYYY")}}
           q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
-            img(:src="calendar")
+            q-icon.icon(name="app:calendar", size="20px")
             q-menu(
               transition-show="scale",
               transition-hide="scale",
@@ -37,28 +38,25 @@
           .input.flex.items-center.pl-4.rounded-md
             .dark-blue.font-medium 13:00 - 14:00
           q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
-            img(:src="time")
+            q-icon.icon(name="app:time", size="20px")
           base-modal(v-model="isShowTime", title="Время", modal-padding)
-            base-time-modal(:times="times", :close-modal-time="closeModalTime")
+            base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
       .flex.gap-x-1 
         .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
           .photo.flex.h-10.w-10.items-center.justify-center
-            img(:src="noname")
+            q-icon.icon(name="app:noname", size="24px")
           .flex.flex-col.font-medium
             .dark-blue Имя Фамилия
             .grey-color.text-xsx.rounded-md Дата
         .change.flex.items-center.rounded-md
-          q-btn(dense, padding="24px 8px")
-            q-icon(name="app:icon-plus", size="12px")
+          q-btn(dense, padding="18px 4px")
+            q-icon.icon(name="app:folder", size="20px")
 </template>
 
 <script>
-import folder from "@/assets/icons/folder.svg";
-import time from "@/assets/icons/time.svg";
 import noname from "@/assets/icons/noname.svg";
-import calendar from "@/assets/icons/calendar-grey.svg";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
@@ -70,13 +68,20 @@ export default {
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
-      folder,
-      calendar,
-      time,
       noname,
       currentDate: moment().clone(),
       isShowTime: false,
       times: { from: "8:30", to: "10:30" },
+      data: [
+        {
+          start: "8:00",
+          end: "8:30",
+        },
+        {
+          start: "11:30",
+          end: "12:00",
+        },
+      ],
     };
   },
   methods: {
@@ -90,7 +95,10 @@ export default {
 <style lang="sass" scoped>
 .input
   width: 200px
-  background: var(--bg-light-grey)
+  border: 1px solid var(--gray-secondary)
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 
 .dark-blue
   color: var(--font-dark-blue-color)
@@ -101,7 +109,9 @@ export default {
   color: var(--font-grey-color)
 
 .status
-  padding: 8px 8px 8px 5px
+  width: 160px
+  height: 40px
+  padding: 8px 10px
   &:hover
     background: var(--bg-light-grey)
     cursor: pointer
diff --git a/src/pages/newCalendar/components/ServicesModal.vue b/src/pages/newCalendar/components/ServicesModal.vue
new file mode 100644
index 0000000..7b5c581
--- /dev/null
+++ b/src/pages/newCalendar/components/ServicesModal.vue
@@ -0,0 +1,221 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
+    .flex.flex-col.gap-y-4
+      base-input.search(
+        placeholder="Поиск",
+        :width="422",
+        iconLeft
+        size="M"
+      )
+        template(v-slot:iconLeft)
+          q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+      .flex.gap-x-2
+        base-button(
+          @click="choiceService(item.name)",
+          v-for="item in baseServices",
+          size="S",
+          width="100px",
+          type="grey"
+        ) {{item.name}}
+      template(v-for="item in baseServices")
+        .serice-wrapper.flex.flex-col(v-if="item.check")
+          .service.flex.items-center(v-for="serve in item.data")
+            q-checkbox(v-model="serve.checked")
+            .info-block.flex.justify-between.w-full
+              .flex.flex-col.gap-y-1
+                .text-m {{serve.title}}
+                .grey-color.text-smm {{item.name}}
+              .flex.flex-col.gap-y-1
+                .text-m.font-bold {{serve.price}}
+                .grey-color.text-smm {{serve.time}}
+    .footer.flex.gap-2
+      base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
+      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+
+export default {
+  name: "SevicesModal",
+  components: { BaseInput, BaseButton },
+  props: {
+    closeServices: Function,
+  },
+  data() {
+    return {
+      baseServices: [
+        {
+          name: "Терапия",
+          check: true,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "3 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "5 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "50 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "3 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "5 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "50 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Хирургия",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Ортопедия  ",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Ортодонтия",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    choiceService(name) {
+      this.baseServices.forEach((e) => {
+        e.check = false;
+        if (e.name === name) e.check = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 422px
+
+.search :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.base-service
+  border-radius: 4px
+  border: 1px solid var(--gray-secondary)
+  background: var(--gray-thirdly)
+
+.serice-wrapper
+  overflow: auto
+  max-height: 546px
+  margin-right: -18px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 16px
+
+.service
+  height: 67px
+  margin-right: 14px
+  &:last-child .info-block
+    border-bottom: none
+
+.info-block
+  padding: 11px 0px
+  border-bottom: 1px solid var(--gray-secondary)
+
+.footer
+  border-top: 1px solid var(--gray-secondary)
+  margin: 0px -32px -12px
+  padding: 16px 32px 0px 32px
+
+.dark-blue
+  color: var(--font-dark-blue-color)
+
+.grey-color
+  color: var(--font-grey-color)
+</style>
diff --git a/src/pages/newCalendar/components/del_RecordCreationForm copy.vue b/src/pages/newCalendar/components/del_RecordCreationForm copy.vue
index 6e56f04..9942310 100644
--- a/src/pages/newCalendar/components/del_RecordCreationForm copy.vue	
+++ b/src/pages/newCalendar/components/del_RecordCreationForm copy.vue	
@@ -26,8 +26,10 @@
             )
           .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
         .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
-        q-btn.change.flex.w-7.h-9.rounded-md(dense, padding="4px 4px")
-          img(:src="folder")
+        q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
+          q-icon.icon(name="app:folder", size="20px")
+        base-modal(v-model="isShowServices", title="Услуги", modal-padding)
+          services-modal(:close-services="closeServices")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex
@@ -68,6 +70,8 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ServicesModal from "./ServicesModal.vue";
 
 export default {
   name: "RecordCreationForm",
@@ -80,6 +84,8 @@ export default {
     BaseCalendar,
     HeaderRecordForm,
     BaseButton,
+    BaseModal,
+    ServicesModal,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   mixins: [v_model],
@@ -126,6 +132,7 @@ export default {
       networksSettings: column.find((el) => el.name === "networks")?.settings,
       otherColor: null,
       otherServices: [],
+      isShowServices: false,
     };
   },
   computed: {
@@ -181,6 +188,9 @@ export default {
       });
       this.otherColor = this.otherServices[0]?.style.background;
     },
+    closeServices() {
+      this.isShowServices = false;
+    },
   },
   mounted() {
     this.addShadow();
@@ -244,4 +254,7 @@ export default {
   border-top: 1px solid var(--border-light-grey-color)
   margin: 40px -32px 0px
   padding: 16px 32px 0px 32px
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 </style>
diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js
index e6747ce..d17e607 100644
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -114,8 +114,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "11:00", to: "12:00" },
+        reception: "31.07.2023",
+        time: { from: "12:00", to: "13:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -132,8 +132,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "12:00", to: "13:00" },
+        reception: "31.07.2023",
+        time: { from: "13:00", to: "14:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -150,8 +150,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "13:00", to: "14:00" },
+        reception: "31.07.2023",
+        time: { from: "14:00", to: "15:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -168,8 +168,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "14:00", to: "16:00" },
+        reception: "31.07.2023",
+        time: { from: "15:00", to: "17:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -186,8 +186,8 @@ export const patientList = [
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "16:00", to: "20:00" },
+        reception: "31.07.2023",
+        time: { from: "17:00", to: "20:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",
@@ -199,13 +199,13 @@ export const patientList = [
         first_name: "Анатолий",
         last_name: "Петров",
         patronymic: "Васильевич",
-        birthday: "23.07.1949",
+        birthday: "31.07.1949",
         avatar: personImage,
         check: false,
         view: false,
         viewDate: "",
-        reception: "28.07.2023",
-        time: { from: "18:00", to: "19:00" },
+        reception: "31.07.2023",
+        time: { from: "10:00", to: "12:00" },
         priority: 1,
         phone: "+7 (910) 623–32–23",
         email: "gaevaia@yandex.ru",