diff --git a/hotels.html b/hotels.html
index 7d23ea6..0d4ab5d 100644
--- a/hotels.html
+++ b/hotels.html
@@ -28,7 +28,7 @@
           </ul>
           <ul class="navigation-user">
             <li class="navigation-user-item">
-              <a class="navigation-link" href="#">
+              <a class="navigation-link navigation-user-link" href="#">
                 <svg class="navigation-icon" aria-hidden="true" focusable="false" width="20" height="20"
                   viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                   <path
@@ -38,7 +38,7 @@
               </a>
             </li>
             <li class="navigation-user-like navigation-user-like-accent">
-              <a class="navigation-link" href="#">
+              <a class="navigation-link navigation-user-link" href="#">
                 <svg class="navigation-icon" aria-hidden="true" focusable="false" width="18" height="17"
                   viewBox="0 0 18 17" xmlns="http://www.w3.org/2000/svg">
                   <path
diff --git a/images/ikons_logos/calendar.svg b/images/ikons_logos/calendar.svg
index 6bcf14a..8f13801 100644
--- a/images/ikons_logos/calendar.svg
+++ b/images/ikons_logos/calendar.svg
@@ -1,13 +1,15 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.75 10C6.05 10 6.25 9.8 6.25 9.5C6.25 9.2 6.05 9 5.75 9C5.45 9 5.25 9.2 5.25 9.5C5.25 9.8 5.45 10 5.75 10Z" fill="black"/>
-<path d="M15 2H13V0H12V2H4V0H3V2H1C0.4 2 0 2.4 0 3V14C0 14.5 0.4 15 1 15H15C15.5 15 16 14.5 16 14V3C16 2.4 15.5 2 15 2ZM15 14H1V7H15V14ZM1 6V3H3V5H4V3H12V5H13V3H15V6H1Z" fill="black"/>
-<path d="M8 10C8.3 10 8.5 9.8 8.5 9.5C8.5 9.2 8.3 9 8 9C7.7 9 7.5 9.2 7.5 9.5C7.5 9.8 7.7 10 8 10Z" fill="black"/>
-<path d="M10.25 10C10.55 10 10.75 9.8 10.75 9.5C10.75 9.2 10.55 9 10.25 9C9.95 9 9.75 9.2 9.75 9.5C9.75 9.8 9.95 10 10.25 10Z" fill="black"/>
-<path d="M5.75 11C5.45 11 5.25 11.2 5.25 11.5C5.25 11.8 5.45 12 5.75 12C6.05 12 6.25 11.8 6.25 11.5C6.25 11.2 6.05 11 5.75 11Z" fill="black"/>
-<path d="M3.5 10C3.8 10 4 9.8 4 9.5C4 9.2 3.8 9 3.5 9C3.2 9 3 9.2 3 9.5C3 9.8 3.2 10 3.5 10Z" fill="black"/>
-<path d="M3.5 11C3.2 11 3 11.2 3 11.5C3 11.8 3.2 12 3.5 12C3.8 12 4 11.8 4 11.5C4 11.2 3.8 11 3.5 11Z" fill="black"/>
-<path d="M8 11C7.7 11 7.5 11.2 7.5 11.5C7.5 11.8 7.7 12 8 12C8.3 12 8.5 11.8 8.5 11.5C8.5 11.2 8.3 11 8 11Z" fill="black"/>
-<path d="M10.25 11C9.95 11 9.75 11.2 9.75 11.5C9.75 11.8 9.95 12 10.25 12C10.55 12 10.75 11.8 10.75 11.5C10.75 11.2 10.55 11 10.25 11Z" fill="black"/>
-<path d="M12.5 10C12.8 10 13 9.8 13 9.5C13 9.2 12.8 9 12.5 9C12.2 9 12 9.2 12 9.5C12 9.8 12.2 10 12.5 10Z" fill="black"/>
-<path d="M12.5 11C12.2 11 12 11.2 12 11.5C12 11.8 12.2 12 12.5 12C12.8 12 13 11.8 13 11.5C13 11.2 12.8 11 12.5 11Z" fill="black"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<path d="M7.75 12C8.05 12 8.25 11.8 8.25 11.5C8.25 11.2 8.05 11 7.75 11C7.45 11 7.25 11.2 7.25 11.5C7.25 11.8 7.45 12 7.75 12Z" fill="black"/>
+<path d="M17 4H15V2H14V4H6V2H5V4H3C2.4 4 2 4.4 2 5V16C2 16.5 2.4 17 3 17H17C17.5 17 18 16.5 18 16V5C18 4.4 17.5 4 17 4ZM17 16H3V9H17V16ZM3 8V5H5V7H6V5H14V7H15V5H17V8H3Z" fill="black"/>
+<path d="M10 12C10.3 12 10.5 11.8 10.5 11.5C10.5 11.2 10.3 11 10 11C9.7 11 9.5 11.2 9.5 11.5C9.5 11.8 9.7 12 10 12Z" fill="black"/>
+<path d="M12.25 12C12.55 12 12.75 11.8 12.75 11.5C12.75 11.2 12.55 11 12.25 11C11.95 11 11.75 11.2 11.75 11.5C11.75 11.8 11.95 12 12.25 12Z" fill="black"/>
+<path d="M7.75 13C7.45 13 7.25 13.2 7.25 13.5C7.25 13.8 7.45 14 7.75 14C8.05 14 8.25 13.8 8.25 13.5C8.25 13.2 8.05 13 7.75 13Z" fill="black"/>
+<path d="M5.5 12C5.8 12 6 11.8 6 11.5C6 11.2 5.8 11 5.5 11C5.2 11 5 11.2 5 11.5C5 11.8 5.2 12 5.5 12Z" fill="black"/>
+<path d="M5.5 13C5.2 13 5 13.2 5 13.5C5 13.8 5.2 14 5.5 14C5.8 14 6 13.8 6 13.5C6 13.2 5.8 13 5.5 13Z" fill="black"/>
+<path d="M10 13C9.7 13 9.5 13.2 9.5 13.5C9.5 13.8 9.7 14 10 14C10.3 14 10.5 13.8 10.5 13.5C10.5 13.2 10.3 13 10 13Z" fill="black"/>
+<path d="M12.25 13C11.95 13 11.75 13.2 11.75 13.5C11.75 13.8 11.95 14 12.25 14C12.55 14 12.75 13.8 12.75 13.5C12.75 13.2 12.55 13 12.25 13Z" fill="black"/>
+<path d="M14.5 12C14.8 12 15 11.8 15 11.5C15 11.2 14.8 11 14.5 11C14.2 11 14 11.2 14 11.5C14 11.8 14.2 12 14.5 12Z" fill="black"/>
+<path d="M14.5 13C14.2 13 14 13.2 14 13.5C14 13.8 14.2 14 14.5 14C14.8 14 15 13.8 15 13.5C15 13.2 14.8 13 14.5 13Z" fill="black"/>
+</g>
 </svg>
