diff --git a/src/components/cards/article-preview/article-preview.module.scss b/src/components/cards/article-preview/article-preview.module.scss
index cc14cfd..2153df1 100644
--- a/src/components/cards/article-preview/article-preview.module.scss
+++ b/src/components/cards/article-preview/article-preview.module.scss
@@ -46,6 +46,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      padding: 16px;
+    }
+  }
+
   &--news,
   &--fullPageNews {
     max-width: 1208px;
@@ -79,6 +85,10 @@ $border: 1px solid
       row-gap: 16px;
     }
   }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    row-gap: 12px;
+  }
 }
 
 .imageWrapper {
@@ -157,6 +167,30 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      height: calc-fluid-element(
+        180,
+        320,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      > button {
+        &:last-child {
+          top: 7px;
+          right: 7px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $media-desktop-small) {
+      height: 180px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     height: 292px;
@@ -243,6 +277,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      min-height: 148px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     min-height: 243px;
@@ -281,6 +321,15 @@ $border: 1px solid
   @media screen and (max-width: calc($media-tablet-small - 1px)) {
     font-size: $font-size-text-medium;
   }
+
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      font-size: $font-size-text-medium;
+      font-weight: 600;
+      line-height: $font-line-height-text-medium;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
 }
 
 .text {
@@ -346,6 +395,15 @@ $border: 1px solid
     margin-top: 16px;
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      height: 64px;
+      font-size: $font-size-text-small;
+      line-height: $font-line-height-text-small;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
+
   &--fullPageArticle {
     @media screen and (max-width: $media-tablet-large) {
       height: 48px;
diff --git a/src/components/cards/article-preview/article-preview.tsx b/src/components/cards/article-preview/article-preview.tsx
index fe23b04..0131fdd 100644
--- a/src/components/cards/article-preview/article-preview.tsx
+++ b/src/components/cards/article-preview/article-preview.tsx
@@ -25,7 +25,13 @@ interface ICardArticlePreviewProps {
     } | null;
     views_count: number;
   };
-  type: 'media' | 'news' | 'fullPageArticle' | 'fullPageNews' | 'default';
+  type:
+    | 'media'
+    | 'news'
+    | 'favorites'
+    | 'fullPageArticle'
+    | 'fullPageNews'
+    | 'default';
   hasFavoriteButton?: boolean;
   extraClass?: string;
   route: string;
@@ -84,7 +90,14 @@ const CardArticlePreview: FC<ICardArticlePreviewProps> = ({
               )}
             >
               <div className={styles.title}>
-                <h3 className={styles.heading}>{title}</h3>
+                <h3
+                  className={classNames(
+                    styles.heading,
+                    styles[`heading--${type}`]
+                  )}
+                >
+                  {title}
+                </h3>
                 <p className={classNames(styles.text, styles[`text--${type}`])}>
                   {converMdToHTML(annotation, true)}
                 </p>
diff --git a/src/components/sidebar/sidebar.module.scss b/src/components/sidebar/sidebar.module.scss
index 1f975f9..1a0d54e 100644
--- a/src/components/sidebar/sidebar.module.scss
+++ b/src/components/sidebar/sidebar.module.scss
@@ -85,19 +85,16 @@
     letter-spacing: $font-letter-spacing-main;
     padding-bottom: 16px;
 
-    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    @media screen and (max-width: $media-tablet-large) {
+      min-width: 100px;
+      padding-bottom: 0;
+      text-align: center;
       font-size: calc-fluid-element(
         calc($font-size-text-small-extra-extra * 10),
         calc($font-size-heading-3 * 10),
         $media-tablet-small,
         $media-desktop-small
       );
-    }
-
-    @media screen and (max-width: $media-tablet-large) {
-      min-width: 100px;
-      padding-bottom: 0;
-      text-align: center;
       font-weight: 500;
       letter-spacing: $font-letter-spacing-tablet;
     }
diff --git a/src/components/user-profile/components/personal-data/personal-data.module.scss b/src/components/user-profile/components/personal-data/personal-data.module.scss
index d2ecddb..b9f9959 100644
--- a/src/components/user-profile/components/personal-data/personal-data.module.scss
+++ b/src/components/user-profile/components/personal-data/personal-data.module.scss
@@ -14,7 +14,6 @@
 
     > button {
       max-width: 224px;
-      min-width: max-content;
     }
 
     @media screen and (max-width: $media-tablet-large) {
@@ -26,7 +25,9 @@
     @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
       padding: 0;
       border: none;
+    }
 
+    @media screen and (max-width: calc($media-mobile-small - 1px)) {
       > button {
         max-width: 100%;
         width: 100%;
diff --git a/src/pages/creating-an-article/creating-an-article.tsx b/src/pages/creating-an-article/creating-an-article.tsx
index d39f7bf..7317f46 100644
--- a/src/pages/creating-an-article/creating-an-article.tsx
+++ b/src/pages/creating-an-article/creating-an-article.tsx
@@ -2,14 +2,12 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import { useWindowDimensions } from 'hooks/useWindowDimensions';
-import { useToggleButtonVisible } from 'hooks/useToggleButtonVisible';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import TextArea from 'shared/text-area/text-area';
 import { FileInput } from 'shared/file-input/file-input';
 import Button from 'shared/buttons/button/button';
 import ButtonWithIconTwo from 'shared/buttons/button-with-icon-two/button-with-icon-two';
-import { ButtonTopNavigation } from 'components/buttons/button-top-navigation/button-top-navigation';
 import { Icon } from 'shared/icons';
 import {
   schemaArticleTitle,
@@ -38,23 +36,12 @@ export const CreatingAnArticlePage = () => {
 
   const inputMinHeight = isSmallScreenDevice ? 48 : 64;
 
-  const { isButtonToTopVisible, toggleButtonVisible } =
-    useToggleButtonVisible();
-
   const [response, setResponse] = useState<undefined | boolean>(undefined);
   const [selectedImage, setSelectedImage] = useState<null | Blob>(null);
   const [selectedImagePreview, setSelectedImagePreview] = useState('');
   const [hasSelectedImageSizeError, setHasSelectedImageSizeError] =
     useState(false);
 
-  useEffect(() => {
-    window.addEventListener('scroll', toggleButtonVisible, false);
-
-    return () => {
-      window.removeEventListener('scroll', toggleButtonVisible, false);
-    };
-  }, []); // eslint-disable-line
-
   useEffect(() => {
     if (!selectedImage) {
       return setSelectedImagePreview('');
@@ -338,7 +325,6 @@ export const CreatingAnArticlePage = () => {
       <div className={styles.wrapper}>
         <h3 className={styles.heading}>Публикация статьи</h3>
         {renderContent()}
-        {isSmallScreenDevice && isButtonToTopVisible && <ButtonTopNavigation />}
       </div>
     </section>
   );
diff --git a/src/pages/favorites/favorites.module.scss b/src/pages/favorites/favorites.module.scss
index 75f1886..7efaabf 100644
--- a/src/pages/favorites/favorites.module.scss
+++ b/src/pages/favorites/favorites.module.scss
@@ -1,9 +1,19 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .section {
   width: 100%;
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    width: 92.45%;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    width: 100%;
+  }
 }
 
 .emptyGallery {
@@ -14,6 +24,30 @@
 .heading {
   @extend %heading-size-medium;
   margin-bottom: 48px;
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-heading-3 * 10),
+      calc($font-size-heading-2 * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    margin-bottom: 32px;
+    font-weight: 700;
+    line-height: $font-line-height-heading-3;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  @media screen and (max-width: $media-tablet-small) {
+    font-size: $font-size-heading-3;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    margin-bottom: 24px;
+  }
 }
 
 .gallery {
@@ -21,15 +55,73 @@
   grid-template-columns: repeat(auto-fill, 438px);
   justify-content: space-around;
   gap: 24px;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    grid-template-columns: repeat(
+      auto-fill,
+      calc-fluid-element(
+        349px,
+        438px,
+        $media-desktop-small,
+        $media-desktop-large
+      )
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    justify-content: space-between;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    grid-template-columns: repeat(auto-fill, 348px);
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    grid-template-columns: repeat(auto-fill, 335px);
+  }
+}
+
+.card {
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    padding: 16px;
+  }
 }
 
 .info {
-  margin-top: 56px;
+  max-width: 900px;
   @extend %text-size-large;
   color: $color-neutral-500;
 
   > p:nth-child(2) {
     margin-top: 40px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      max-width: 67%;
+      margin-top: 24px;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      max-width: 100%;
+      margin-top: 20px;
+    }
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-text-medium * 10),
+      calc($font-size-text-large * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    line-height: $font-line-height-text-medium;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  @media screen and (max-width: $media-tablet-small) {
+    font-size: $font-size-text-medium;
   }
 }
 
@@ -38,6 +130,14 @@
   align-items: center;
   column-gap: 32px;
   margin: 32px 0 56px;
+
+  @media screen and (max-width: $media-tablet-large) {
+    margin: 20px 0 24px;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    margin-top: 17px;
+  }
 }
 
 .bookmarkIcon {
@@ -59,3 +159,9 @@
     }
   }
 }
+
+.button {
+  @media screen and (max-width: $media-tablet-large) {
+    min-width: 335px;
+  }
+}
diff --git a/src/pages/favorites/favorites.tsx b/src/pages/favorites/favorites.tsx
index 505c0c2..a798fa4 100644
--- a/src/pages/favorites/favorites.tsx
+++ b/src/pages/favorites/favorites.tsx
@@ -1,27 +1,27 @@
-import { FC, ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import classNames from 'classnames';
 import CardArticlePreview from 'components/cards/article-preview/article-preview';
 import { Icon } from 'shared/icons';
 import Button from 'shared/buttons/button/button';
 import routes from 'utils/routes';
 import testArticles from 'utils/data/tests/articles';
+import { tabletAlbumOrientation } from 'utils/constants';
 import styles from './favorites.module.scss';
 
-export const FavoritesPage: FC = (): ReactElement => {
+export const FavoritesPage = () => {
   const navigate = useNavigate();
 
+  const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
+
   const emptyGallery = (
     <>
       <div className={styles.info}>
         <p>Сейчас у вас ничего нет в &laquo;Избранном&raquo;.</p>
         <p>
           Чтобы добавить понравившуюся статью в&nbsp;&laquo;Избранное&raquo;,
-          отметьте её&nbsp;закладкой.
-        </p>
-        <p>
-          Это&nbsp;можно сделать как со&nbsp;страницы статьи, так
-          и&nbsp;из&nbsp;ленты статей.
+          отметьте её&nbsp;закладкой. Это&nbsp;можно сделать как
+          со&nbsp;страницы статьи, так и&nbsp;из&nbsp;ленты статей.
         </p>
       </div>
       <div className={styles.tip}>
@@ -34,7 +34,9 @@ export const FavoritesPage: FC = (): ReactElement => {
         </div>
       </div>
       <Button
+        extraClass={styles.button}
         label="Перейти к статьям"
+        size={isSmallScreenDevice ? 'small' : 'medium'}
         onClick={() => navigate(routes.articles.route)}
       />
     </>
@@ -53,7 +55,7 @@ export const FavoritesPage: FC = (): ReactElement => {
         author: card.author,
         views_count: card.views_count,
       }}
-      type="default"
+      type="favorites"
       route="test"
     />
   ));
@@ -69,6 +71,7 @@ export const FavoritesPage: FC = (): ReactElement => {
       <h3 className={styles.heading}>Избранное</h3>
       {(!isNotEmptyGallery && <div className={styles.gallery}>{cards}</div>) ||
         emptyGallery}
+      {/* TODO: добавить кнопку загрузки новых статей (после окончания логики избранных) */}
     </section>
   );
 };
diff --git a/src/pages/profile/profile-page.module.scss b/src/pages/profile/profile-page.module.scss
index 47d5c99..27229f9 100644
--- a/src/pages/profile/profile-page.module.scss
+++ b/src/pages/profile/profile-page.module.scss
@@ -49,10 +49,24 @@ $indent-mobile: calc-fluid-element(
     grid-template-columns: 1fr;
     row-gap: 35px;
     padding: 104px 0 32px;
+
+    > button {
+      &:last-child {
+        position: fixed;
+        bottom: 36px;
+        right: $indent-tablet;
+      }
+    }
   }
 
   @media screen and (max-width: calc($media-tablet-small - 1px)) {
     margin: 0 $indent-mobile;
+
+    > button {
+      &:last-child {
+        right: $indent-mobile;
+      }
+    }
   }
 
   &--publication {
diff --git a/src/pages/profile/profile-page.tsx b/src/pages/profile/profile-page.tsx
index 1a0a7fb..1bdb8ac 100644
--- a/src/pages/profile/profile-page.tsx
+++ b/src/pages/profile/profile-page.tsx
@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useLocation, Outlet, useOutletContext } from 'react-router-dom';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import { useScrollToTop } from 'hooks/useScrollToTop';
+import { useToggleButtonVisible } from 'hooks/useToggleButtonVisible';
 import classNames from 'classnames';
 import Footer from 'components/footer/footer';
 import { Header } from 'components/header';
 import Sidebar from 'components/sidebar/sidebar';
-import { useWindowDimensions } from 'hooks/useWindowDimensions';
+import { ButtonTopNavigation } from 'components/buttons/button-top-navigation/button-top-navigation';
 import { tabletAlbumOrientation } from 'utils/constants';
 import routes from 'utils/routes';
 import styles from './profile-page.module.scss';
@@ -17,12 +19,26 @@ type TContextType = {
 
 function ProfilePage() {
   const { pathname } = useLocation();
+  const isRouteFavorites = pathname.endsWith(
+    `${routes.profile}/${routes.favorites}`
+  );
   const isRouteCreatingAnArticle = pathname.endsWith(
     `${routes.profile}/${routes.publication}`
   );
   const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
   const [isProfileTab, setIsProfileTab] = useState(true);
 
+  const { isButtonToTopVisible, toggleButtonVisible } =
+    useToggleButtonVisible();
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleButtonVisible, false);
+
+    return () => {
+      window.removeEventListener('scroll', toggleButtonVisible, false);
+    };
+  }, []); // eslint-disable-line
+
   useScrollToTop();
 
   return (
@@ -30,11 +46,13 @@ function ProfilePage() {
       <Header />
       <main
         className={classNames(styles.wrapper, {
+          [styles[`wrapper--favorites`]]: isRouteFavorites,
           [styles[`wrapper--publication`]]: isRouteCreatingAnArticle,
         })}
       >
         {!isProfileTab && isSmallScreenDevice ? null : <Sidebar />}
         <Outlet context={{ isProfileTab, setIsProfileTab }} />
+        {isSmallScreenDevice && isButtonToTopVisible && <ButtonTopNavigation />}
       </main>
       <Footer />
     </>
diff --git a/src/shared/file-input/file-input.module.scss b/src/shared/file-input/file-input.module.scss
index 8e7a3a6..ba635c9 100644
--- a/src/shared/file-input/file-input.module.scss
+++ b/src/shared/file-input/file-input.module.scss
@@ -15,6 +15,8 @@
 .file {
   position: absolute;
   z-index: $zindex-overlay-filters-modal;
+  width: 0;
+  height: 0;
   opacity: 0;
 }