diff --git a/src/assets/icons/whiteEye.svg b/src/assets/icons/whiteEye.svg
new file mode 100644
index 0000000..c002e5c
--- /dev/null
+++ b/src/assets/icons/whiteEye.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0013 9.58331C13.6376 9.58331 8.19428 13.8732 6.26783 19.8888C6.24403 19.9631 6.24406 20.0453 6.26789 20.1196C8.19673 26.1307 13.638 30.4166 19.9987 30.4166C26.3624 30.4166 31.8057 26.1267 33.7322 20.1112C33.756 20.0369 33.7559 19.9547 33.7321 19.8804C31.8033 13.8692 26.362 9.58331 20.0013 9.58331ZM3.88694 19.1263C6.11882 12.157 12.4675 7.08331 20.0013 7.08331C27.5316 7.08331 33.8779 12.1523 36.1126 19.1166C36.2956 19.6871 36.2958 20.303 36.1131 20.8737C33.8812 27.843 27.5325 32.9166 19.9987 32.9166C12.4684 32.9166 6.1221 27.8477 3.88744 20.8834C3.70436 20.3128 3.70419 19.697 3.88694 19.1263ZM20.0001 16.5833C18.2535 16.5833 16.7574 18.0678 16.7574 20C16.7574 21.9321 18.2535 23.4166 20.0001 23.4166C21.7467 23.4166 23.2428 21.9321 23.2428 20C23.2428 18.0678 21.7467 16.5833 20.0001 16.5833ZM14.2574 20C14.2574 16.7775 16.7842 14.0833 20.0001 14.0833C23.216 14.0833 25.7428 16.7775 25.7428 20C25.7428 23.2225 23.216 25.9166 20.0001 25.9166C16.7842 25.9166 14.2574 23.2225 14.2574 20Z" fill="white"/>
+</svg>
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 6c42ce7..63d62b0 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -5,6 +5,7 @@
   --bg-opacity-0: rgba(0, 0, 0, 0 )
   --font-dark-blue-color: #252850
   --font-dark-blue-color-0: rgba(37, 40, 80, 0.7)