diff --git a/images/ikons_logos/minus.svg b/images/ikons_logos/minus.svg
index 36750c3..c11ddd3 100644
--- a/images/ikons_logos/minus.svg
+++ b/images/ikons_logos/minus.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0L0 2L14 2V0L0 0Z" fill="#756157" fill-opacity="0.3"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 9V11H17V9H3Z" fill="black"/>
 </svg>
diff --git a/images/ikons_logos/plus.svg b/images/ikons_logos/plus.svg
index c7b0109..abe86d8 100644
--- a/images/ikons_logos/plus.svg
+++ b/images/ikons_logos/plus.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z" fill="#756157" fill-opacity="0.3"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 9H11V3H9V9H3V11H9V17H11V11H17V9Z" fill="black"/>
 </svg>
diff --git a/images/ikons_logos/triangle.svg b/images/ikons_logos/triangle.svg
new file mode 100644
index 0000000..d37ce0c
--- /dev/null
+++ b/images/ikons_logos/triangle.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="9" viewBox="0 0 19 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 0L19 9H0L9.5 0Z" fill="#333333"/>
+</svg>
diff --git a/index.html b/index.html
index d5a9d8d..dd5e98c 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
           </ul>
           <ul class="navigation-user">
             <li class="navigation-user-item">
-              <a class="navigation-link" href="#">
+              <a class="navigation-link navigation-user-link" href="#">
                 <svg class="navigation-icon" aria-hidden="true" focusable="false" width="20" height="20"
                   viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                   <path
