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 7ac954c..e49e8f1 100644
--- a/src/components/base/BaseTimeModal.vue
+++ b/src/components/base/BaseTimeModal.vue
@@ -2,12 +2,14 @@
   .flex.flex-col.gap-y-6.pt-6.dark-blue
     .table-time.flex.p-4
       .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
-        .timeline.flex.text-smm.font-medium {{time}}
+        .timeline.flex.text-smm.font-medium {{time.hour}}
         .side.flex.p-1.h-9
-          q-btn.plus-btn(size="9px", padding="0 8px")
-            q-icon.icon-grey(name="app:plus", size="20px")
-          q-btn.lock-btn(size="4px", padding="0 4px")
-            q-icon.icon(name="app:lock", size="20px")
+          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(
@@ -29,7 +31,7 @@ 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 { select: false };
@@ -44,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;
     },
@@ -55,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>
@@ -74,12 +87,15 @@ export default {
   border-left: 1px solid var(--font-dark-blue-color)
   margin-left: 16px
   margin-bottom: 24px
+  height: 36px
 
-.plus-btn
+.left-btn
+  width: 29px
   border-radius: 6px 1px 1px 6px
   border: 1px solid var(--gray-secondary)
 
-.lock-btn
+.right-btn
+  width: 29px
   border-radius: 1px 6px 6px 1px
   border: 1px solid var(--gray-secondary)
 
@@ -88,4 +104,7 @@ export default {
 
 .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 483691f..f815467 100644
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/src/pages/newCalendar/components/HeaderRecordForm.vue
@@ -40,7 +40,7 @@
           q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
             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 
@@ -72,6 +72,16 @@ export default {
       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: {
diff --git a/src/pages/newCalendar/components/RecordCreationForm.vue b/src/pages/newCalendar/components/RecordCreationForm.vue
index cedc96a..5620a7d 100644
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.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/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>