diff --git a/src/js/modules/main/Popup.mjs b/src/js/modules/main/Popup.mjs
index 27e0c12bba2e47d93e93493c39942fe30da4a9b1..63987ea25b285dc7784e028017fba7059f7aeef1 100644
--- a/src/js/modules/main/Popup.mjs
+++ b/src/js/modules/main/Popup.mjs
@@ -50,17 +50,14 @@ export default class Popup {
 
   static closeOnEscape(event) {
     if (event.key === 'Escape') {
-      const popupActive = document.querySelector('.popup.open');
-      this.close(popupActive);
+      const popupsActive = document.querySelectorAll('.popup.open');
+      this.close(popupsActive[popupsActive.length - 1]);
     }
   }
 
   static open(currentPopup) {
     if (currentPopup && unlock) {
-      const popupActive = document.querySelector('.popup.open');
-
-      if (popupActive) this.close(popupActive, false);
-      else bodyLock();
+      bodyLock();
 
       currentPopup.classList.add('open');
       currentPopup.addEventListener('click', (e) => {
diff --git a/src/pages/main/index.html b/src/pages/main/index.html
index 61cd90f6829ec2de5887e12ac000d11af4864118..64406af585095de15fab00974efb2caaab28a659 100644
--- a/src/pages/main/index.html
+++ b/src/pages/main/index.html
@@ -69,11 +69,27 @@
               <ul class="todo-popup__list">
                 <li class="todo-popup__item">Add task</li>
               </ul>
-              <button class="todo-popup__button">Add task</button>
+              <a href="#task-popup" class="todo-popup__button popup-link">Add task</a>
             </div>
           </div>
         </div>
       </div>
+
+      <div id="task-popup" class="task-popup popup">
+        <form action="#header" class="task-popup__body popup__body">
+          <fieldset class="task-popup__content popup__content">
+            <h2 class="task-popup__title">My task</h2>
+            <textarea
+              class="task-popup__field"
+              placeholder="What is your main focus for today?"
+            ></textarea>
+            <div class="task-popup__buttons">
+              <button type="submit" class="task-popup__buttons_ok popup__close">OK</button>
+              <button type="reset" class="task-popup__buttons_no popup__close">NO</button>
+            </div>
+          </fieldset>
+        </form>
+      </div>
     </div>
   </body>
 </html>
diff --git a/src/pages/main/style.scss b/src/pages/main/style.scss
index aa175eb9a798f3cf9b1175874a4da82f709d18db..106e5f6def613e1d5763e82f30a2940b9d83cddb 100644
--- a/src/pages/main/style.scss
+++ b/src/pages/main/style.scss
@@ -99,7 +99,7 @@ body {
     transform: perspective(600px) translate(0px, -100%) rotateX(45deg);
 
     > * {
-      &:first-child {
+      &.popup__close {
         display: inline-block;
       }
     }
@@ -197,6 +197,94 @@ body {
     line-height: 22px;
     text-transform: uppercase;
     color: $alice-blue;
-    cursor: pointer;
+  }
+}
+
+.task-popup {
+  &__content {
+    margin-left: 0;
+    margin-right: 0;
+    border: none;
+    width: 22.78%;
+    border-radius: 20px;
+    background-color: $medium-purple;
+    padding: 16px 18px 12px;
+
+    text-align: left;
+
+    > * {
+      &:first-child,
+      &:last-child {
+        text-align: center;
+      }
+    }
+  }
+
+  &__title {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 29px;
+    text-transform: uppercase;
+    color: $white;
+  }
+
+  &__field {
+    border: none;
+    padding: 6px 11px;
+    display: block;
+    width: 100%;
+    min-height: 67px;
+    border-radius: 10px;
+    background-color: $white;
+    margin-bottom: 11px;
+    resize: none;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: $matisse;
+    overflow: auto;
+    scrollbar-width: none;
+
+    &:focus {
+      outline: none;
+
+      &::placeholder {
+        visibility: hidden;
+      }
+    }
+
+    &::placeholder {
+      color: $matisse;
+      font-size: 16px;
+      line-height: 19px;
+      color: $matisse;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    max-width: 187px;
+
+    > * {
+      border: none;
+      padding: 10px 30px 5px 26px;
+      background-color: $alice-blue;
+      border-radius: 10px;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 19px;
+      color: $matisse;
+      text-transform: uppercase;
+      cursor: pointer;
+    }
   }
 }
diff --git a/src/scss/modules/main/_palette.scss b/src/scss/modules/main/_palette.scss
index d7fe845ef6b52d9ce0b86087def3d57d30b1e4f8..881a67bfab4aeb5dc9ad57a231b022b377938f69 100644
--- a/src/scss/modules/main/_palette.scss
+++ b/src/scss/modules/main/_palette.scss
@@ -6,3 +6,5 @@ $heliotrope1: #cf82f7;
 $heliotrope2: #c78bf8;
 $matisse: #195e92;
 $anakiwa: #82d6ff;
+$medium-purple: #aa55de;
+$white: #fff;