@@ -38,7 +38,7 @@
               </a>
             </li>
             <li class="navigation-user-like navigation-user-like-accent">
-              <a class="navigation-link" href="#">
+              <a class="navigation-link navigation-user-link" href="#">
                 <svg class="navigation-icon" aria-hidden="true" focusable="false" width="18" height="17"
                   viewBox="0 0 18 17" xmlns="http://www.w3.org/2000/svg">
                   <path
@@ -97,7 +97,7 @@ <h3 class="advantages-title">Мало туристов</h3>
             </li>
             <li class="advantages-item-img">
               <div class="advantages-text-container">
-                <h3 class="advantages-title">Там есть мост дьявола</h3>
+                <h3 class="advantages-title">Там есть<br> мост дьявола</h3>
                 <p class="advantages-item-description">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
               </div>
               <img class="advantages-card" src="images/devils_bridge.jpg" width="800" height="385"
@@ -113,15 +113,16 @@ <h2 class="service-heading">Приезжайте в Седону отдохну
           <ul class="service-list">
             <li class="service-item">
               <h3 class="service-title service-title-home">Жильё</h3>
-              <p class="service-item-description">Рекомендуем пожить в настоящем мотеле, всё как в кино!</p>
+              <p class="service-item-description">Рекомендуем пожить<br> в настоящем мотеле,<br> всё как в кино!</p>
             </li>
             <li class="service-item">
               <h3 class="service-title service-title-food">Еда</h3>
-              <p class="service-item-description">Всегда заказывайте топовый фирменный бургер, вы не разочаруетесь!</p>
+              <p class="service-item-description">Всегда заказывайте<br> топовый фирменный бургер, вы не разочаруетесь!
+              </p>
             </li>
             <li class="service-item">
               <h3 class="service-title service-title-souvenir">Сувениры</h3>
-              <p class="service-item-description">Не только китайского, но и настоящего местного производства!</p>
+              <p class="service-item-description">Не только китайского,<br> но и настоящего местного производства!</p>
             </li>
           </ul>
         </section>
@@ -225,6 +226,65 @@ <h3 class="visually-hidden">Разработчики</h3>
         </section>
       </footer>
     </div>
+
+    <div class="modal-container modal-container-close">
+      <div class="modal modal-auth">
+        <section class="modal-content">
+          <h2 class="modal-title">Поиск гостиницы в Седоне</h2>
+          <form class="modal-form" action="https://echo.htmlacademy.ru" method="get">
+            <div class="form-group form-group-full">
+              <label class="modal-form-label" for="arrival-date">Дата Заезда:</label>
+              <input class="modal-form-input date-input" type="text" id="arrival-date" name="arrival-date"
+                value="27 апреля 2020" placeholder="Укажите дату" required>
+              <p class="form-status form-status-error">Мы не можем отправить вас в прошлое.</p>
+            </div>
+            <div class="form-group form-group-full">
+              <label class="modal-form-label" for="departure-date">Дата Выезда:</label>
+              <input class="modal-form-input date-input" type="text" id="departure-date" name="departure-date"
+                value="1 сентября 2023" placeholder="Укажите дату" required>
+              <p class="form-status">На эти даты есть свободные номера. Пока есть.</p>
+            </div>
+            <div class="form-group">
+              <label class="modal-form-label" for="quantity-adults">Взрослые:</label>
+              <div class="quantity-container">
+                <button class="quantity-button quantity-button-minus" type="button">
+                  <span class="visually-hidden">Меньше</span>
+                </button>
+                <input class="quantity-input" type="number" id="quantity-adults" name="quantity-adults" value="2"
+                  placeholder="2">
+                <button class="quantity-button quantity-button-plus" type="button">
+                  <span class="visually-hidden">Больше</span>
+                </button>
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="group-children">
+                <label class="modal-form-label label-children" for="quantity-children">&nbsp;Дети:</label>
+                <button class="form-tooltip" type="button" aria-labelledby="tooltip-label-date">
+                  <span class="visually-hidden">Дополнительная информция</span>
+                </button>
+                <span class="tooltip-text" role="tooltip" id="tooltip-label-date">Укажите количество детей, которые
+                  будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.</span>
+              </div>
+              <div class="quantity-container">
+                <button class="quantity-button quantity-button-minus" type="button">
+                  <span class="visually-hidden">Меньше</span>
+                </button>
+                <input class="quantity-input" type="number" id="quantity-children" name="quantity-children" value="2"
+                  placeholder="2">
+                <button class="quantity-button quantity-button-plus" type="button">
+                  <span class="visually-hidden">Больше</span>
+                </button>
+              </div>
+            </div>
+            <button class="button-modal button-action" type="submit">Найти</button>
+          </form>
+        </section>
+        <button class="modal-close-button">
+          <span class="visually-hidden">Закрыть</span>
+        </button>
+      </div>
+    </div>
   </body>
 
 </html>
