diff --git a/src/assets/icons/medcard.svg b/src/assets/icons/medcard.svg
index f654dc6..d7712ba 100644
--- a/src/assets/icons/medcard.svg
+++ b/src/assets/icons/medcard.svg
@@ -1,6 +1,4 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.6">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" fill="#9294A7"/>
-<path d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" fill="#9294A7"/>
-</g>
+<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.22099 2.30769C6.40882 1.00296 7.53814 0 8.90323 0H15.0968C16.4619 0 17.5912 1.00296 17.779 2.30769H21.2903C22.7868 2.30769 24 3.51308 24 5V27.3077C24 28.7946 22.7868 30 21.2903 30H2.70968C1.21316 30 0 28.7946 0 27.3077V5C0 3.51308 1.21316 2.30769 2.70968 2.30769H6.22099ZM6.22099 4.61538H2.70968C2.49589 4.61538 2.32258 4.78758 2.32258 5V27.3077C2.32258 27.5201 2.49589 27.6923 2.70968 27.6923H21.2903C21.5041 27.6923 21.6774 27.5201 21.6774 27.3077V5C21.6774 4.78758 21.5041 4.61538 21.2903 4.61538H17.779C17.5912 5.92011 16.4619 6.92308 15.0968 6.92308H8.90323C7.53814 6.92308 6.40882 5.92011 6.22099 4.61538ZM8.90323 2.30769C8.68944 2.30769 8.51613 2.47989 8.51613 2.69231V4.23077C8.51613 4.44319 8.68944 4.61538 8.90323 4.61538H15.0968C15.3106 4.61538 15.4839 4.44319 15.4839 4.23077V2.69231C15.4839 2.47989 15.3106 2.30769 15.0968 2.30769H8.90323Z" fill="#9294A7"/>
+<path d="M2.70968 4.61538H6.22099C6.40882 5.92011 7.53814 6.92308 8.90323 6.92308H15.0968C16.4619 6.92308 17.5912 5.92011 17.779 4.61538H21.2903C21.5041 4.61538 21.6774 4.78758 21.6774 5V27.3077C21.6774 27.5201 21.5041 27.6923 21.2903 27.6923H2.70968C2.49589 27.6923 2.32258 27.5201 2.32258 27.3077V5C2.32258 4.78758 2.49589 4.61538 2.70968 4.61538Z" fill="#9294A7"/>
 </svg>
diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
index 0fa13e6..70fe3c6 100644
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -26,9 +26,9 @@
       hide-bottom-space,
     )
       template(v-slot:prepend, v-if="iconLeft")
-        slot
+        slot(name="iconLeft")
       template(v-slot:append, v-if="iconRight")
-        slot
+        slot(name="iconRight")
       slot(v-if="!iconLeft && !iconRight")
 </template>
 
diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index 0a19867..3c5a999 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -2,7 +2,7 @@
   .sidebar-wrapper.flex.flex-col.gap-y-1
     .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
       q-btn.rotate-180(
-        @click="openSidebar",
+        @click="openSidebar(); hideSidebar()",
         dense,
         padding="8px",
         style="color: var(--font-grey-color); background: var(--bg-light-grey)"
@@ -30,35 +30,42 @@
           .status.flex.items-center.gap-x-1.px-2
             img(:src="item.icon")
             span {{item.name}}
-        .flex.flex-col.p-4.pb-0(:class="choiceState()", v-else)
-          .flex.h-8.w-full.items-center.justify-between
-            base-input(
-              v-model="foundPerson",
-              debounce="10",
-              @keyup.enter="searchPerson",
-              @input="searchPerson",
-              id="input",
-              placeholder="Найти пациента...",
-              outlined,
-              :width="160",
-              iconLeft,
-              fontSize="12px",
-              lineHeight="16px",
-              textColor="var(--font-grey-color)"
+        .flex.flex-col.px-4.pt-6px.pb-0(:class="choiceState()", v-else)
+          .flex.flex-col.gap-y-2
+            .flex.h-8.w-full.items-center.justify-between
+              base-input.input(
+                v-model="foundPerson",
+                debounce="10",
+                @keyup.enter="searchPerson",
+                @input="searchPerson",
+                id="input",
+                placeholder="Найти пациента...",
+                :width="160"
+                size="S",
+                :iconLeft="!foundPerson",
+                iconRight
+              )
+                template(v-slot:iconLeft)
+                  q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
+                template(v-slot:iconRight)
+                  q-icon.cursor-pointer(
+                    @click="copyValue(foundPerson)"
+                    name="app:icon-copy",
+                    size="16px",
+                    style="color: var(--font-grey-color)"
+                  )
+              q-btn.ml-2(
+                @click="sortPerson(elem.data)",
+                icon="app:sort-number",
+                :class="sortingClass",
+                :style="{width: '32px', height: '32px'}",
+                padding="0"
+              )
+            .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+              @click="checkAll(elem.data)"
             )
-              q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
-            q-btn.btn.ml-2(
-              @click="sortPerson(elem.data)",
-              style="color: var(--font-grey-color); background: var(--bg-light-grey)"
-              :style="{width: '32px', height: '32px'}",
-              padding="0"
-            )
-              img(:src="sort_word")
-          .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
-            @click="checkAll(elem.data)"
-          )
-            span Все
-            img(v-if="selectAll(elem.data)", :src="icon_ok")
+              .flex.items-center.h-6 Все
+              img(v-if="selectAll(elem.data)", :src="icon_ok")
           .person-wrapper.flex.flex-col
             .person.items-center.flex.justify-between.py-2.cursor-pointer(
               v-for="(person, index) in choiceData(elem.data)",
@@ -68,7 +75,7 @@
                 img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
                 .flex.flex-col.font-medium
                   .text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
-                  .text.text-xsx {{person.birthday}}
+                  .grey-color.text-xsx {{person.birthday}}
               img.h-6.w-6(v-if="person.check", :src="icon_ok")
 </template>
 
@@ -76,10 +83,11 @@
 import arrow from "@/assets/icons/double_left_arrow.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
 import sort_word from "@/assets/icons/sort_word.svg";
-import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInput from "@/components/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import BaseButton from "@/components/base/BaseButton.vue";
+
 export default {
   name: "CalendarOpenSidebar",
   props: { openSidebar: Function, createForm: Function },
@@ -97,6 +105,17 @@ export default {
       trimOwnerName: trimName,
     };
   },
+  computed: {
+    sortingClass() {
+      return this.sort
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
+  },
   methods: {
     choiceState() {
       let num = 0;
@@ -114,8 +133,13 @@ export default {
       };
     },
     choiceForm(choice, idx) {
-      if (choice)
+      if (choice) {
+        if (idx === 2) {
+          this.foundPerson = "";
+          this.sortData = [];
+        }
         return (this.patientList.find((e) => e.id === idx).choice = false);
+      }
       this.patientList.find((e) => e.id === idx).choice = true;
     },
     checkPerson(index, arr) {
@@ -150,6 +174,9 @@ export default {
         arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
       }
     },
+    hideSidebar() {
+      this.patientList.forEach((e) => (e.choice = false));
+    },
   },
 };
 </script>
@@ -168,6 +195,12 @@ export default {
   background: var(--default-white)
   border-radius: 4px
   color: var(--font-dark-blue-color)
+  &:last-child
+    border-bottom-left-radius: 0.25rem
+    border-bottom-right-radius: 0.25rem
+
+.expansion :deep(.q-item__section--side)
+  color: var(--font-black-color)
 
 .select
   padding-bottom: 2px
@@ -191,10 +224,14 @@ export default {
 .patient :deep(.q-expansion-item__content)
   padding-bottom: 0px
 
-.btn
+.sort-icon-default
   background-color: var(--bg-light-grey)
   color: var(--font-grey-color)
 
+.sort-icon-active
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+
 #input :deep(.q-field__control)
   height: 32px
   .q-field__prepend
@@ -210,7 +247,7 @@ export default {
   padding: 10px 16px !important
   min-height: 54px
 
-.text
+.grey-color
   color: var(--font-grey-color)
 
 .q-expansion-item :deep(.q-item)
@@ -251,4 +288,10 @@ export default {
 .default
   max-height: 0px
   transition: all 0.5s ease-in
+
+.input :deep(.q-field__prepend)
+  padding-right: 4px
+
+.input :deep(.q-field__append)
+  padding-left: 6px
 </style>
diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue
index a905c32..cfb0d06 100644
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -11,15 +11,15 @@
     .button.flex
       base-button(width="40px", @click="createForm")
         q-icon(name="app:plus", size="12px")
-    .button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
-      q-btn.blue-hover(
-        v-click-outside="hideActive",
-        @click="()=>clickButton(svg.name)",
+    .button.flex.relative.btn-sidebar.button-svg.cursor-pointer(v-for="svg in patientData.arrSvg")
+      q-btn(
+        :class="{'active-btn': findActiveBtn(svg.name)}",
+        @click="()=>showActive(svg.name)",
         dense,
-        style="color: var(--font-grey-color); borderRadius: 50%",
+        style="borderRadius: 50%",
         :padding="svg.name === 'group' ? '10.5px 7.5px' : '4px'"
       )
-        calendar-sidebar-svg(:name-svg="svg.name", :active="svg.active")
+        calendar-sidebar-svg.svg(:name-svg="svg.name", :active="svg.active")
       .separator.flex.absolute(v-show="allLeave")
         .sidebar.flex-col.flex
           .mark-top.flex.w-2.h-2
@@ -29,7 +29,8 @@
         v-if="svg.name === 'round'",
         anchor="center start",
         self="top right",
-        :style="{'margin-left': '8px !important'}"
+        :style="{'margin-left': '8px !important'}",
+        @before-hide="hideActive"
       )
         .status-wrapper.flex.flex-col.gap-y-4.p-4
           .font-bold.text-xm {{svg.text}}
@@ -44,7 +45,8 @@
         v-if="svg.name === 'medcard'",
         anchor="center start",
         self="top right",
-        :style="{'margin-left': '8px !important'}"
+        :style="{'margin-left': '8px !important'}",
+        @before-hide="hideActive"
       )
         .fill-wrapper.flex.flex-col.gap-y-4.p-4
           .font-bold.text-xm {{svg.text}}
@@ -59,40 +61,48 @@
         v-if="svg.name === 'group'",
         anchor="center start",
         self="top right",
-        :style="{'margin-left': '8px !important'}"
+        :style="{'margin-left': '8px !important'}",
+        @before-hide="hideActive"
       )
         .patient-wrapper.flex.flex-col.gap-y-4.px-4.pt-4
           .font-bold.text-xm {{svg.text}}
-          .flex.flex-col.relative(:style="{height: '391px'}")
-            .flex.h-8.w-full.items-center.justify-between
-              base-input(
-                v-model="foundPerson",
-                debounce="10",
-                @keyup.enter="searchPerson",
-                @input="searchPerson",
-                id="input",
-                placeholder="Найти пациента...",
-                outlined,
-                :width="160",
-                iconLeft,
-                fontSize="12px",
-                lineHeight="16px",
-                textColor="var(--font-grey-color)"
+          .flex.flex-col.relative(:style="{maxHeight: '391px'}")
+            .flex.flex-col.gap-y-2
+              .flex.h-8.w-full.items-center.justify-between
+                base-input.input(
+                  v-model="foundPerson",
+                  debounce="10",
+                  @keyup.enter="searchPerson",
+                  @input="searchPerson",
+                  id="input",
+                  placeholder="Найти пациента...",
+                  :width="160"
+                  size="S",
+                  :iconLeft="!foundPerson",
+                  iconRight
+                )
+                  template(v-slot:iconLeft)
+                    q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
+                  template(v-slot:iconRight)
+                    q-icon.cursor-pointer(
+                      @click="copyValue(foundPerson)"
+                      name="app:icon-copy",
+                      size="16px",
+                      style="color: var(--font-grey-color)"
+                    )
+                q-btn.ml-2(
+                  icon="app:sort-number",
+                  @click="sortPerson(patientsData)",
+                  :style="{width: '32px', height: '32px'}",
+                  padding="0",
+                  :class="sortingClass"
+                )
+              .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+                @click="checkAll(patientsData)"
               )
-                q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
-              q-btn.btn.ml-2(
-                @click="sortPerson(patientsData)",
-                style="color: var(--font-grey-color); background: var(--bg-light-grey)"
-                :style="{ width: '32px', height: '32px'}",
-                padding="0"
-              )
-                img(:src="sort_word")
-            .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
-              @click="checkAll(patientsData)"
-            )
-              span Все
-              img(v-if="selectAll(patientsData)", :src="icon_ok")
-            .person-wrapper.flex.flex-col
+                .flex.items-center Все
+                img(v-if="selectAll(patientsData)", :src="icon_ok")
+            .person-wrapper.flex.flex-col(@scroll="scrollTo", id="persons")
               .person.items-center.flex.justify-between.py-2.cursor-pointer(
                 v-for="(person, index) in choiceData(patientsData)",
                 @click="checkPerson(index, patientsData)"
@@ -103,19 +113,19 @@
                     .text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
                     .text.text-xsx {{person.birthday}}
                 img.h-6.w-6(v-if="person.check", :src="icon_ok")
-              .gradient.flex.absolute
+              .gradient.flex.absolute(v-if="isGradient")
 </template>
 
 <script>
 import arrow from "@/assets/icons/double_left_arrow.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
 import sort_word from "@/assets/icons/sort_word.svg";
-import BaseInput from "@/components/base/BaseInput.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "CalendarSidebar",
@@ -134,6 +144,7 @@ export default {
       sortData: [],
       sort: false,
       trimOwnerName: trimName,
+      isGradient: true,
     };
   },
   computed: {
@@ -142,19 +153,39 @@ export default {
         ? false
         : true;
     },
+    sortingClass() {
+      return this.sort
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
   },
   methods: {
+    findActiveBtn(name) {
+      return this.patientData.arrSvg.find((e) => e.name === name)?.active
+        ? true
+        : false;
+    },
     hideActive() {
       this.patientData.arrSvg.forEach((e) => {
         if (e.active) e.active = false;
       });
+      this.sortData = [];
+      this.foundPerson = "";
+      this.patientsData.forEach((e) => (e.check = false));
     },
-    clickButton(name) {
+    showActive(name) {
       this.patientData.arrSvg = this.patientData.arrSvg.map((e) => {
         if (e.name === name) return { ...e, active: true };
         return { ...e, active: false };
       });
     },
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
     checkPerson(index, arr) {
       arr.map((e) => {
         if (e.id === index) e.check = !e.check;
@@ -185,6 +216,21 @@ export default {
         arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
       }
     },
+    scrollTo(event) {
+      if (event.currentTarget.scrollTop === 305)
+        return (this.isGradient = false);
+      this.isGradient = true;
+    },
+  },
+  watch: {
+    foundPerson: {
+      immediate: true,
+      handler(val) {
+        if (val && document.getElementById("persons").offsetHeight < 311) {
+          this.isGradient = false;
+        }
+      },
+    },
   },
 };
 </script>
@@ -199,6 +245,9 @@ export default {
   background: var(--default-white)
   align-items: center
   justify-content: center
+  &:last-child
+    border-bottom-left-radius: 0.25rem
+    border-bottom-right-radius: 0.25rem
 
 .btn-sidebar
   &:hover
@@ -215,7 +264,7 @@ export default {
 
 .patient-wrapper
   width: 232px
-  height: 445px
+  max-height: 445px
   color: var(--font-dark-blue-color)
 
 .status
@@ -229,11 +278,12 @@ export default {
 .person-wrapper
   overflow-y: auto
   margin-right: -10px
+  max-height: 311px
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track:vertical
-    margin-top: -48px
-    margin-bottom: 26px
+    margin-top: -28px
+    margin-bottom: 18px
 
 .person
   height: 56px
@@ -247,6 +297,12 @@ export default {
   .q-field__prepend
     height: 32px
 
+.input :deep(.q-field__prepend)
+  padding-right: 4px
+
+.input :deep(.q-field__append)
+  padding-left: 6px
+
 .separator
   display: none
   z-index: 6
@@ -269,15 +325,39 @@ export default {
   border-radius: 4px
   color: var(--default-white)
 
-// .q-btn .blue-hover
-//   transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
-//   &:hover
-//     background: var(--bg-light-blue-color)
-
 .gradient
   width: 232px
   height: 44px
   right: 0px
   bottom: 0px
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
+
+.sort-icon-default
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+
+.sort-icon-active
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+
+.active-btn
+  transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
+  background: var(--bg-light-blue-color)
+
+.q-btn :deep(.q-focus-helper)
+  display: none
+
+.q-btn :deep(.q-ripple)
+  display: none
+
+.button-svg
+  &:hover
+    .svg :deep(.hover)
+      opacity: 1
+      transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
+</style>
+
+<style lang="sass">
+.q-menu
+  box-shadow: -4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)
 </style>
diff --git a/src/pages/newCalendar/components/CalendarSidebarSvg.vue b/src/pages/newCalendar/components/CalendarSidebarSvg.vue
index 834c5ec..d9d6988 100644
--- a/src/pages/newCalendar/components/CalendarSidebarSvg.vue
+++ b/src/pages/newCalendar/components/CalendarSidebarSvg.vue
@@ -2,13 +2,13 @@
   svg(:width="configSize[nameSvg].width" :height="configSize[nameSvg].height" :viewBox="`0 0 ${configSize[nameSvg].width} ${configSize[nameSvg].height}`" fill="none" xmlns="http://www.w3.org/2000/svg")
     g(v-if="nameSvg === 'round'")
       path(opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 20C7.5 26.9036 13.0964 32.5 20 32.5C26.9036 32.5 32.5 26.9036 32.5 20C32.5 13.0964 26.9036 7.5 20 7.5C13.0964 7.5 7.5 13.0964 7.5 20ZM20 5C11.7157 5 5 11.7157 5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5Z" :fill="active ? '#4772F2' : '#9294A7'")
-      path(d="M10 20C10 14.4772 14.4772 10 20 10C25.5228 10 30 14.4772 30 20C30 25.5228 25.5228 30 20 30C14.4772 30 10 25.5228 10 20Z" :fill="active ? '#4772F2' : '#9294A7'")
+      path.hover(:opacity="active ? '1' : '0.6'" d="M10 20C10 14.4772 14.4772 10 20 10C25.5228 10 30 14.4772 30 20C30 25.5228 25.5228 30 20 30C14.4772 30 10 25.5228 10 20Z" :fill="active ? '#4772F2' : '#9294A7'")
     g(v-if="nameSvg === 'medcard'")
-      path(fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" :fill="active ? '#4772F2' : '#9294A7'")
-      path(d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" :fill="active ? '#4772F2' : '#9294A7'")
+      path.hover(:opacity="active ? '1' : '0.6'" fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" :fill="active ? '#4772F2' : '#9294A7'")
+      path.hover(:opacity="active ? '1' : '0.6'" d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" :fill="active ? '#4772F2' : '#9294A7'")
     g(v-if="nameSvg === 'group'")
-      path(fill-rule="evenodd" clip-rule="evenodd" d="M0 23.6157C0 20.3869 2.6735 17.7695 5.97143 17.7695H16.0286C19.3265 17.7695 22 20.3869 22 23.6157V24.8464C22 26.036 21.015 27.0003 19.8 27.0003H2.2C0.984974 27.0003 0 26.036 0 24.8464V23.6157Z" :fill="active ? '#4772F2' : '#9294A7'")
-      path(d="M17.1272 8.68044C17.1272 12.0644 14.3839 14.8077 11 14.8077C7.616 14.8077 4.87275 12.0644 4.87275 8.68044C4.87275 5.29647 7.616 2.55322 11 2.55322C14.3839 2.55322 17.1272 5.29647 17.1272 8.68044Z" :fill="active ? '#4772F2' : '#9294A7'")
+      path.hover(:opacity="active ? '1' : '0.6'" fill-rule="evenodd" clip-rule="evenodd" d="M0 23.6157C0 20.3869 2.6735 17.7695 5.97143 17.7695H16.0286C19.3265 17.7695 22 20.3869 22 23.6157V24.8464C22 26.036 21.015 27.0003 19.8 27.0003H2.2C0.984974 27.0003 0 26.036 0 24.8464V23.6157Z" :fill="active ? '#4772F2' : '#9294A7'")
+      path.hover(:opacity="active ? '1' : '0.6'" d="M17.1272 8.68044C17.1272 12.0644 14.3839 14.8077 11 14.8077C7.616 14.8077 4.87275 12.0644 4.87275 8.68044C4.87275 5.29647 7.616 2.55322 11 2.55322C14.3839 2.55322 17.1272 5.29647 17.1272 8.68044Z" :fill="active ? '#4772F2' : '#9294A7'")
       g(opacity="0.6")
         path(d="M20.3457 12.077H27.66C30.0584 12.077 32.0028 14.04 32.0028 16.4616V17.3847C32.0028 18.2768 31.2865 19.0001 30.4028 19.0001H23.6888C22.357 16.8586 20.129 15.3317 17.5488 14.8961C18.2892 14.1192 18.8898 13.2091 19.3081 12.2029C19.6406 12.1206 19.9881 12.077 20.3457 12.077Z" :fill="active ? '#4772F2' : '#9294A7'")
         path(d="M24.0677 9.83683C26.5477 9.83683 28.5582 7.82634 28.5582 5.34627C28.5582 2.8662 26.5477 0.855713 24.0677 0.855713C21.5876 0.855713 19.5771 2.8662 19.5771 5.34627C19.5771 7.82634 21.5876 9.83683 24.0677 9.83683Z" :fill="active ? '#4772F2' : '#9294A7'")
@@ -32,5 +32,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped></style>