+  --font-dark-blue-color-1: rgba(37, 40, 80, 0.4)
   --font-black-color: #090a15
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --icon-light-blue: #d7d9ff
diff --git a/src/components/base/BaseModalShowingPicture.vue b/src/components/base/BaseModalShowingPicture.vue
new file mode 100644
index 0000000..b52686d
--- /dev/null
+++ b/src/components/base/BaseModalShowingPicture.vue
@@ -0,0 +1,33 @@
+<template lang="pug">
+  base-modal(
+    v-model="value",
+    hide-header,
+    default-padding
+    )
+    .wrapper.flex.relative
+      img.w-full.h-full(:src="picture")
+</template>
+
+<script>
+import { v_model } from "@/shared/mixins/v-model";
+import BaseModal from "@/components/base/BaseModal.vue";
+
+export default {
+  name: "BaseModalShowingPicture",
+  components: { BaseModal },
+  mixins: [v_model],
+  props: {
+    pictureId: Number,
+    picture: String,
+    listPicture: Array,
+    index: Number,
+    data: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 640px
+  height: 785px
+</style>
diff --git a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
index 9b95510..cdd2e18 100644
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
@@ -2,19 +2,35 @@
   medical-form-wrapper(
     :title="`${value?.year} год`",
     :is-edit="isEdit",
-    :openEdit="openEdit",
-    :cancel="cancelEdit"
+    :open-edit="openEdit",
+    :cancel="cancelEdit",
+    :delete-item="deleteCard",
+    :save="saveСhanges",
+    :is-check-change="isCheckChange"
     )
     .flex.w-full.gap-x-4
-      .flex.h-fit.flex-col.gap-y-2.p-2.rounded(
-        v-if="value.pictures.length || isEdit"
-        :style="{backgroundColor: 'var(--bg-light-grey)'}"
+      base-modal-showing-picture(
+        v-model="isShowsPicture",
+        :picture="value.pictures.find((el) => el.id === pictureId)?.photo",
         )
-        .flex.gap-x-2(v-if="value.pictures.length")
-          .flex.relative.h-10.w-10(v-for="picture in value.pictures")
-            img.h-10.w-10.rounded(:src="picture.photo")
+      .flex.flex-col.gap-y-2.p-2.rounded(
+        v-if="value.pictures.length || isEdit",
+        :style="{backgroundColor: 'var(--bg-light-grey)'}",
+        )
+        .flex.gap-2.w-full(v-if="value.pictures.length")
+          .photo.flex.relative(
+            v-for="(picture, index) in value.pictures",
+            :style="{width: isEdit ? '40px' : '104px', height: isEdit ? '40px' : '104px'}",
+            )
+            .photo-viewing.flex.absolute.rounded.cursor-pointer.w-full.h-full.items-center.justify-center(
+              v-if="!isEdit",
+              @click="() => showPicture(picture.id)"
+              )
+              img(src="@/assets/icons/whiteEye.svg" alt="eye")
+            img.h-full.w-full.rounded(:src="picture.photo")
             q-btn.absolute(
-              @click="() => deletePicture(picture)",
+              v-if="isEdit",
+              @click="() => deletePicture(picture.id)",
               round,
               dense,
               size="16px",
@@ -26,7 +42,10 @@
                 size="8px",
                 :style="{color: 'var(--default-white)'}"
                 )
-        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(:style="{height: '93px'}")
+        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+          v-if="isEdit",
+          :style="{ height: '93px' }",
+          )
           base-input.w-full.h-full(
             @update:model-value="(e) => addNewFiles(e)",
             doc,
@@ -37,14 +56,24 @@
             multiple
           )
           label.absolute.w-fit.h-fit(for="download")
-            q-icon(name="app:download" size="24px")
+            q-icon(
+              name="app:download",
+              size="24px"
+              )
       .flex.w-full.flex-col.gap-y-2
         .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
-        .flex.flex-col.comments.rounded.py-3.pl-4.pr-2.h-130px
-          .flex.flex-col.w-full.overflow-y-auto
-            .flex(v-for="(comment, index) in value.comments")
+        .flex.flex-col.rounded.h-full(
+          :class="{'comments': isEdit}",
+          :style="{padding: isEdit ? '12px 8px 12px 16px' : '0 0 0 12px'}"
+          )
+          .flex.flex-col.w-full
+            .flex.items-center.gap-x-2(v-for="(comment, index) in value.comments")
+              .flex.w-1.h-1.rounded-full(
+                v-if="!isEdit",
+                :style="{backgroundColor: 'var(--font-dark-blue-color)'}")
               q-input.comment.w-full(
-                :ref="`comment-${index}`"
+                :ref="`comment-${index}`",
+                :readonly="!isEdit",
                 v-model="comment.text",
                 borderless,
                 dense,
@@ -55,23 +84,36 @@
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import { v_model } from "@/shared/mixins/v-model";
 import BaseInput from "@/components/base/BaseInput";
+import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
+import { mapActions } from "vuex";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "HealthStateForm",
-  components: { MedicalFormWrapper, BaseInput },
+  components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
   data() {
     return {
       isEdit: false,
+      isCheckChange: true,
+      isShowsPicture: false,
+      pictureId: "",
     };
   },
   mixins: [v_model],
   methods: {
-    deletePicture(picture) {
-      this.value.pictures = this.value.pictures.filter(
-        (el) => el.photo !== picture.photo
-      );
+    ...mapActions({
+      deleteItemData: "deleteItemData",
+    }),
+    showPicture(id) {
+      this.pictureId = id;
+      this.isShowsPicture = true;
+    },
+    deleteCard() {
+      this.deleteItemData({ stateKey: "healthState", itemId: this.value.id });
+    },
+    deletePicture(id) {
+      this.value.pictures = this.value.pictures.filter((el) => el.id !== id);
     },
     addNewFiles(e) {
       Object.values(e).forEach((file) => {
@@ -80,6 +122,7 @@ export default {
           this.value.pictures.push({
             photo: e.target.result,
             file: file,
+            id: Math.random(),
           });
         };
         reader.readAsDataURL(file);
@@ -91,6 +134,9 @@ export default {
     cancelEdit() {
       this.isEdit = false;
     },
+    saveСhanges() {
+      this.isEdit = false;
+    },
     switchСomment(event, index, comment) {
       if (event.code === "Enter") {
         event.target.blur();
@@ -114,6 +160,13 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.photo-viewing
+  display: none
+  background-color: var(--font-dark-blue-color-1)
+  color: var(--default-white)
+.photo
+  &:hover .photo-viewing
+    display: flex
 .download
   width: 216px
   border: 1px dashed var(--font-grey-color)
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index 7ab2fb9..c0cf8de 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -7,16 +7,42 @@
       .flex.w-full.justify-between
         .flex.w-fit.gap-11px.items-center(v-if="!tag")
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
+          q-icon.edit-button.text-lg.cursor-pointer(
+            name="app:edit",
+            v-if="!isEdit",
+            @click="openEdit",
+            size="20"
+            )
         .flex.w-full.gap-11px.items-center.justify-between(v-else)
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          .flex.items-center.h-5(v-if="!template", :style="{color: 'var(--btn-blue-color)'}")
-            q-btn(no-caps, outline, padding="10px 24px")
+          .flex.items-center.h-5(
+            v-if="!template",
+            :style="{color: 'var(--btn-blue-color)'}"
+            )
+            q-btn(
+              no-caps,
+              outline,
+              padding="10px 24px"
+              )
               img.mr-2(:src="layers")
               span.text-smm.font-medium Шаблоны
-        .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
-          q-icon(name="app:basket" size="20")
-          span.text-smm.font-medium {{ titleDelete }}
+        .flex(v-if="deleteItem")
+          q-btn(
+            @click="deleteItem",
+            v-if="!titleDelete",
+            :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)'}",
+            padding="10px",
+            )
+            q-icon(
+              name="app:basket",
+              size="20px",
+              )
+          .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
+            v-else-if="!isEdit && titleDelete", 
+            @click="deleteItem"
+            )
+            q-icon(name="app:basket" size="20")
+            span.text-smm.font-medium {{ titleDelete }}
         slot(name="right-corner")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
@@ -69,10 +95,7 @@ export default {
       type: Function,
       default: () => {},
     },
-    deleteItem: {
-      type: Function,
-      default: () => {},
-    },
+    deleteItem: Function,
     isCheckChange: {
       type: Boolean,
       default: false,
diff --git a/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue b/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue
index ec2a897..4fd6698 100644
--- a/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue
@@ -2,9 +2,7 @@
   .flex.flex-col.w-full.gap-y-2
     health-state-header
     .flex(v-for="(data, i) in healthState")
-      health-state-form(
-        v-model="healthState[i]"
-        )
+      health-state-form(v-model="healthState[i]")
 </template>
 
 <script>
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index db49d86..e92ec0e 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -130,6 +130,7 @@ const state = () => ({
   protocolData: null,
   healthState: [
     {
+      id: 1,
       year: 2023,
       pictures: [],
       comments: [
@@ -145,6 +146,7 @@ const state = () => ({
       ],
     },
     {
+      id: 2,
       year: 2022,
       pictures: [],
       comments: [
@@ -160,6 +162,7 @@ const state = () => ({
       ],
     },
     {
+      id: 3,
       year: 2021,
       pictures: [],
       comments: [
@@ -439,6 +442,9 @@ const getters = {
 };
 
 const actions = {
+  deleteItemData({ commit }, props) {
+    commit("setDataWithouDeleted", props);
+  },
   getBenefitData({ commit }) {
     fetchWrapper.get("general/benefit/").then((res) => {
       commit("setBenefitData", res.results);
@@ -505,6 +511,11 @@ const actions = {
 };
 
 const mutations = {
+  setDataWithouDeleted(state, props) {
+    state[props.stateKey] = state[props.stateKey].filter(
+      (item) => item.id !== props.itemId
+    );
+  },
   setBenefitData(state, data) {
     state.benefitData = data;
   },