diff --git a/styles/styles.css b/styles/styles.css
index 2625ef0..aa93d58 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -129,6 +129,10 @@ body {
   text-decoration: none;
 }
 
+.navigation-user-link {
+  padding: 22px 12px;
+}
+
 .navigation-link:hover {
   color: #756157;
 }
@@ -269,8 +273,8 @@ body {
 
 .number-of-objects {
   position: absolute;
-  top: 9px;
-  left: 24px;
+  top: 11px;
+  right: 4px;
   display: inline-block;
   font-weight: 400;
   font-size: 10px;
@@ -333,7 +337,7 @@ body {
   display: flex;
   flex-direction: column;
   max-width: 651px;
-  margin: 69px auto;
+  margin: 69px auto 90px;
   gap: 25px;
 }
 
@@ -734,7 +738,310 @@ body {
 
 .button-social:active .social-logo {
   fill: rgba(104, 162, 202, 0.3);
-  ;
+}
+
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(242, 242, 242, 0.8);
+  z-index: 2;
+}
+
+.modal {
+  position: relative;
+  margin: auto;
+  padding: 64px 70px;
+  background-color: #ffffff;
+  border-radius: 30px;
+  box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.2);
+}
+
+.modal-container-close {
+  display: none;
+}
+
+.modal-auth {
+  width: 717px;
+  box-sizing: border-box;
+}
+
+.modal-close-button {
+  position: absolute;
+  padding: 0;
+  top: 64px;
+  right: 52px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: none;
+  background-color: #F2F2F2;
+  background-image: url(../images/ikons_logos/cross.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+
+.modal-close-button:hover {
+  background-color: #E6E6E6;
+}
+
+.modal-close-button:focus-visible {
+  background-color: #E6E6E6;
+}
+
+.modal-close-button:active {
+  opacity: 30%;
+}
+
+.modal-close-button:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.modal-form-input:hover,
+.modal-form-input:focus-visible,
+.quantity-input:hover,
+.quantity-input:focus-visible {
+  background-color: #e6e6e6;
+}
+
+.modal-close-button:active {
+  background-color: #e6e6e6;
+}
+
+.modal-close-button:active::before {
+  opacity: 0.3;
+}
+
+.modal-title {
+  margin: 0 0 64px 0;
+  padding-right: 40px;
+  font-size: 30px;
+  line-height: 36px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.modal-form {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 23px 83px;
+  width: 577px;
+}
+
+.form-group {
+  display: grid;
+  grid-template-columns: 122px 1fr;
+  gap: 4px 15px;
+  margin: 0;
+}
+
+.form-group-full {
+  grid-column: 1 / -1;
+}
+
+.modal-form-label {
+  display: inline-block;
+  margin: 12px 0 0 0;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.form-input-group {
+  position: relative;
+}
+
+.modal-form-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px 20px;
+  font: inherit;
+  font-weight: 700;
+  line-height: 24px;
+  font-size: 18px;
+  color: #000000;
+  background-image: url("../images/ikons_logos/calendar.svg");
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-position: 400px 14px;
+  background-color: #f2f2f2;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.date-input {
+  padding-right: 60px;
+}
+
+.form-status {
+  grid-column: 2 / -1;
+  margin: 0;
+  padding-left: 20px;
+  font-size: 16px;
+  line-height: 21px;
+}
+
+.form-status-error {
+  color: #ff5757;
+}
+
+.quantity-container {
+  position: relative;
+}
+
+.quantity-button {
+  border: none;
+  opacity: 0.3;
+  cursor: pointer;
+}
+
+.quantity-button-minus {
+  position: absolute;
+  top: 14px;
+  left: 10px;
+  width: 20px;
+  height: 20px;
+  background-image: url("../images/ikons_logos/minus.svg");
+  background-color: #f2f2f2;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.quantity-input {
+  box-sizing: border-box;
+  font-family: inherit;
+  text-align: center;
+  width: 110px;
+  padding: 14px 40px 14px 40px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 20px;
+  background-color: #f2f2f2;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  -webkit-appearance: textfield;
+  appearance: textfield;
+}
+
+.quantity-input::-webkit-outer-spin-button,
+.quantity-input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.quantity-button-plus {
+  position: absolute;
+  top: 14px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  background-image: url("../images/ikons_logos/plus.svg");
+  background-color: #f2f2f2;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.quantity-button:hover {
+  opacity: 1;
+}
+
+.quantity-button:focus {
+  opacity: 1;
+}
+
+.quantity-button:active {
+  opacity: 0.3;
+}
+
+.quantity-button:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.group-children {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+}
+
+.label-children {
+  max-width: 56px;
+}
+
+.form-tooltip {
+  position: absolute;
+  top: 11px;
+  left: 64px;
+  display: flex;
+  width: 26px;
+  height: 26px;
+  background-color: #83b3d3;
+  background-image: url(../images/ikons_logos/info.svg);
+  background-position: center;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.tooltip-text {
+  position: absolute;
+  top: 52px;
+  left: -51px;
+  display: none;
+  box-sizing: border-box;
+  min-height: 143px;
+  min-width: 256px;
+  padding: 21px 18px 22px 22px;
+  font-size: 16px;
+  font-family: inherit;
+  line-height: 20px;
+  color: #ffffff;
+  background-color: #333333;
+  border-radius: 10px;
+  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.3);
+}
+
+.tooltip-text::after {
+  position: absolute;
+  content: "";
+  top: -9px;
+  left: 119px;
+  display: inline-block;
+  width: 19px;
+  height: 9px;
+  background: url("../images/ikons_logos/triangle.svg") no-repeat;
+}
+
+.form-tooltip:hover + .tooltip-text,
+.form-tooltip:focus + .tooltip-text {
+  display: block;
+}
+
+.modal-form .button-modal {
+  display: inline-block;
+  grid-column: 1 / -1;
+  min-height: 60px;
+  margin-top: 24px;
+  padding: 18px 34px;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 700;
+  color: #ffffff;
+  text-decoration: none;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: inherit;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
 }
 
 .page-filter {
@@ -862,6 +1169,40 @@ body {
   margin-bottom: 16px;
 }
 
+.control-input:hover {
+  opacity: 60%;
+}
+
+.control-input:focus-visible {
+  opacity: 60%;
+}
+
+.control-input:active {
+  opacity: 30%;
+}
+
+.control-input:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.control:hover {
+  opacity: 60%;
+}
+
+.control:focus-visible {
+  opacity: 60%;
+}
+
+.control:active {
+  opacity: 30%;
+}
+
+.control:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
 .price-form {
   margin: 0;
   padding: 0;
@@ -1105,6 +1446,8 @@ body {
 }
 
 .hotels-item-title {
+  font-size: 24px;
+  line-height: 28px;
   margin: 0;
   padding: 0;
 }