diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index c803e52..f1b164f 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,51 +1,57 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(
-    class="py-2.5",
-    :style="{ minWidth: widthInput + 'px' }"
-  )
-    input.input.w-full.outline-0.not-italic.date.cursor-text(
-      :value="value",
-      type="date",
-      @input="$emit('update:value', $event.target.value)",
-      :placeholder="placeholder",
-      :maxlength="maxLength",
-      max="9999-12-31",
-      min="0000-01-01"
-    )
-    .slot(v-if="withIcon" :class="iconPosition")
-      slot.cursor-pointer
+  .flex.flex-col
+    .label(v-if="!!label") {{label}}
+    .field
+      input(
+        v-model="value",
+        type="date",      
+        max="9999-12-31",
+        min="0000-01-01"
+)    
 </template>
 
 <script>
+//TODO стили перенести для всего кита, избавиться от scoped
+//TODO покрыть тестами
+//TODO сделать серый цвет плейсхолдера
+//TODO обработать ошибку при стирании даты
 export default {
   name: "BaseInputDate",
   props: {
-    maxLength: Number,
-    value: String,
-    withIcon: {
-      default: false,
+    modelValue: Date,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue?.toISOString().split("T")[0];
+      },
+      set(value) {
+        this.$emit("update:modelValue", new Date(value));
+      },
     },
-    iconPosition: {
-      default: "right",
-    },
-    placeholder: String,
-    widthInput: Number,
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.left
-  order: -1
-.right
-  order: 1
-.input-wrapper
+.field
+  align-items: center
+  border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
-  background-color: var(--default-white)
-  color: var(--font-black-color)
-.date
-  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
-  &::-webkit-calendar-picker-indicator
-    opacity: 0
-    cursor: pointer
+  padding: 8px 16px
+  input
+    cursor: text
+    border: none
+    outline: none
+    background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
+    &::-webkit-calendar-picker-indicator
+      opacity: 0
+      cursor: pointer
+
+.label
+  font-weight: 600
+  font-size: 14px
+  line-height: 135%
 </style>
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
index 1bc3429..741a00a 100644
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
@@ -9,28 +9,19 @@
           v-model="category",
           :items="categories",            
         )
-      .flex.w-full.my-6
-        .flex-col
-          .font-semibold.text-smm Дата подписания 
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model:value="signedDate"
-            )
-        .flex-col
-          .font-semibold.text-smm Начало оказания услуг
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model:value="startDate"
-            )
-        .flex-col
-          .font-semibold.text-smm Окончание оказания услуг
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model:value="endDate"
-            )
+      .flex.justify-between.w-full.gap-4
+        base-input-date(
+          v-model="signedDate",
+          label="Дата подписания"
+        )        
+        base-input-date(
+          v-model="startDate",
+          label="Начало оказания услуг"
+        )        
+        base-input-date(
+          v-model="endDate",
+          label="Окончание оказания услуг"
+        )
       
       .flex-col.w-full.my-6
         .font-semibold.text-smm Исполнитель             
