diff --git a/src/css/favourites.css b/src/css/favourites.css
index 33b7434..4b0fa2e 100644
--- a/src/css/favourites.css
+++ b/src/css/favourites.css
@@ -1,24 +1,6 @@
 body {
   background-color: var(--primary-white-color);
 }
-/* img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-} */
-
-/* .visually-hidden {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  white-space: nowrap;
-  clip-path: inset(100%);
-} */
 .favor-container {
   padding-top: 80px;
   padding-bottom: 80px;
@@ -46,6 +28,7 @@ body {
   position: relative;
   background-color: rgba(244, 244, 244, 0.2);
   min-width: 32px;
+  width: 32px;
   height: 32px;
   border-radius: 50%;
 }
@@ -80,7 +63,7 @@ body {
 /**                          dailynorm */
 .favor-dailynorm {
   border-radius: 20px;
-  background: #fff;
+  background-color: #fff;
   padding: 20px;
   margin-bottom: 20px;
 }
@@ -101,12 +84,110 @@ body {
   overflow: hidden;
 }
 /**                          exercises */
-.noitems {
+.favor-exercises {
+  padding-top: 40px;
+}
+.favor-exercises-noitems {
   padding: 40px 8px 0 9px;
 }
-.favor-exercises p {
+.favor-exercises-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.favor-exercises-list p {
   text-align: center;
 }
+/**                          exercises-card */
+.favor-exercises-card {
+  width: 335px;
+  height: 141px;
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 16px;
+}
+.favor-exercises-head {
+  display: flex;
+  gap: 8px;
+  /* justify-content: center; */
+  align-items: center;
+}
+.favor-exercises-head svg {
+  fill: var(--primary-black-color);
+}
+.favor-exercises-name {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding-top: 27px;
+  padding-bottom: 8px;
+}
+.favor-exercises-icon {
+  position: relative;
+  background-color: var(--primary-black-color);
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+.favor-exercises-icon svg {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  top: 50%;
+  fill: var(--primary-white-color);
+}
+.favor-exercises-name h3 {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.33;
+  text-transform: capitalize;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.favor-exercises-info {
+  display: flex;
+  gap: 10px;
+}
+.favor-exercises-item {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--primary-black-color);
+  letter-spacing: -0.03em;
+  text-transform: capitalize;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.favor-exercises-item span {
+  color: rgba(36, 36, 36, 0.4);
+  margin-right: 2px;
+}
+.favor-exercises-calories {
+  max-width: 144px;
+}
+.favor-exercises-body {
+  max-width: 83px;
+}
+.favor-exercises-target {
+  width: 56px;
+}
+.favor-workout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 75px;
+  height: 24px;
+  border-radius: 15px;
+  border: 1px solid var(--primary-black-color);
+}
+.favor-workout p {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  text-transform: uppercase;
+}
 /**                          @media */
 @media screen and (min-width: 768px) {
   .favor-container {
@@ -167,13 +248,30 @@ body {
     height: 141px;
   }
   /**                          exercises */
-  .noitems {
+  .favor-exercises {
+    padding-top: 64px;
+  }
+  .favor-exercises-noitems {
     padding: 132px 75px 0;
   }
-  .favor-exercises p {
+  .favor-exercises-list {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 32px 16px;
+  }
+  .favor-exercises-text {
     font-size: 18px;
     line-height: 1.33;
   }
+  .favor-exercises-card {
+    width: 344px;
+  }
+  .favor-exercises-body {
+    max-width: 88px;
+  }
+  .favor-exercises-target {
+    width: 60px;
+  }
 }
 @media screen and (min-width: 1440px) {
   .favor-container {
@@ -183,7 +281,7 @@ body {
   .favor-title {
     margin-bottom: 44px;
   }
-  .yyy {
+  .favor-quote {
     display: flex;
     gap: 32px;
   }
@@ -199,10 +297,45 @@ body {
     width: 239px;
   }
   .favor-exercises {
-    width: 850px;
+    min-width: 850px;
     height: 487px;
+    padding-top: 0;
+    overflow: auto;
   }
-  .noitems {
+  .favor-exercises-noitems {
     padding: 102px 148px 0;
   }
+  .favor-exercises-card {
+    width: 405px;
+  }
+  .favor-exercises-info {
+    gap: 16px;
+  }
+  .favor-exercises-body {
+    max-width: 123px;
+  }
+  .favor-exercises-target {
+    width: 74px;
+  }
+}
+
+.pag-list {
+  display: flex;
+  gap: 8px;
+  padding-top: 32px;
+  justify-content: center;
+  align-items: center;
+}
+.pag-btn {
+  text-align: center;
+  cursor: pointer;
+  background-color: transparent;
+  color: #d4d4d4;
+}
+.pag-btn-active {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid var(--primary-black-color);
+  color: var(--primary-black-color);
 }
diff --git a/src/js/api-service/favourites-api.js b/src/js/api-service/favourites-api.js
index e69de29..c4c2ab1 100644
--- a/src/js/api-service/favourites-api.js
+++ b/src/js/api-service/favourites-api.js
@@ -0,0 +1,40 @@
+import { API_PROPS } from '../api/api';
+import axios from 'axios';
+import { Notify } from 'notiflix/build/notiflix-notify-aio';
+
+const { BASE_URL, QUOTE_ENDPOINT } = API_PROPS;
+
+async function getQuote() {
+  const resp = await axios(`${BASE_URL}${QUOTE_ENDPOINT}`);
+  return resp.data;
+}
+
+const save = (key, value) => {
+  try {
+    const serializedState = JSON.stringify(value);
+    localStorage.setItem(key, serializedState);
+  } catch (error) {
+    Notify.failure('Save data error: ', error.message);
+  }
+};
+
+const load = key => {
+  try {
+    const serializedState = localStorage.getItem(key);
+    return serializedState === null ? undefined : JSON.parse(serializedState);
+  } catch (error) {
+    Notify.failure('Load data error: ', error.message);
+  }
+};
+
+// Test favor exercises
+async function getExercises() {
+  const resp = await axios(
+    'https://your-energy.b.goit.study/api/exercises?page=1&limit=26'
+  );
+  return resp.data;
+}
+
+// Test favor exercises
+
+export { getQuote, save, load, getExercises };
diff --git a/src/js/favourites.js b/src/js/favourites.js
index e69de29..d7ebc05 100644
--- a/src/js/favourites.js
+++ b/src/js/favourites.js
@@ -0,0 +1,109 @@
+import { Notify } from 'notiflix/build/notiflix-notify-aio';
+import {
+  createMarkupExercises,
+  createMarkupPagination,
+} from './templates/favourites-markup';
+import {
+  getQuote,
+  save,
+  load,
+  getExercises,
+} from './api-service/favourites-api';
+
+const refs = {
+  quote: document.querySelector('.favor-quote-wrap p'),
+  quoteAuthor: document.querySelector('.favor-quote-wrap h4'),
+  exercises: document.querySelector('.favor-exercises-list'),
+  noExercises: document.querySelector('.favor-exercises'),
+  pagination: document.querySelector('.pag-list'),
+};
+
+let pagination;
+let paginationPages = 1;
+let currentPage = 0;
+let page;
+
+window.addEventListener('load', takeScreenParams);
+window.addEventListener('resize', takeScreenParams);
+
+function takeScreenParams() {
+  pagination = 8;
+  if (window.innerWidth >= 768 && window.innerWidth < 1440) {
+    pagination = 10;
+  } else if (window.innerWidth >= 1440) {
+    pagination = 0;
+  }
+  getFavorExercises();
+}
+
+async function getCurrentQuote() {
+  try {
+    const quote = load('quote-current-day');
+    const date = new Date().toDateString();
+    if (quote && date === quote.quoteDate) {
+      refs.quote.textContent = quote.quote;
+      refs.quoteAuthor.textContent = quote.author;
+    } else {
+      const currentQuote = await getQuote();
+      currentQuote.quoteDate = date;
+      refs.quote.textContent = currentQuote.quote;
+      refs.quoteAuthor.textContent = currentQuote.author;
+      save('quote-current-day', currentQuote);
+    }
+  } catch (err) {
+    Notify.failure(`Oops! Something went wrong! Try reloading the page!`);
+  }
+}
+
+function getFavorExercises() {
+  try {
+    const favorExercises = load('favor-exercises');
+    if (favorExercises) {
+      refs.noExercises.classList.remove('favor-exercises-noitems');
+      const totalExercises = favorExercises.length;
+      if (pagination === 0 || totalExercises <= pagination) {
+        page = favorExercises;
+        refs.pagination.innerHTML = createMarkupPagination('');
+      } else {
+        paginationPages = Math.ceil(totalExercises / pagination);
+        refs.pagination.innerHTML = createMarkupPagination(paginationPages);
+        setCurrentPage(currentPage);
+        page = favorExercises.slice(
+          0 + currentPage * pagination,
+          pagination * (1 + currentPage)
+        );
+      }
+      refs.exercises.innerHTML = createMarkupExercises(page);
+    } else {
+      refs.noExercises.classList.add('favor-exercises-noitems');
+      //   Notify.failure(`There are no exercises in your favorites`);
+    }
+  } catch (err) {
+    // Notify.failure(`Oops012! Something went wrong! Try reloading the page!`);
+  }
+}
+
+function setCurrentPage(num) {
+  let currentPage = num + 1;
+  const activeBtn = document.getElementById(`p-${currentPage}`);
+  activeBtn.classList.add('pag-btn-active');
+}
+
+getCurrentQuote();
+
+// Test favor exercises
+async function getManyExercises() {
+  const { results } = await getExercises();
+  const dataExers = results.map(
+    ({ _id, name, burnedCalories, bodyPart, target }) => ({
+      _id: `${_id}`,
+      name: `${name}`,
+      burnedCalories: `${burnedCalories}`,
+      bodyPart: `${bodyPart}`,
+      target: `${target}`,
+    })
+  );
+  save('favor-exercises', dataExers);
+}
+getManyExercises();
+// Test favor exercises
diff --git a/src/js/templates/favourites-markup.js b/src/js/templates/favourites-markup.js
index e69de29..10a14fd 100644
--- a/src/js/templates/favourites-markup.js
+++ b/src/js/templates/favourites-markup.js
@@ -0,0 +1,51 @@
+function createMarkupExercises(arr) {
+  return arr
+    .map(
+      ({ name, burnedCalories, bodyPart, target }) =>
+        `<li><div class="favor-exercises-card">
+      <div class="favor-exercises-head">
+        <div class="favor-workout"><p>Workout</p></div>
+        <button type="button">
+          <svg width="16" height="16">
+            <use href="./img/sport-sprite.svg#icon-trash"></use>
+          </svg>
+        </button>
+        <button type="button">Start</button>
+      </div>
+      <div class="favor-exercises-name">
+        <div class="favor-exercises-icon">
+          <svg width="18" height="20">
+            <use href="./img/sport-sprite.svg#icon-running-stick"></use>
+          </svg>
+        </div>
+        <h3>${name}</h3>
+      </div>
+      <ul class="favor-exercises-info">
+        <li class="favor-exercises-item favor-exercises-calories">
+          <span>Burned calories:</span>${burnedCalories} / 3 min
+        </li>
+        <li class="favor-exercises-item favor-exercises-body"><span>Body part:</span>${bodyPart}</li>
+        <li class="favor-exercises-item favor-exercises-target"><span>Target:</span>${target}</li>
+      </ul>
+    </div></li>`
+    )
+    .join('');
+}
+
+function createMarkupPagination(num) {
+  let markup = '';
+  if (num === 1) {
+    markup = '';
+  } else {
+    for (let i = 1; i <= num; i += 1) {
+      markup =
+        markup +
+        `<li class="pag-page">
+          <button class="pag-btn" type="button" id="p-${i}">${i}</button>
+        </li>`;
+    }
+  }
+  return markup;
+}
+
+export { createMarkupExercises, createMarkupPagination };
diff --git a/src/partials/favourites.html b/src/partials/favourites.html
index ca01444..6feb02f 100644
--- a/src/partials/favourites.html
+++ b/src/partials/favourites.html
@@ -1,7 +1,7 @@
 <section>
   <div class="container favor-container">
     <h2 class="favor-title">Favorites</h2>
-    <div class="yyy">
+    <div class="favor-quote">
       <div>
         <div class="favor-quote-container">
           <div class="favor-quote-icon">
@@ -11,13 +11,8 @@ <h2 class="favor-title">Favorites</h2>
           </div>
           <div class="favor-quote-wrap">
             <h3>Quote of the day</h3>
-            <p>
-              A lot of times I find that people who are blessed with the most
-              talent don't ever develop that attitude, and the ones who aren't
-              blessed in that way are the most competitive and have the biggest
-              heart.
-            </p>
-            <h4>Tom Brady</h4>
+            <p></p>
+            <h4></h4>
             <svg width="20" height="20">
               <use href="./img/sport-sprite.svg#icon-quotes"></use>
             </svg>
@@ -63,13 +58,16 @@ <h3>110 min</h3>
           </div>
         </div>
       </div>
-      <div class="favor-exercises noitems">
-        <p>
-          It appears that you haven't added any exercises to your favorites yet.
-          To get started, you can add exercises that you like to your favorites
-          for easier access in the future.
-        </p>
+      <div class="favor-exercises">
+        <ul class="favor-exercises-list">
+          <p class="favor-exercises-text">
+            It appears that you haven't added any exercises to your favorites
+            yet. To get started, you can add exercises that you like to your
+            favorites for easier access in the future.
+          </p>
+        </ul>
       </div>
+      <ul class="pag-list"></ul>
     </div>
   </div>
 </section>