diff --git a/src/css/layout/03-exercises.css b/src/css/layout/03-exercises.css
index 22f6aa5..cff6dc0 100644
--- a/src/css/layout/03-exercises.css
+++ b/src/css/layout/03-exercises.css
@@ -102,7 +102,7 @@
   flex-direction: column;
 }
 
-.quote-filters__container .quote__container {
+.quote-filters__container .aside__container {
   order: 2;
 }
 
@@ -116,7 +116,7 @@
     justify-content: space-between;
   }
 
-  .quote-filters__container .quote__container {
+  .quote-filters__container .aside__container {
     order: 1;
   }
 
@@ -195,13 +195,324 @@
   color: rgba(244, 244, 244, 0.4);
 }
 
+.aside__container {
+  width: 100%;
+}
+
+@media screen and (min-width: 1440px) {
+  .aside__container {
+    width: 444px;
+  }
+}
+
+/* Aside Block */
+
+.aside__container {
+  height: 100%;
+}
+
+.aside__container-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .aside__container-list {
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 32px;
+  }
+}
+
 .quote__container {
+  position: relative;
+  padding: 20px 20px 20px 72px;
   width: 100%;
-  border: 1px solid red;
+  min-height: 209px;
+  border-radius: 20px;
+  background-color: var(--color-black);
+}
+
+@media screen and (min-width: 768px) {
+  .quote__container {
+    width: 400px;
+    min-height: 249px;
+    padding: 40px 40px 40px 90px;
+  }
 }
 
 @media screen and (min-width: 1440px) {
   .quote__container {
     width: 444px;
+    min-height: 242px;
+  }
+}
+
+.aside-svg__circle {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(244, 244, 244, 0.2);
+}
+
+@media screen and (min-width: 768px) {
+  .aside-svg__circle {
+    top: 59px;
+    left: 50px;
+  }
+}
+
+.aside__svg {
+  fill: var(--color-white);
+}
+
+.aside__commas-svg {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 15px;
+  height: 15px;
+  fill: var(--color-white);
+}
+
+@media screen and (min-width: 768px) {
+  .aside__commas-svg {
+    top: 40px;
+    right: 40px;
+    height: 20px;
+  }
+}
+
+.quote__title {
+  margin-bottom: 8px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1em;
+  color: var(--color-white);
+}
+
+@media screen and (min-width: 768px) {
+  .quote__title {
+    font-size: 24px;
+    line-height: 1.3em;
+  }
+}
+
+.aside-quote__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 141px;
+}
+
+@media screen and (min-width: 768px) {
+  .aside-quote__wrapper {
+    min-height: 131px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .aside-quote__wrapper {
+    min-height: 124px;
+  }
+}
+
+/* Picture */
+
+.aside__img {
+  border-radius: 20px;
+  margin: 0 auto;
+  background: linear-gradient(
+      180deg,
+      rgba(17, 17, 17, 0) 0%,
+      rgba(17, 17, 17, 0.4) 100%
+    ),
+    url(../../img/exercise-image-mobile.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 242px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2),
+  (min-resolution: 192dpi),
+  (min-resolution: 2dppx) {
+  .aside__img {
+    background: linear-gradient(
+        180deg,
+        rgba(17, 17, 17, 0) 0%,
+        rgba(17, 17, 17, 0.4) 100%
+      ),
+      url(../../img/exercise-image-mobile@2x.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .aside__img {
+    border-radius: 20px;
+    margin: 0 auto;
+    background: linear-gradient(
+        180deg,
+        rgba(17, 17, 17, 0) 0%,
+        rgba(17, 17, 17, 0.4) 100%
+      ),
+      url(../../img/exercise-image-tablet.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 282px;
+    height: 252px;
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2),
+    (min-resolution: 192dpi),
+    (min-resolution: 2dppx) {
+    .aside__img {
+      background: linear-gradient(
+          180deg,
+          rgba(17, 17, 17, 0) 0%,
+          rgba(17, 17, 17, 0.4) 100%
+        ),
+        url(../../img/exercise-image-tablet@2x.jpg);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .aside__img {
+    border-radius: 20px;
+    margin: 0 auto;
+    background: linear-gradient(
+        180deg,
+        rgba(17, 17, 17, 0) 0%,
+        rgba(17, 17, 17, 0.4) 100%
+      ),
+      url(../../img/exercise-image-desktop.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 444px;
+    height: 242px;
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2),
+    (min-resolution: 192dpi),
+    (min-resolution: 2dppx) {
+    .aside__img {
+      background: linear-gradient(
+          180deg,
+          rgba(17, 17, 17, 0) 0%,
+          rgba(17, 17, 17, 0.4) 100%
+        ),
+        url(../../img/exercise-image-desktop@2x.jpg);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+}
+
+/* White Card */
+.aside__white-card {
+  position: relative;
+
+  width: 100%;
+  min-height: 201px;
+  padding: 20px 20px 20px 70px;
+  border-radius: 20px;
+  background-color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  .aside__white-card {
+    width: 400px;
+    min-height: 249px;
+    padding: 40px 40px 40px 90px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .aside__white-card {
+    width: 444px;
+    min-height: 315px;
+  }
+}
+
+.white-card-svg__wrapper {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--color-black);
+}
+
+@media screen and (min-width: 768px) {
+  .white-card-svg__wrapper {
+    top: 59px;
+  }
+}
+
+.aside__white-card-svg {
+  fill: var(--color-white);
+}
+
+.aside__white-card-title {
+  margin-bottom: 2px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1em;
+  color: var(--color-black);
+}
+
+@media screen and (min-width: 768px) {
+  .aside__white-card-title {
+    font-size: 24px;
+    line-height: 1.3em;
+  }
+}
+
+.aside__white-card-subtitle {
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3em;
+  color: rgba(36, 36, 36, 0.6);
+}
+
+.aside__white-card-text {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3em;
+  color: var(--color-black);
+}
+
+@media screen and (min-width: 1440px) {
+  .aside__white-card-text {
+    -webkit-line-clamp: 9;
   }
 }
diff --git a/src/css/layout/05-modal-exercise.css b/src/css/layout/05-modal-exercise.css
index cf6cc7b..8e19177 100644
--- a/src/css/layout/05-modal-exercise.css
+++ b/src/css/layout/05-modal-exercise.css
@@ -5,29 +5,63 @@
   bottom: 0;
   left: 0;
   right: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(4, 4, 4, 0.4);
-  backdrop-filter: blur(3px);
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(3px);
+  background: rgba(4, 4, 4, 0.4);
 }
 
 .hidden {
   display: none;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__container {
+    display: flex;
+    gap: 32px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
 .modal-exercises {
   position: relative;
   z-index: 100;
-  overflow-y: auto;
+  /* overflow-y: auto; */
+  overflow: auto;
   max-width: 100%;
-  max-height: 100%;
+
+  max-height: 80vh;
   padding: 40px 20px;
   border-radius: 20px;
-  background-color: #242424;
+  background-color: var(--color-black);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises {
+    padding: 32px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises {
+    width: 708px;
+    margin: 0 auto;
+  }
 }
 
 .modal-exercises__btn-close {
@@ -38,20 +72,36 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  stroke: #f4f4f4;
+  stroke: var(--color-white);
   background-color: rgba(0, 0, 0, 0);
   border: none;
+  transition: all var(--transition-dur-and-func);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn-close {
+    top: 16px;
+    right: 16px;
+  }
+}
+
+.modal-exercises__btn-close:hover {
+  transform: rotate(270deg);
 }
 
 .modal-exercises__img {
+  width: 100%;
+  height: 258px;
   margin-bottom: 20px;
   border-radius: 12px;
-  background: linear-gradient(
-      0deg,
-      rgba(4, 4, 4, 0.2) 0%,
-      rgba(4, 4, 4, 0.2) 100%
-    ),
-    url(<path-to-image>), lightgray -2px -6.558px / 105.185% 109.653% no-repeat;
+  filter: brightness(0.9);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__img {
+    height: 259px;
+    margin-bottom: 0;
+  }
 }
 
 .modal-exercises__name {
@@ -60,8 +110,17 @@
   font-weight: 500;
   line-height: 1;
   text-transform: none;
-  color: #f4f4f4;
+  color: var(--color-white);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__name {
+    margin-bottom: 8px;
+    font-size: 24px;
+    line-height: 1.33;
+  }
 }
+
 .modal-exercises__name::first-letter {
   text-transform: uppercase;
 }
@@ -76,22 +135,36 @@
   color: var(--color-white);
 }
 
-.icon-star-empty {
-  width: 18px;
-  height: 18px;
-  fill: rgba(244, 244, 244, 0.2);
+@media screen and (min-width: 768px) {
+  .modal-exercises__rating {
+    margin-bottom: 24px;
+  }
 }
 
 .icon-star {
+  padding: 2px;
   width: 18px;
   height: 18px;
   fill: var(--color-yellow);
 }
 
+.icon-star-empty {
+  padding: 2px;
+  width: 18px;
+  height: 18px;
+  fill: rgba(244, 244, 244, 0.2);
+}
+
 .modal-exercises__block {
   margin-bottom: 40px;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__block {
+    margin-bottom: 64px;
+  }
+}
+
 .modal-exercises__list {
   position: relative;
   display: flex;
@@ -100,10 +173,17 @@
   margin-bottom: 30px;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__list {
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+}
+
 .modal-exercises__list::before,
 .modal-exercises__list::after {
   position: absolute;
-  height: 2px;
+  height: 1px;
   width: 100%;
   background-color: rgba(244, 244, 244, 0.2);
   content: '';
@@ -117,6 +197,15 @@
   left: 0;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__list::before {
+    top: -8px;
+  }
+  .modal-exercises__list::after {
+    bottom: -8px;
+  }
+}
+
 .modal-exercises__subtitle {
   margin-bottom: 4px;
   font-size: 12px;
@@ -128,8 +217,10 @@
 .modal-exercises__text {
   font-size: 14px;
   font-weight: 500;
-  color: #f4f4f4;
+  line-height: 1.28;
+  color: var(--color-white);
 }
+
 .modal-exercises__text::first-letter {
   text-transform: uppercase;
 }
@@ -143,36 +234,75 @@
 .modal-exercises__btn-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn-container {
+    gap: 7px;
+  }
 }
 
 .modal-exercises__btn {
-  font-family: 'DM Sans', sans-serif;
+  padding: 12px 19px;
   font-size: 14px;
   line-height: 1.28;
-  padding: 12px 19px;
   border-radius: 30px;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn {
+    padding: 12px 24px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+}
+
 .modal-exercises__btn-favorites {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: none;
-  background-color: #f4f4f4;
-  color: #242424;
+  gap: 8px;
+  border: 1px solid var(--color-white);
+  background-color: var(--color-white);
+  color: var(--color-black);
+  transition: all var(--transition-dur-and-func);
 }
 
 .btn-favorites__icon {
-  stroke: #242424;
-  fill: #f4f4f4;
+  stroke: var(--color-black);
+  fill: var(--color-white);
   padding-left: 4px;
-  width: 22px;
+  width: 18px;
   height: 18px;
+  transition: all var(--transition-dur-and-func);
+}
+
+@media screen and (min-width: 768px) {
+  .btn-favorites__icon {
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .modal-exercises__btn-rating {
-  border: 1px solid #f4f4f4;
+  border: 1px solid var(--color-white);
   background-color: transparent;
-  color: #f4f4f4;
+  color: var(--color-white);
+  transition: all var(--transition-dur-and-func);
+}
+
+.modal-exercises__btn-favorites:hover {
+  background-color: var(--color-black);
+  color: white;
+}
+
+.modal-exercises__btn-favorites:hover .btn-favorites__icon {
+  fill: var(--color-black);
+  stroke: var(--color-white);
+}
+
+.modal-exercises__btn-rating:hover {
+  background-color: var(--color-white);
+  color: var(--color-black);
 }
diff --git a/src/js/05-modal-exercises.js b/src/js/05-modal-exercises.js
index 0a39a75..20fc713 100644
--- a/src/js/05-modal-exercises.js
+++ b/src/js/05-modal-exercises.js
@@ -99,55 +99,64 @@ function createMarkup({
   const ratingStarsHTML = createRating(rating);
   return `
   <div class="modal-exercises__container" data-id="${_id}">
-  <button class="modal-exercises__btn-close"><svg width="24" height="24">
-    <use href="./img/sprite.svg#icon-menu-mobile-close"></use>
-  </svg>
-  </button>
-  <img
+    <button class="modal-exercises__btn-close">
+      <svg width="24" height="24">
+        <use href="./img/sprite.svg#icon-menu-mobile-close"></use>
+      </svg>
+    </button>
+
+    <img
     class="modal-exercises__img"
     ${getExerciseGif}
     alt="Exercise video"
     loading="lazy"
-  />
-  <div class="modal-exercises__card">
-    <h2 class="modal-exercises__name">${name}</h2>
-    <div class="modal-exercises__rating">${ratingStarsHTML}</div>
-    <div class="modal-exercises__block">
-      <ul class="modal-exercises__list">
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Target</h3>
-          <p class="modal-exercises__text">${target}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Body Part</h3>
-          <p class="modal-exercises__text">${bodyPart}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Equipment</h3>
-          <p class="modal-exercises__text">${equipment}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Popular</h3>
-          <p class="modal-exercises__text">${popularity}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Burned calories</h3>
-          <p class="modal-exercises__text">${burnedCalories}/${time}</p>
-        </li>
-      </ul>
-      <p class="modal-exercises__description">${description}</p>
-    </div>
-    <div class="modal-exercises__btn-container">
+    />
+
+    <div class="modal-exercises__card">
+      <h2 class="modal-exercises__name">${name}</h2>
+      <div class="modal-exercises__rating">${ratingStarsHTML}</div>
+
+        <div class="modal-exercises__block">
+          <ul class="modal-exercises__list">
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Target</h3>
+              <p class="modal-exercises__text">${target}</p>
+            </li>
+
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Body Part</h3>
+              <p class="modal-exercises__text">${bodyPart}</p>
+            </li>
+
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Equipment</h3>
+              <p class="modal-exercises__text">${equipment}</p>
+            </li>
+
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Popular</h3>
+              <p class="modal-exercises__text">${popularity}</p>
+            </li>
+            
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Burned Calories</h3>
+              <p class="modal-exercises__text">${burnedCalories}/${time}</p>
+            </li>
+          </ul>
+          <p class="modal-exercises__description">${description}</p>
+        </div>
+
+      <div class="modal-exercises__btn-container">
         <button class="modal-exercises__btn-favorites modal-exercises__btn">
             Add to favorites
             <svg class="btn-favorites__icon">
               <use href="./img/sprite.svg#icon-favorites"></use>
             </svg>
           </button>
-          <button class="modal-exercises__btn-rating modal-exercises__btn">Give a rating</button>
+        <button class="modal-exercises__btn-rating modal-exercises__btn">Give a rating</button>
+      </div>
     </div>
   </div>
-</div>
 `;
 }
 
diff --git a/src/partials/03-exercises.html b/src/partials/03-exercises.html
index a5fd652..cfd7622 100644
--- a/src/partials/03-exercises.html
+++ b/src/partials/03-exercises.html
@@ -2,38 +2,6 @@
 <section class="section">
   <div class="exersices__container container">
     <h2 class="exersices__title">Exercises</h2>
-
-    <form class="search-container">
-      <input
-        type="text"
-        id="search-input"
-        name="searchQuery"
-        placeholder="Search"
-      />
-      <a href="#" id="search-button"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
-          viewBox="0 0 18 18"
-          fill="none"
-        >
-          <path
-            d="M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z"
-            stroke="#242424"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M15.7498 15.75L12.4873 12.4875"
-            stroke="#242424"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          /></svg
-      ></a>
-    </form>
     <ul class="exersices__list">
       <li>
         <button class="exercises__btn btnFilters active" type="button">
@@ -54,9 +22,47 @@ <h2 class="exersices__title">Exercises</h2>
   </div>
 
   <div class="quote-filters__container container">
-    <div class="quote__container">
-      <h3 class="quote__title">Quote of the day</h3>
-      <div class="quote__wrapper js-quote"></div>
+    <div class="aside__container">
+      <ul class="aside__container-list">
+        <li>
+          <div class="quote__container">
+            <div class="aside-svg__circle">
+              <svg class="aside__svg" width="20" height="20">
+                <use href="../img/sprite.svg#icon-running-stick-figure"></use>
+              </svg>
+            </div>
+            <h3 class="quote__title">Quote of the day</h3>
+            <svg class="aside__commas-svg">
+              <use href="../img/sprite.svg#icon-inverted-commas"></use>
+            </svg>
+            <div class="aside-quote__wrapper js-quote"></div>
+          </div>
+        </li>
+        <li>
+          <div class="aside__img"></div>
+        </li>
+        <li>
+          <div class="aside__white-card">
+            <div class="white-card-svg__wrapper">
+              <svg class="aside__white-card-svg" width="20" height="20">
+                <use href="../img/sprite.svg#icon-fluent_food"></use>
+              </svg>
+            </div>
+
+            <h3 class="aside__white-card-title">110 min</h3>
+            <h4 class="aside__white-card-subtitle">Daily norm of sports</h4>
+            <p class="aside__white-card-text">
+              The World Health Organization recommends at least 150 minutes of
+              moderate-intensity aerobic physical activity throughout the week
+              for adults aged 18-64. However, what happens if we adjust that
+              number to 110 minutes every day? While it might seem like a high
+              number to hit, dedicating 110 minutes daily to sporting activities
+              may offer unparalleled benefits to physical health, mental
+              well-being, and overall quality of life.
+            </p>
+          </div>
+        </li>
+      </ul>
     </div>
 
     <div class="filters__container">