@@ -61,7 +52,6 @@ export default {
   },
   data() {
     return {
-      isService: true,
       steps: [
         { id: "1", label: "1", value: "Договор" },
         { id: "2", label: "2", value: "Пациент" },
@@ -73,8 +63,8 @@ export default {
         { id: "Хирургия", label: "Хирургия" },
         { id: "Ортопедия", label: "Ортопедия" },
       ],
-      signedDate: undefined,
-      startDate: undefined,
+      signedDate: new Date(),
+      startDate: new Date(),
       endDate: undefined,
       employee: {},
       employees: [],
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
index 8bcfa0c..a87f8bb 100644
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -1,9 +1,101 @@
 <template lang="pug">
-  .text GHBDTN
+  .flex-col
+    .flex-col
+      .font-semibold.text-smm ФИО пациента 
+      base-input(
+        :width-input="200",
+        v-model:value="patient.full_name"
+      )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Документ, удостоверяющий личность
+        base-custom-select.select.text-sm(
+          placeholder="Тип документа",
+          v-model="patient.doc_type",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Серия и номер
+        base-input(
+          v-model:value="patient.seriesAndNumber", 
+          disabled,                  
+        )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Телефон
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Адрес
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes"    
+        )
+    .flex-col
+      .font-semibold.text-smm ФИО Заказчика 
+      base-input(
+        :width-input="200",
+        v-model:value="patient.full_name"
+      )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Документ, удостоверяющий личность
+        base-custom-select.select.text-sm(
+          placeholder="Тип документа",
+          v-model="patient.doc_type",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Серия и номер
+        base-input(
+          v-model:value="patient.seriesAndNumber", 
+          disabled,                  
+        )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Телефон
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Адрес
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes" )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 export default {
   name: "AgreementPerson",
+  components: {
+    BaseInput,
+    BaseCustomSelect,
+  },
+  data() {
+    return {
+      patient: {
+        full_name: "",
+        doc_type: "",
+        seriesAndNumber: "2354 125423",
+        phone: {},
+      },
+    };
+  },
+  computed: {
+    patentIdentityDocumentTypes() {
+      return [
+        { id: "Паспорт", label: "Паспорт" },
+        {
+          id: "Водительское удостоверение",
+          label: "Водительское удостоверение",
+        },
+      ];
+    },
+  },
 };
 </script>
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
new file mode 100644
index 0000000..ba4ac83
--- /dev/null
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
@@ -0,0 +1,86 @@
+<template lang="pug">
+  .flex-col
+    span.font-bold Общая информация
+    .flex-col
+      .flex-col.my-6
+        .counter.font-semibold.text-smm Категория
+        base-custom-select.select.text-sm(
+          placeholder="Категория договора",
+          v-model="category",
+          :items="categories",            
+        )
+      .flex.w-full.my-6
+        .flex-col
+          .font-semibold.text-smm Дата подписания 
+          .input-date.flex.h-10.justify-center
+            base-input-date(
+              :width-input="200",
+              v-model:value="signedDate"
+            )
+        .flex-col
+          .font-semibold.text-smm Начало оказания услуг
+          .input-date.flex.h-10.justify-center
+            base-input-date(
+              :width-input="200",
+              v-model:value="startDate"
+            )
+        .flex-col
+          .font-semibold.text-smm Окончание оказания услуг
+          .input-date.flex.h-10.justify-center
+            base-input-date(
+              :width-input="200",
+              v-model:value="endDate"
+            )
+      
+      .flex-col.w-full.my-6
+        .font-semibold.text-smm Исполнитель             
+        base-custom-select.select.text-sm(
+          placeholder="Поручить",
+          v-model="employee",
+          :items="employees",
+        )
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton";
+import BaseStepper from "@/components/base/BaseStepper";
+import BaseSelect from "@/components/base/BaseSelect";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseInput from "@/components/base/BaseInput";
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+
+export default {
+  name: "AgreementServices",
+  components: {
+    BaseButton,
+    BaseStepper,
+    BaseSelect,
+    BaseInputDate,
+    BaseInput,
+    BaseCustomSelect,
+  },
+  data() {
+    return {
+      isService: true,
+      steps: [
+        { id: "1", label: "1", value: "Договор" },
+        { id: "2", label: "2", value: "Пациент" },
+      ],
+      category: {},
+      categories: [
+        { id: "Консультация", label: "Консультация" },
+        { id: "Терапия", label: "Терапия" },
+        { id: "Хирургия", label: "Хирургия" },
+        { id: "Ортопедия", label: "Ортопедия" },
+      ],
+      signedDate: undefined,
+      startDate: undefined,
+      endDate: undefined,
+      employee: {},
+      employees: [],
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/clients/components/StepperCreateAgreement.vue b/src/pages/clients/components/StepperCreateAgreement.vue
index 5197261..393aac5 100644
--- a/src/pages/clients/components/StepperCreateAgreement.vue
+++ b/src/pages/clients/components/StepperCreateAgreement.vue
@@ -34,6 +34,7 @@ import BaseButton from "@/components/base/BaseButton";
 import BaseStepper from "@/components/base/BaseStepper";
 import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
 import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
+import AgreementServices from "./FormsAgreementCreate/AgreementServices";
 
 export default {
   name: "StepperCreateAgreement",
@@ -42,6 +43,7 @@ export default {
     BaseStepper,
     AgreementCommon,
     AgreementPerson,
+    AgreementServices,
   },
   data() {
     return {
@@ -62,8 +64,8 @@ export default {
         {
           id: 2,
           label: "2",
-          value: "Пациент",
-          component: "agreement-person",
+          value: "Услуги",
+          component: "agreement-services",
         },
       ],
     };