diff --git a/src/components/base/BaseStepper.vue b/src/components/base/BaseStepper.vue
new file mode 100644
index 0000000..248ba9a
--- /dev/null
+++ b/src/components/base/BaseStepper.vue
@@ -0,0 +1,54 @@
+<template lang="pug">
+  .wrap.flex
+    .step.flex(v-for="step in steps", :key="step.id" )
+      .line.flex.mx-2(v-if="step.id > 0", :class="{'filled': filled(step.id)}")
+      .step-num.flex.mx-2(:class="{'filled': filled(step.id)}")
+        .step-icon {{step.label}}
+      span.mx-2 {{step.value}}
+</template>
+
+<script>
+export default {
+  name: "BaseStepper",
+  data() {
+    return {};
+  },
+  props: {
+    steps: Array,
+    currentStep: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    filled(id) {
+      return id <= this.currentStep;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.step
+  align-items: center
+.step-num
+  background-color: var(--btn-grey-color)
+  gap: 8px
+  padding: 0
+  border-radius: 50%
+  height: 32px
+  width: 32px
+  justify-content: center
+  align-items: center
+  &.filled
+    background-color: var(--btn-blue-color)
+    .step-icon
+      color: var(--default-white)
+
+.line
+  width: 78px
+  border: 1.5px solid var(--btn-grey-color)
+  &.filled
+    background-color: var(--btn-blue-color)
+    border-color: var(--btn-blue-color)
+</style>
diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 4b62d1c..efb1343 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -53,7 +53,9 @@
               :close-modal="changeShowModal",
               v-click-outside="closeAddDocs"
             )
-            table-create-package-doc(v-if="isOpenPackage")
+            //-- table-create-package-doc(v-if="isOpenPackage")
+            stepper-create-agreement(v-if="isOpenPackage")
+
           base-popup.right-3.top-5(
             v-if="section === 'additional' && isOpenAddingWrap",
             v-click-outside="closePopup",
@@ -185,6 +187,8 @@ import wordIcon from "@/assets/icons/word.svg";
 import exelIcon from "@/assets/icons/exel.svg";
 import * as moment from "moment";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
+import StepperCreateAgreement from "./StepperCreateAgreement";
+
 export default {
   name: "ClientDetailInfoSection",
   components: {
@@ -200,6 +204,7 @@ export default {
     TableAddingNewDoc,
     TableChoiceAddingDoc,
     TableCreateNote,
+    StepperCreateAgreement,
   },
   props: {
     saveNewDoc: Function,
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
new file mode 100644
index 0000000..9998bf9
--- /dev/null
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
@@ -0,0 +1,78 @@
+<template lang="pug">
+  .wrap.flex
+    .base.flex.flex-col.gap-y-6
+      .flex.flex-col.gap-y-6
+        span.font-bold Общая информация
+        .flex.flex-col(class="gap-y-1.5")
+          .counter.font-semibold.text-smm Категория
+          base-custom-select.select.text-sm(
+            placeholder="Категория договора",
+            v-model="category",
+            :items="categories",            
+          )
+        .flex.gap-x-4
+          .flex.flex-col.w-full(class="gap-y-1.5")
+            .counter.font-semibold.text-smm Дата подписания 
+            .input-date.flex.h-10.justify-center
+              base-input-date(
+                :width-input="200",
+                v-model:value="signedDate"
+              )
+          .flex.flex-col(class="gap-y-1.5")
+            .counter.font-semibold.text-smm Начало оказания услуг
+            .input-date.flex.h-10.justify-center
+              base-input-date(
+                :width-input="200",
+                v-model:value="startDate"
+              )
+          .flex.flex-col(class="gap-y-1.5")
+            .counter.font-semibold.text-smm Окончание оказания услуг
+            .input-date.flex.h-10.justify-center
+              base-input-date(
+                :width-input="200",
+                v-model:value="endDate"
+              )
+      
+</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: "AgreementCommon",
+  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,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
new file mode 100644
index 0000000..8bcfa0c
--- /dev/null
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -0,0 +1,9 @@
+<template lang="pug">
+  .text GHBDTN
+</template>
+
+<script>
+export default {
+  name: "AgreementPerson",
+};
+</script>
diff --git a/src/pages/clients/components/StepperCreateAgreement.vue b/src/pages/clients/components/StepperCreateAgreement.vue
new file mode 100644
index 0000000..9aa6459
--- /dev/null
+++ b/src/pages/clients/components/StepperCreateAgreement.vue
@@ -0,0 +1,75 @@
+<template lang="pug">
+  .wrap.flex.flex-col.gap-y-6
+    .flex.flex.flex-col.gap-y-9
+      span.font-bold.text-xl Договор
+      base-stepper(
+        :steps="steps",
+        :currentStep="currentStep"
+      )      
+      component(v-bind:is="currentTabComponent")     
+    .flex.gap-6
+      .flex.flex-col.gap-2
+        base-button(
+            :size="40",
+            @click="prevStep",
+            v-if="currentStep !== 0"
+          ) Назад
+      .flex.flex-col.gap-2
+        base-button(
+          :size="40",
+          @click="nextStep",
+          v-if="currentStep < steps.length-1"
+        ) Далее
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton";
+import BaseStepper from "@/components/base/BaseStepper";
+import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
+import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
+
+export default {
+  name: "StepperCreateAgreement",
+  components: {
+    BaseButton,
+    BaseStepper,
+    AgreementCommon,
+    AgreementPerson,
+  },
+  data() {
+    return {
+      isService: true,
+      currentStep: 0,
+      steps: [
+        {
+          id: 0,
+          label: "1",
+          value: "Договор",
+          component: "agreement-common",
+        },
+        {
+          id: 1,
+          label: "2",
+          value: "Пациент",
+          component: "agreement-person",
+        },
+      ],
+    };
+  },
+  computed: {
+    currentTabComponent: function () {
+      return this.steps[this.currentStep]?.component;
+    },
+  },
+  methods: {
+    nextStep() {
+      this.currentStep += 1;
+    },
+    prevStep() {
+      this.currentStep -= 1;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>