diff --git a/src/css/modal.css b/src/css/modal.css
index aa75074..641f96a 100644
--- a/src/css/modal.css
+++ b/src/css/modal.css
@@ -111,8 +111,8 @@
     box-shadow var(--transition);
 }
 
-.modal-card-item:hover,
-.modal-card-item:focus {
+.modal-card-item:has(.check-input:focus),
+.modal-card-item:hover {
   border-color: var(--dark-green-color);
   transform: translate(-1.5px, -1.5px);
   box-shadow: 1px 1px 5px rgba(49, 81, 65, 0.4);
@@ -174,17 +174,24 @@
     box-shadow var(--transition);
 }
 
-.check-input:checked + .check-label .check-span {
+.check-input:checked + .check-span {
   fill: var(--dark-green-color);
 }
 
-.check-span:hover,
-.check-span:focus {
+.check-label:hover .check-span,
+.check-label:focus .check-span,
+.modal-card-item:has(.check-input:focus) .check-span {
   border-color: var(--dark-green-color);
   transform: translate(-1px, -1px);
   box-shadow: 1px 1px 5px rgba(49, 81, 65, 0.4);
 }
 
+/* .modal-card-item:has(.check-input:focus) {
+  border-color: var(--dark-green-color);
+  transform: translate(-1.5px, -1.5px);
+  box-shadow: 1px 1px 5px rgba(49, 81, 65, 0.4);
+} */
+
 .check-icon {
   width: 6px;
   height: 6px;
@@ -330,7 +337,7 @@ input::-webkit-inner-spin-button {
     position: relative;
     display: flex;
     flex-direction: column;
-    /* justify-content: space-between; */
+
     width: 200px;
     height: 250px;
     padding-top: 40px;
diff --git a/src/partials/modal.html b/src/partials/modal.html
index a292bc6..ed09dac 100644
--- a/src/partials/modal.html
+++ b/src/partials/modal.html
@@ -14,165 +14,168 @@
 
     <ul class="modal-cards list">
       <li class="modal-card-item">
-        <!-- checkbox -->
-        <div class="modal-check">
-          <input
-            type="checkbox"
-            class="check-input visually-hidden"
-            name="cabbage"
-            id="cabbage"
-            value="true"
-            checked
-          />
-          <label class="check-label" for="cabbage">
+        <label class="check-label" for="cabbage">
+          <!-- checkbox -->
+          <div class="modal-check">
+            <input
+              type="checkbox"
+              class="check-input visually-hidden"
+              name="cabbage"
+              id="cabbage"
+              value="true"
+            />
+
             <span class="check-span">
               <svg class="check-icon" width="8" height="8">
                 <use href="./img/veggie-icons.svg#icon-pick"></use>
               </svg>
             </span>
-          </label>
-        </div>
-        <!-- кінець чекбокса -->
+          </div>
 
-        <p class="modal-subtitle">Cabbage Basket</p>
-        <p class="text">Plant</p>
-        <div class="mod-tumb">
-          <picture class="picture">
-            <source
-              srcset="
-                ./img/modal/mod-desk-cabbage.png    1x,
-                ./img/modal/mod-desk-cabbage@2x.png 2x
-              "
-              media="(min-width: 1280px)"
-            />
-            <source
-              srcset="
-                ./img/modal/mod-tab-cabbage.png    1x,
-                ./img/modal/mod-tab-cabbage@2x.png 2x
-              "
-              media="(min-width: 768px)"
-            />
-            <source
-              srcset="
-                ./img/modal/mod-mob-cabbage.png    1x,
-                ./img/modal/mod-mob-cabbage@2x.png 2x
-              "
-              media="(max-width: 767px)"
-            />
-            <img
-              class="modal-img"
-              src="./img/modal/mod-desk-cabbage.png"
-              alt="cabbage heads in a basket"
-              width="257"
-              height="308"
-            />
-          </picture>
-        </div>
+          <!-- кінець чекбокса -->
+
+          <p class="modal-subtitle">Cabbage Basket</p>
+          <p class="text">Plant</p>
+          <div class="mod-tumb">
+            <picture class="picture">
+              <source
+                srcset="
+                  ./img/modal/mod-desk-cabbage.png    1x,
+                  ./img/modal/mod-desk-cabbage@2x.png 2x
+                "
+                media="(min-width: 1280px)"
+              />
+              <source
+                srcset="
+                  ./img/modal/mod-tab-cabbage.png    1x,
+                  ./img/modal/mod-tab-cabbage@2x.png 2x
+                "
+                media="(min-width: 768px)"
+              />
+              <source
+                srcset="
+                  ./img/modal/mod-mob-cabbage.png    1x,
+                  ./img/modal/mod-mob-cabbage@2x.png 2x
+                "
+                media="(max-width: 767px)"
+              />
+              <img
+                class="modal-img"
+                src="./img/modal/mod-desk-cabbage.png"
+                alt="cabbage heads in a basket"
+                width="257"
+                height="308"
+              />
+            </picture>
+          </div>
+        </label>
       </li>
       <li class="modal-card-item">
-        <div class="checkbox-field modal-check">
-          <input
-            type="checkbox"
-            class="check-input visually-hidden"
-            name="tomato"
-            id="tomato"
-            value="true"
-          />
-          <label class="check-label" for="tomato">
+        <label class="check-label" for="tomato">
+          <div class="checkbox-field modal-check">
+            <input
+              type="checkbox"
+              class="check-input visually-hidden"
+              name="tomato"
+              id="tomato"
+              value="true"
+            />
+
             <span class="check-span">
               <svg class="check-icon" width="8" height="8">
                 <use href="./img/veggie-icons.svg#icon-pick"></use>
               </svg>
             </span>
-          </label>
-        </div>
-        <p class="modal-subtitle">Tomato Basket</p>
-        <p class="text">Plant</p>
-        <div class="mod-tumb">
-          <picture class="picture">
-            <source
-              srcset="
-                ./img/modal/mod-desk-tomato.png    1x,
-                ./img/modal/mod-desk-tomato@2x.png 2x
-              "
-              media="(min-width: 1280px)"
-            />
-            <source
-              srcset="
-                ./img/modal/mod-tab-tomato.png    1x,
-                ./img/modal/mod-tab-tomato@2x.png 2x
-              "
-              media="(min-width: 768px)"
-            />
-            <source
-              srcset="
-                ./img/modal/mod-mob-tomato.png    1x,
-                ./img/modal/mod-mob-tomato@2x.png 2x
-              "
-              media="(max-width: 767px)"
-            />
-            <img
-              class="modal-img"
-              src="./img/modal/mod-desk-tomato.png"
-              alt="large tomatoes on twigs in a basket"
-              width="94"
-              height="78"
-            />
-          </picture>
-        </div>
+          </div>
+          <p class="modal-subtitle">Tomato Basket</p>
+          <p class="text">Plant</p>
+          <div class="mod-tumb">
+            <picture class="picture">
+              <source
+                srcset="
+                  ./img/modal/mod-desk-tomato.png    1x,
+                  ./img/modal/mod-desk-tomato@2x.png 2x
+                "
+                media="(min-width: 1280px)"
+              />
+              <source
+                srcset="
+                  ./img/modal/mod-tab-tomato.png    1x,
+                  ./img/modal/mod-tab-tomato@2x.png 2x
+                "
+                media="(min-width: 768px)"
+              />
+              <source
+                srcset="
+                  ./img/modal/mod-mob-tomato.png    1x,
+                  ./img/modal/mod-mob-tomato@2x.png 2x
+                "
+                media="(max-width: 767px)"
+              />
+              <img
+                class="modal-img"
+                src="./img/modal/mod-desk-tomato.png"
+                alt="large tomatoes on twigs in a basket"
+                width="94"
+                height="78"
+              />
+            </picture>
+          </div>
+        </label>
       </li>
       <li class="modal-card-item">
-        <div class="checkbox-field modal-check">
-          <input
-            type="checkbox"
-            class="check-input visually-hidden"
-            name="veg-mix"
-            id="veg-mix"
-            value="true"
-          />
-          <label class="check-label" for="veg-mix">
+        <label class="check-label" for="veg-mix">
+          <div class="checkbox-field modal-check">
+            <input
+              type="checkbox"
+              class="check-input visually-hidden"
+              name="veg-mix"
+              id="veg-mix"
+              value="true"
+            />
+
             <span class="check-span">
               <svg class="check-icon" width="8" height="8">
                 <use href="./img/veggie-icons.svg#icon-pick"></use>
               </svg>
             </span>
-          </label>
-        </div>
-        <p class="modal-subtitle">Vegetables Basket</p>
-        <p class="text">Plant</p>
+          </div>
+          <p class="modal-subtitle">Vegetables Basket</p>
+          <p class="text">Plant</p>
 
-        <div class="mod-tumb">
-          <picture class="picture">
-            <source
-              srcset="
-                ./img/modal/mod-desk-vegetables.png    1x,
-                ./img/modal/mod-desk-vegetables@2x.png 2x
-              "
-              media="(min-width: 1280px)"
-            />
-            <source
-              srcset="
-                ./img/modal/mod-tab-vegetables.png    1x,
-                ./img/modal/mod-tab-vegetables@2x.png 2x
-              "
-              media="(min-width: 768px)"
-            />
-            <source
-              srcset="
-                ./img/modal/mod-mob-vegetables.png    1x,
-                ./img/modal/mod-mob-vegetables@2x.png 2x
-              "
-              media="(max-width: 767px)"
-            />
-            <img
-              class="modal-img"
-              src="./img/modal/mod-desk-vegetables.png"
-              alt="assorted green vegetables in a basket"
-              width="94"
-              height="78"
-            />
-          </picture>
-        </div>
+          <div class="mod-tumb">
+            <picture class="picture">
+              <source
+                srcset="
+                  ./img/modal/mod-desk-vegetables.png    1x,
+                  ./img/modal/mod-desk-vegetables@2x.png 2x
+                "
+                media="(min-width: 1280px)"
+              />
+              <source
+                srcset="
+                  ./img/modal/mod-tab-vegetables.png    1x,
+                  ./img/modal/mod-tab-vegetables@2x.png 2x
+                "
+                media="(min-width: 768px)"
+              />
+              <source
+                srcset="
+                  ./img/modal/mod-mob-vegetables.png    1x,
+                  ./img/modal/mod-mob-vegetables@2x.png 2x
+                "
+                media="(max-width: 767px)"
+              />
+              <img
+                class="modal-img"
+                src="./img/modal/mod-desk-vegetables.png"
+                alt="assorted green vegetables in a basket"
+                width="94"
+                height="78"
+              />
+            </picture>
+          </div>
+        </label>
       </li>
     </ul>