diff --git a/src/components/base/BaseDetailInfo.vue b/src/components/base/BaseDetailInfo.vue
new file mode 100644
index 0000000..3e158fe
--- /dev/null
+++ b/src/components/base/BaseDetailInfo.vue
@@ -0,0 +1,34 @@
+<template lang="pug">
+  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(:style="{height: `${height}px`}")
+    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4
+      span.text-sm.font-semibold.whitespace-normal {{title}}
+    .flex.items-center.gap-x-8
+    .section-add.flex.justify-center.items-center.cursor-pointer Добавить данные
+</template>
+
+<script>
+export default {
+  name: "BaseDetailInfo",
+  props: {
+    title: String,
+    height: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.section-wrapper
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+  &.click
+    background-color: var(--light-grey-bg-color)
+
+.section-header
+  min-height: 44px
+  border-bottom: 1px solid var(--border-light-grey-color)
+
+.section-add
+  height: 100%
+  color: var(--btn-blue-color)
+</style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index e2fdc24..9a5d1fc 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -271,9 +271,7 @@ export default {
       }
       if (action === "medical") {
         if (id) {
-          fetchWrapper
-            .get(`medical_card/medical_history/${id}/detail/`)
-            .then((res) => this.saveDataMedicalHistory(res));
+          localStorage.setItem("medicalId", id);
           this.$router.push("medical-card");
         } else {
           this.titleModal = "Создать мед.карту";
diff --git a/src/pages/medicalCard/components/MedicalCardWrapper.vue b/src/pages/medicalCard/components/MedicalCardWrapper.vue
index 2c3e877..bf2aec7 100644
--- a/src/pages/medicalCard/components/MedicalCardWrapper.vue
+++ b/src/pages/medicalCard/components/MedicalCardWrapper.vue
@@ -1,10 +1,96 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
     .wrapper-medical.relative.flex.flex-col.px-6.py-6.h-full.w-full
+      base-detail-info(:title="configData.identity_document.title" :height="configData.identity_document.height")
+      .flex.flex-col.gap-30px
+        base-detail-info(:title="configData.registration_address.title" :height="configData.registration_address.height")
+        base-detail-info(:title="configData.temporary_address.title" :height="configData.temporary_address.height")
+      .flex.flex-col.gap-2
+        base-detail-info(:title="configData.snils.title" :height="configData.snils.height")
+        base-detail-info(:title="configData.policy_number_series.title" :height="configData.policy_number_series.height")
+      base-detail-info(:title="configData.policy_organization.title" :height="configData.policy_organization.height")
+      .flex.flex-col.gap-4
+        base-detail-info(:title="configData.additional.title" :height="configData.additional.height")
+        base-detail-info(:title="configData.agreement_form.title" :height="configData.agreement_form.height")
 </template>
 
 <script>
-export default { name: "MedicalCardWrapper" };
+import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+import BaseInput from "@/components/base/BaseInput.vue";
+import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
+export default {
+  name: "MedicalCardWrapper",
+  components: { ClientDetailInput, BaseInput, BaseDetailInfo },
+  data() {
+    return {
+      configData: medicalDetailConfig,
+      medicalDataInit: {},
+    };
+  },
+  methods: {
+    saveDataMedical(data) {
+      const confidant = data ? data["confidant"] : undefined;
+      const pass = data
+        ? data?.person?.identity_document?.find((el) => el.kind === "PASSPORT")
+        : null;
+      this.medicalDataInit = {
+        ...data,
+        identity_document: {
+          ...pass,
+          number_series: `${pass.series} ${pass.number}`,
+        },
+        registration_address: {
+          registration_address: data?.person?.address?.find(
+            (el) => !el["registration_flg"]
+          )?.join_adress,
+        },
+        temporary_address: {
+          temporary_address: data?.person?.address?.find(
+            (el) => !el["temporary_registration_flg"]
+          )?.join_adress,
+        },
+        snils: {
+          ...data?.person["insurance_number"],
+        },
+        policy: {
+          ...data?.person["insurance_policy"][0],
+        },
+        policy_organization: {
+          ...data?.person["insurance_policy"][0],
+        },
+        additional: {
+          name_confidant: confidant
+            ? `${confidant?.last_name} ${confidant?.last_name} ${confidant?.patronymic}`
+            : null,
+          phone_confidant: confidant?.contacts?.find(
+            (el) => el?.kind === "PHONE"
+          ),
+        },
+        benefit_code: {
+          benefit_code: data?.benefit_code,
+        },
+        agreement_form: {
+          agreement: data?.agreement,
+          agreement_date: null,
+        },
+      };
+    },
+    async fetchDataMedicalCard() {
+      await fetchWrapper
+        .get(
+          `medical_card/medical_history/${localStorage.getItem(
+            "medicalId"
+          )}/detail/`
+        )
+        .then((res) => this.saveDataMedical(res));
+    },
+  },
+  mounted() {
+    this.fetchDataMedicalCard();
+  },
+};
 </script>
 
 <style lang="sass" scoped>
@@ -15,4 +101,17 @@ export default { name: "MedicalCardWrapper" };
 .wrapper-medical
   background-color: var(--default-white)
   height: calc(100vh - 64px)
+  display: grid
+  grid-template-columns: 280px 292px 180px 360px 463px
+  gap: 16px
+  overflow: auto
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
 </style>
diff --git a/src/pages/medicalCard/utils/medicalConfig.js b/src/pages/medicalCard/utils/medicalConfig.js
new file mode 100644
index 0000000..9e089ad
--- /dev/null
+++ b/src/pages/medicalCard/utils/medicalConfig.js
@@ -0,0 +1,128 @@
+export const medicalDetailConfig = {
+  identity_document: {
+    height: 366,
+    title: "Паспортные данные",
+    fields: [
+      {
+        label: "number_series",
+        title: "Серия и номер",
+        type: "input",
+        copy: true,
+      },
+      {
+        label: "issued_by_org",
+        title: "Выдан",
+        type: "input",
+      },
+      {
+        label: "issued_by_org_code",
+        title: "Код подразделения",
+        type: "input",
+      },
+      {
+        label: "issued_by_date",
+        title: "Дата выдачи",
+        type: "data",
+      },
+    ],
+  },
+  registration_address: {
+    height: 130,
+    title: "Адреес регистрации",
+    fields: [
+      {
+        label: "registration_address",
+        title: "Полный адрес",
+        type: "input",
+      },
+    ],
+  },
+  temporary_address: {
+    height: 130,
+    title: "Адреес проживания",
+    fields: [
+      {
+        label: "temporary_address",
+        title: "Полный адрес",
+        type: "input",
+      },
+    ],
+  },
+  snils: {
+    height: 108,
+    title: "СНИЛС",
+    fields: [
+      {
+        label: "insurance_number",
+        title: "Номер",
+        type: "input",
+        copy: true,
+      },
+    ],
+  },
+  policy_number_series: {
+    height: 170,
+    title: "ПОЛИС",
+    fields: [
+      {
+        label: "series",
+        title: "Серия",
+        type: "input",
+      },
+      {
+        label: "number",
+        title: "Номер",
+        type: "input",
+      },
+    ],
+  },
+  policy_organization: {
+    height: 111,
+    title: "Страховая организация",
+    fields: [
+      {
+        label: "organization",
+        title: "Название",
+        type: "input",
+      },
+    ],
+  },
+  additional: {
+    height: 202,
+    title: "Дополнительная информация",
+    fields: [
+      {
+        label: "name_confidant",
+        title: "Доверенное лицо",
+        type: "input",
+      },
+      {
+        label: "phone_confidant",
+        title: "",
+        type: "input",
+      },
+      {
+        label: "benefit_code",
+        title: "Код категории льготы",
+        type: "input",
+      },
+    ],
+  },
+  agreement_form: {
+    height: 163,
+    title:
+      "Информированное добровольное согласие на виды медицинских вмешательств, включенные в Перечень определенных видов медицинских вмешательств:",
+    fields: [
+      {
+        label: "agreement",
+        title: "Получено",
+        type: "check_box",
+      },
+      {
+        label: "agreement_date",
+        title: "Дата",
+        type: "date",
+      },
+    ],
+  },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 619aa66..247f020 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
       gap: {
         "6px": "6px",
         "11px": "11px",
+        "30px": "30px",
         43: "43px",
       },
       spacing: {