diff --git a/src/assets/styles/abstracts/variables/colors.scss b/src/assets/styles/abstracts/variables/colors.scss
index 3f8aea5..81d05af 100644
--- a/src/assets/styles/abstracts/variables/colors.scss
+++ b/src/assets/styles/abstracts/variables/colors.scss
@@ -3,6 +3,7 @@ $color-neutral-700: #484554;
 $color-neutral-600: #666372;
 $color-neutral-500: #838090;
 $color-neutral-400: #ada9bb;
+$color-neutral-350: #bdbdbd;
 $color-neutral-300: #bbb;
 $color-neutral-150: #ececec;
 $color-neutral-100: #f4f4f4;
diff --git a/src/assets/styles/abstracts/variables/fonts.scss b/src/assets/styles/abstracts/variables/fonts.scss
index 789630e..ed21b22 100644
--- a/src/assets/styles/abstracts/variables/fonts.scss
+++ b/src/assets/styles/abstracts/variables/fonts.scss
@@ -12,6 +12,7 @@ $font-size-text-medium-small: 1.6rem;
 $font-size-text-medium-additional: 1.6rem;
 $font-size-text-small: 1.4rem;
 $font-size-text-small-extra: 1.2rem;
+$font-size-text-small-extra-extra: 0.9rem;
 $font-size-mobile-text-medium: 1.6rem;
 
 $font-line-height-huge: calc(8rem / $font-size-huge * 100%);
@@ -40,3 +41,4 @@ $font-line-height-mobile-text-medium: calc(
 );
 
 $font-letter-spacing-main: 0.4px;
+$font-letter-spacing-tablet: 0.2px;
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 551f925..1a0d54e 100644
--- a/src/components/sidebar/sidebar.module.scss
+++ b/src/components/sidebar/sidebar.module.scss
@@ -1,7 +1,9 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/animations';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .sidebar {
   display: flex;
@@ -17,32 +19,89 @@
     height: calc(100vh - 56px); // height of button with indents
   }
 
+  &_wrapper {
+    @media screen and (max-width: $media-tablet-large) {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   &_header {
     display: flex;
     align-items: center;
     gap: 24px;
     padding-bottom: 56px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      padding-bottom: 24px;
+    }
+  }
+
+  &_info {
+    max-width: 245px;
   }
 
   &_title {
     @extend %heading-size-small;
     letter-spacing: $font-letter-spacing-main;
     padding-bottom: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-heading-3;
+    }
   }
 
   &_subtitle {
-    @extend %text-article;
+    @extend %text-description;
     color: $color-neutral-500;
   }
 
+  &_nav {
+    @media screen and (max-width: $media-tablet-large) {
+      order: 4;
+    }
+  }
+
   &_list {
     padding-bottom: 40px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      display: flex;
+      column-gap: 24px;
+      padding-top: 30px;
+      padding-bottom: 0;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      column-gap: 16px;
+    }
   }
 
   &_list_item {
     @extend %heading-size-small;
     letter-spacing: $font-letter-spacing-main;
     padding-bottom: 16px;
+
+    @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
+      );
+      font-weight: 500;
+      letter-spacing: $font-letter-spacing-tablet;
+    }
+
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-text-small-extra-extra;
+    }
   }
 
   &_item {
@@ -52,6 +111,14 @@
     width: 100%;
     padding: 12px;
 
+    @media screen and (max-width: $media-tablet-large) {
+      padding-right: 7px;
+      padding-left: 7px;
+      border: 0.5px solid rgba($color: $color-neutral-350, $alpha: 0.36);
+      border-radius: 12px;
+      box-sizing: border-box;
+    }
+
     &_active {
       display: inline-block;
       width: 100%;
@@ -60,9 +127,19 @@
       background-color: $color-brand-primary-100;
       border-radius: 12px;
       padding: 12px;
+
+      @media screen and (max-width: $media-tablet-large) {
+        padding-right: 0;
+        padding-left: 0;
+        border: none;
+      }
     }
   }
 
+  &_subscribe {
+    order: 3;
+  }
+
   &_email {
     @extend %text-article;
     color: $color-neutral-600;
@@ -85,6 +162,10 @@
   &_border {
     margin: 32px 0;
     border-top: 1px solid rgba(189, 189, 189, 0.36);
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-top: 0;
+    }
   }
 
   &_logout {
@@ -110,5 +191,9 @@
     * {
       transition: $transition-button;
     }
+
+    @media screen and (max-width: $media-tablet-large) {
+      display: none;
+    }
   }
 }
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 2c35093..c70970c 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -106,7 +106,7 @@ function Sidebar() {
   return (
     <div className={styles.sidebar} ref={sidebarRef}>
       <div className={isButtonToTopVisible ? styles.sidebar_content : ''}>
-        <div>
+        <div className={styles.sidebar_wrapper}>
           <div className={styles.sidebar_header}>
             <Avatar
               user={
@@ -117,14 +117,14 @@ function Sidebar() {
                 }
               }
             />
-            <div>
+            <div className={styles.sidebar_info}>
               <h2
                 className={styles.sidebar_title}
               >{`${user?.first_name} ${user?.last_name}`}</h2>
               <p className={styles.sidebar_subtitle}>{handleUserRole()}</p>
             </div>
           </div>
-          <nav>
+          <nav className={styles.sidebar_nav}>
             <ul className={styles.sidebar_list}>
               <li className={styles.sidebar_list_item}>
                 <NavLink
@@ -167,15 +167,19 @@ function Sidebar() {
               </li>
             </ul>
           </nav>
-          <p className={styles.sidebar_email}>Еженедельная рассылка на email</p>
-          <div className={styles.sidebar_mailingList}>
-            <ConsentCheckbox
-              id={nanoid()}
-              name="mailingList"
-              isChecked={hasSubscription}
-              onChange={handleUserSubscription}
-            />
-            <p className={styles.sidebar_label}>Подписаться на рассылку</p>
+          <div className={styles.sidebar_subscribe}>
+            <p className={styles.sidebar_email}>
+              Еженедельная рассылка на email
+            </p>
+            <div className={styles.sidebar_mailingList}>
+              <ConsentCheckbox
+                id={nanoid()}
+                name="mailingList"
+                isChecked={hasSubscription}
+                onChange={handleUserSubscription}
+              />
+              <p className={styles.sidebar_label}>Подписаться на рассылку</p>
+            </div>
           </div>
           <div className={styles.sidebar_border} />
           <button
diff --git a/src/components/user-profile/components/password-changing/password-changing.module.scss b/src/components/user-profile/components/password-changing/password-changing.module.scss
index d0a4f0d..d9b2ccc 100644
--- a/src/components/user-profile/components/password-changing/password-changing.module.scss
+++ b/src/components/user-profile/components/password-changing/password-changing.module.scss
@@ -1,14 +1,22 @@
 @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';
 
 .userProfile {
   &_form {
-    margin-top: 20px;
+    margin-top: 17px;
     padding: 32px;
     box-sizing: border-box;
     border-radius: 16px;
     border: 1px solid rgba(189, 189, 189, 0.36);
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 14px;
+      padding: 0;
+      border: none;
+    }
   }
 
   &_title {
@@ -16,13 +24,30 @@
   }
 
   &_inputs {
-    margin: 32px 0 27px;
+    margin: 32px 0 28px;
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin: 26px 0 20px;
+    }
 
     > div {
       &:not(:first-child) {
         margin-top: 15px;
+
+        @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+          margin-top: 8px;
+        }
       }
     }
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-bottom: 22px;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 18px;
+      margin-bottom: 18px;
+    }
   }
 
   &_button {
diff --git a/src/components/user-profile/components/password-changing/password-changing.tsx b/src/components/user-profile/components/password-changing/password-changing.tsx
index 63bd917..f9555ef 100644
--- a/src/components/user-profile/components/password-changing/password-changing.tsx
+++ b/src/components/user-profile/components/password-changing/password-changing.tsx
@@ -1,5 +1,6 @@
 import { FC, Dispatch, SetStateAction, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import * as Yup from 'yup';
 import Input from 'shared/input/input';
 import Button from 'shared/buttons/button/button';
@@ -9,6 +10,7 @@ import {
   schemaPassword,
   schemaCurrentPassword,
 } from 'utils/data/validation/yup-schema';
+import { desktopMedium } from 'utils/constants';
 import styles from './password-changing.module.scss';
 
 interface IPasswordChangingProps {
@@ -22,6 +24,8 @@ export const PasswordChanging: FC<IPasswordChangingProps> = ({
     current_password: string[];
   }>(null);
 
+  const isMediumScreenDevice = useWindowDimensions() <= desktopMedium;
+
   const formik = useFormik({
     initialValues: {
       password_current: '',
@@ -97,6 +101,7 @@ export const PasswordChanging: FC<IPasswordChangingProps> = ({
           extraClass={styles.userProfile_button}
           type="submit"
           label="Сохранить новый пароль"
+          size={isMediumScreenDevice ? 'small' : 'medium'}
           hasSpinner
           spinnerSize="small"
           spinnerColor="white"
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 6bbb1bc..612ddb2 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
@@ -1,7 +1,9 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/animations';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .userProfile {
   &_form {
@@ -13,16 +15,63 @@
     > button {
       max-width: 224px;
     }
+
+    @media screen and (max-width: $media-tablet-large) {
+      > button {
+        min-width: 335px;
+      }
+    }
+
+    @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%;
+      }
+    }
   }
 
   &_title {
     @extend %heading-size-small;
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-text-medium * 10),
+        calc($font-size-heading-3 * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
+
+    @media screen and (max-width: calc($media-tablet-small - 1px)) {
+      font-size: $font-size-text-medium;
+    }
   }
 
   &_inputs {
-    margin: 28px 0 7px;
+    margin: 28px 0 6px;
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      margin: 20px 0 3px;
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-bottom: 6px;
+    }
 
     > div {
+      &:not(:first-child) {
+        margin-top: 5px;
+
+        @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+          margin-top: 0;
+        }
+      }
+
       > div {
         background-color: $color-neutral-100;
         border-color: $color-neutral-150;
@@ -41,10 +90,6 @@
           }
         }
       }
-
-      &:not(:first-child) {
-        margin-top: 4px;
-      }
     }
   }
 
diff --git a/src/components/user-profile/user-profile.module.scss b/src/components/user-profile/user-profile.module.scss
index 555f046..01390fe 100644
--- a/src/components/user-profile/user-profile.module.scss
+++ b/src/components/user-profile/user-profile.module.scss
@@ -1,8 +1,10 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/wrappers';
-@import 'assets/styles/abstracts/placeholders';
 @import 'assets/styles/abstracts/variables/animations';
+@import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .userProfile {
   max-width: $wrapper-articles-preview-desktop;
@@ -12,6 +14,22 @@
 
     &_password {
       max-width: $wrapper-profile-password-desktop;
+
+      > button {
+        @extend %text-size-medium-semibold;
+
+        > span {
+          column-gap: 7px;
+        }
+      }
+
+      @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+        max-width: 470px;
+      }
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      max-width: 472px;
     }
   }
 
@@ -20,6 +38,10 @@
     flex-direction: column;
     row-gap: 32px;
 
+    @media screen and (max-width: $media-tablet-large) {
+      row-gap: 24px;
+    }
+
     > button {
       width: max-content;
     }
@@ -31,10 +53,26 @@
     column-gap: 32px;
     @extend %text-size-large;
 
+    @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) {
+      letter-spacing: $font-letter-spacing-main;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small - 1px)) {
+      font-size: $font-size-text-medium;
+    }
+
     &_heading {
-      @extend %text-size-medium;
       font-weight: 400;
-      color: $color-neutral-700;
+      color: $color-neutral-500;
     }
   }
 
@@ -47,6 +85,25 @@
   &_title {
     @extend %heading-size-medium;
     margin-bottom: 32px;
+
+    @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: 28px;
+      font-weight: 600;
+      letter-spacing: $font-letter-spacing-main;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small - 1px)) {
+      font-size: $font-size-heading-3;
+    }
   }
 
   &_subtitle {
@@ -60,6 +117,14 @@
 
   &_box {
     margin-top: 38px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-top: 30px;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 32px;
+    }
   }
 
   &_button_password {
diff --git a/src/components/user-profile/user-profile.tsx b/src/components/user-profile/user-profile.tsx
index 28357df..97130ca 100644
--- a/src/components/user-profile/user-profile.tsx
+++ b/src/components/user-profile/user-profile.tsx
@@ -1,19 +1,18 @@
-import { useState } from 'react';
 import classNames from 'classnames';
 import { useAppSelector } from 'services/app/hooks';
 import { showUserPersonalData } from 'services/features/user/selectors';
 import { Icon } from 'shared/icons';
 import Button from 'shared/buttons/button/button';
+import { useProfileTab } from 'pages/profile/profile-page';
 import { PersonalData } from './components/personal-data/personal-data';
 import { PasswordChanging } from './components/password-changing/password-changing';
 import styles from './user-profile.module.scss';
 
 function UserProfile() {
-  const [isProfileTab, setIsProfileTab] = useState(true);
-
+  const { isProfileTab, setIsProfileTab } = useProfileTab();
   const { user } = useAppSelector(showUserPersonalData);
 
-  const handeUserRole = () => {
+  const handleUserRole = () => {
     switch (user?.role) {
       case 'admin':
         return (
@@ -49,12 +48,12 @@ function UserProfile() {
             <div className={styles.userProfile_general}>
               <div className={styles.userProfile_status}>
                 <h4 className={styles.userProfile_status_heading}>Статус</h4>
-                {handeUserRole()}
+                {handleUserRole()}
               </div>
               {user?.role === 'user' && (
                 <p className={styles.userProfile_quote}>
-                  Вы можете подтвердить свой статус врача, обратившись к
-                  администратору:{' '}
+                  Вы можете подтвердить свой статус врача, обратившись
+                  к&nbsp;администратору:{' '}
                   <a
                     className={styles.email}
                     href="mailto:admin@stethoscope-portal.ru"
diff --git a/src/pages/creating-an-article/components/response.module.scss b/src/pages/creating-an-article/components/response.module.scss
index acc06bd..01c53a1 100644
--- a/src/pages/creating-an-article/components/response.module.scss
+++ b/src/pages/creating-an-article/components/response.module.scss
@@ -1,17 +1,53 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/wrappers';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
 
 .content {
-  display: flex;
-  flex-direction: column;
-  row-gap: 54px;
   max-width: $wrapper-response-desktop;
   white-space: pre-wrap;
 
+  > *:not(:first-child) {
+    margin-top: 54px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin-top: 32px;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-top: 42px;
+    }
+  }
+
   button {
-    max-width: 370px;
+    min-width: 370px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      min-width: 335px;
+    }
+
+    @media screen and (max-width: calc($media-mobile-small - 1px)) {
+      min-width: auto;
+      max-width: 335px;
+    }
+  }
+}
+
+.contentMessage {
+  > *:not(:first-child) {
+    margin-top: 54px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      margin: 0;
+    }
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    display: flex;
+    align-items: center;
+    column-gap: 12px;
   }
 }
 
@@ -19,9 +55,38 @@
   @extend %text-size-large;
   line-height: 151%;
   color: $color-neutral-700;
+
+  @media screen and (max-width: $media-tablet-large) {
+    order: 2;
+  }
+
+  @media screen and (max-width: calc($media-tablet-large)) {
+    font-size: calc-fluid-element(
+      calc($font-size-text-medium-small * 10),
+      calc($font-size-text-large * 10),
+      $media-tablet-small,
+      $media-tablet-large
+    );
+    line-height: $font-line-height-text-medium-small;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  @media screen and (max-width: $media-tablet-small) {
+    font-size: $font-size-text-medium-small;
+  }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    max-width: 82.09%;
+  }
 }
 
 .icon {
   min-height: 235px;
   margin-left: 11%;
+
+  @media screen and (max-width: $media-tablet-large) {
+    width: 48px;
+    height: 48px;
+    min-height: auto;
+  }
 }
diff --git a/src/pages/creating-an-article/components/response.tsx b/src/pages/creating-an-article/components/response.tsx
index 7a13ec3..05cccac 100644
--- a/src/pages/creating-an-article/components/response.tsx
+++ b/src/pages/creating-an-article/components/response.tsx
@@ -1,5 +1,8 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import { MailWithIcon } from 'shared/mail-with-icon/mail-with-icon';
+import { StatusIcon } from 'shared/icons/status-icon';
+import { tabletAlbumOrientation } from 'utils/constants';
 import styles from './response.module.scss';
 
 interface IResponseProps {
@@ -8,16 +11,22 @@ interface IResponseProps {
   button: ReactNode;
 }
 
-export const Response: FC<IResponseProps> = ({
-  message,
-  status,
-  button,
-}): ReactElement => (
-  <div className={styles.content}>
-    <p className={styles.message}>{message}</p>
-    <div className={styles.icon}>
-      <MailWithIcon hasStatusIcon statusIcon={status} />
+export const Response: FC<IResponseProps> = ({ message, status, button }) => {
+  const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.contentMessage}>
+        <p className={styles.message}>{message}</p>
+        <div className={styles.icon}>
+          {isSmallScreenDevice ? (
+            <StatusIcon color="white" status={status} />
+          ) : (
+            <MailWithIcon hasStatusIcon statusIcon={status} />
+          )}
+        </div>
+      </div>
+      {button}
     </div>
-    {button}
-  </div>
-);
+  );
+};
diff --git a/src/pages/creating-an-article/creating-an-article.module.scss b/src/pages/creating-an-article/creating-an-article.module.scss
index b1c929b..df79b86 100644
--- a/src/pages/creating-an-article/creating-an-article.module.scss
+++ b/src/pages/creating-an-article/creating-an-article.module.scss
@@ -1,134 +1,280 @@
 @import 'assets/styles/abstracts/variables/colors.scss';
 @import 'assets/styles/abstracts/variables/fonts.scss';
+@import 'assets/styles/abstracts/variables/media-queries.scss';
 @import 'assets/styles/abstracts/variables/wrappers';
+@import 'assets/styles/abstracts/variables/indents';
 @import 'assets/styles/abstracts/placeholders.scss';
+@import 'assets/styles/abstracts/functions.scss';
+
+$indent-tablet: calc-fluid-element(
+  $indent-section-sides-tablet,
+  $indent-section-sides-desktop,
+  $media-tablet-small,
+  $media-desktop-small
+);
+$indent-mobile: calc-fluid-element(
+  $indent-section-sides-mobile,
+  $indent-section-sides-tablet,
+  $media-mobile-small,
+  $media-tablet-small
+);
 
 .wrapper {
   max-width: $wrapper-authors-desktop;
 
-  &--response {
-    padding-bottom: 25px;
+  > button {
+    &:last-child {
+      @media screen and (max-width: $media-tablet-large) {
+        position: fixed;
+        right: $indent-tablet;
+        bottom: 36px;
+      }
+
+      @media screen and (max-width: calc($media-tablet-small - 1px)) {
+        right: $indent-mobile;
+      }
+
+      @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+        bottom: 30px;
+      }
+    }
   }
-}
 
-.heading {
-  @extend %heading-size-medium;
-  margin-bottom: 48px;
-}
+  .heading {
+    @extend %heading-size-medium;
+    margin-bottom: 48px;
 
-.subheading {
-  @extend %heading-size-small;
-  letter-spacing: $font-letter-spacing-main;
-}
+    @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
+      );
+    }
 
-.rule {
-  color: $color-neutral-500;
-  letter-spacing: $font-letter-spacing-main;
-}
+    @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;
+    }
 
-.form {
-  display: flex;
-  flex-direction: column;
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-heading-3;
+    }
 
-  > div:not(:first-child) {
-    margin-top: 40px;
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      margin-bottom: 28px;
+    }
   }
 
-  &--photoPreview {
-    > div:last-child {
-      margin-top: 32px;
+  .subheading {
+    @extend %heading-size-small;
+    letter-spacing: $font-letter-spacing-main;
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-text-medium * 10),
+        calc($font-size-heading-3 * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
+
+    @media screen and (max-width: $media-tablet-small) {
+      font-size: $font-size-text-medium;
     }
   }
-}
 
-.instruction {
-  *:not(:first-child) {
-    margin-top: 16px;
+  .rule {
+    color: $color-neutral-500;
+    letter-spacing: $font-letter-spacing-main;
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      font-size: calc-fluid-element(
+        calc($font-size-text-medium-small * 10),
+        calc($font-size-text-medium * 10),
+        $media-tablet-small,
+        $media-desktop-small
+      );
+    }
   }
-}
 
-.inputs {
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
+  .form {
+    display: flex;
+    flex-direction: column;
+
+    > div:not(:first-child) {
+      margin-top: 40px;
+
+      @media screen and (max-width: $media-tablet-large) {
+        margin-top: 24px;
+      }
+    }
 
-  div {
-    max-width: 100%;
+    &--photoPreview {
+      > div:last-child {
+        margin-top: 32px;
+
+        @media screen and (max-width: $media-tablet-large) {
+          margin-top: 12px;
+        }
+      }
+    }
   }
-}
 
-.comment {
-  width: 50%;
-  @extend %text-size-small;
-  color: $color-neutral-500;
-  letter-spacing: $font-letter-spacing-main;
-}
+  .instruction {
+    *:not(:first-child) {
+      margin-top: 16px;
 
-.submit {
-  *:not(:first-child) {
-    margin-top: 24px;
+      @media screen and (max-width: $media-tablet-large) {
+        margin-top: 12px;
+      }
+    }
   }
-}
 
-.imageFile {
-  > .comment {
-    margin-top: 8px;
+  .inputs {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+
+    div {
+      max-width: 100%;
+
+      &:nth-child(2),
+      &:nth-child(3) {
+        > label > textarea {
+          padding-top: 20px;
+          padding-bottom: 20px;
+        }
+      }
+    }
   }
-}
 
-.imageWrapper {
-  position: relative;
-  width: 390px;
-  height: 320px;
+  .comment {
+    @extend %text-size-small;
+    color: $color-neutral-500;
+    letter-spacing: $font-letter-spacing-main;
+  }
+
+  .submit {
+    *:not(:first-child) {
+      margin-top: 24px;
+    }
+  }
+
+  .imageFile {
+    > .comment {
+      margin-top: 8px;
+    }
+  }
+
+  .imageWrapper {
+    $image-width-large: 390px;
+    $image-width-small: 335px;
+    $image-adaptive-width: calc-fluid-element(
+      $image-width-small,
+      $image-width-large,
+      $media-mobile-small,
+      calc($media-tablet-small-extra - 1px)
+    );
+
+    $image-height-large: 320px;
+    $image-height-small: 315px;
+    $image-adaptive-height: calc-fluid-element(
+      $image-height-small,
+      $image-height-large,
+      $media-mobile-small,
+      calc($media-tablet-small-extra - 1px)
+    );
+
+    position: relative;
+    width: $image-width-large;
+    height: $image-height-large;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 12px;
+      background: linear-gradient(
+          0deg,
+          rgba(72, 69, 84, 0.2) 0%,
+          rgba(72, 69, 84, 0.2) 100%
+        ),
+        lightgray 50%;
+
+      opacity: 0.2;
+    }
+
+    @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+      width: $image-adaptive-width;
+      height: $image-adaptive-height;
+    }
+
+    &Error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $image-width-large;
+      height: $image-height-large;
+      margin-bottom: 40px;
+      text-align: center;
+      @extend %text-size-small;
+      color: $color-system-error;
+      border: 2px dashed $color-system-error;
+      border-radius: 12px;
+      box-sizing: border-box;
+      user-select: none;
+
+      @media screen and (max-width: $media-tablet-large) {
+        margin-bottom: 24px;
+      }
+
+      @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+        width: $image-adaptive-width;
+        height: $image-adaptive-height;
+        margin-bottom: 30px;
 
-  &::before {
-    content: '';
+        > p {
+          max-width: 310px;
+        }
+      }
+    }
+  }
+
+  .imageDeleteButton {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 12px;
-    background: linear-gradient(
-        0deg,
-        rgba(72, 69, 84, 0.2) 0%,
-        rgba(72, 69, 84, 0.2) 100%
-      ),
-      lightgray 50%;
-
-    opacity: 0.2;
+    top: 12px;
+    right: 12px;
+    background-color: rgba(222, 222, 222, 0.3);
+    backdrop-filter: blur(5px);
+
+    svg {
+      width: 32px;
+      height: 32px;
+    }
   }
 
-  &Error {
-    display: flex;
-    align-items: center;
-    width: 390px;
-    height: 320px;
-    margin-bottom: 40px;
-    text-align: center;
-    @extend %text-size-small;
-    color: $color-system-error;
-    border: 2px dashed $color-system-error;
+  .imagePreview {
+    width: 100%;
+    height: 100%;
     border-radius: 12px;
-    box-sizing: border-box;
-    user-select: none;
+    object-fit: cover;
   }
-}
 
-.imageDeleteButton {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  background-color: rgba(222, 222, 222, 0.3);
-  backdrop-filter: blur(5px);
+  .button {
+    @media screen and (max-width: $media-tablet-large) {
+      width: 335px;
+      padding-right: 52px;
+      padding-left: 52px;
+    }
 
-  svg {
-    width: 32px;
-    height: 32px;
+    @media screen and (max-width: $media-mobile-small) {
+      max-width: 335px;
+      width: 100%;
+    }
   }
 }
-
-.imagePreview {
-  width: 100%;
-  height: 100%;
-  border-radius: 12px;
-  object-fit: cover;
-}
diff --git a/src/pages/creating-an-article/creating-an-article.tsx b/src/pages/creating-an-article/creating-an-article.tsx
index 199ce92..7317f46 100644
--- a/src/pages/creating-an-article/creating-an-article.tsx
+++ b/src/pages/creating-an-article/creating-an-article.tsx
@@ -1,9 +1,9 @@
-import { FC, ReactElement, ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
+import { useWindowDimensions } from 'hooks/useWindowDimensions';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import Input from 'shared/input/input';
 import TextArea from 'shared/text-area/text-area';
 import { FileInput } from 'shared/file-input/file-input';
 import Button from 'shared/buttons/button/button';
@@ -17,7 +17,11 @@ import {
   schemaArticleSourceLink,
   schemaArticleImage,
 } from 'utils/data/validation/yup-schema';
-import { bytesInMegabyte } from 'utils/constants';
+import {
+  bytesInMegabyte,
+  tabletAlbumOrientation,
+  tabletSmallExtra,
+} from 'utils/constants';
 import { createArticle } from 'utils/api';
 import { filterFormValues } from 'utils/functions/filter-form-values';
 import { Response } from './components/response';
@@ -26,7 +30,12 @@ import styles from './creating-an-article.module.scss';
 const articleImageSizeLimitMb = 1.5;
 const articleImageSizeLimitBytes = articleImageSizeLimitMb * bytesInMegabyte;
 
-export const CreatingAnArticlePage: FC = (): ReactElement => {
+export const CreatingAnArticlePage = () => {
+  const isSmallScreenDevice = useWindowDimensions() <= tabletAlbumOrientation;
+  const isExtraSmallScreenDevice = useWindowDimensions() < tabletSmallExtra;
+
+  const inputMinHeight = isSmallScreenDevice ? 48 : 64;
+
   const [response, setResponse] = useState<undefined | boolean>(undefined);
   const [selectedImage, setSelectedImage] = useState<null | Blob>(null);
   const [selectedImagePreview, setSelectedImagePreview] = useState('');
@@ -132,9 +141,10 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
         </p>
       </div>
       <div className={styles.inputs}>
-        <Input
+        <TextArea
           name="title"
           label="Заголовок статьи*"
+          minHeight={inputMinHeight}
           placeholder="Что делает мозг, пока мы спим"
           value={values.title}
           error={errors?.title}
@@ -165,9 +175,10 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
           onFocus={() => setFieldTouched('text')}
           onChange={handleChange}
         />
-        <Input
+        <TextArea
           name="source_name"
           label="Источник и/или автор оригинала"
+          minHeight={inputMinHeight}
           placeholder="Минздрав или minzdrav.gov.ru"
           value={values.source_name}
           error={errors.source_name}
@@ -175,13 +186,15 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
           onFocus={() => setFieldTouched('source_name')}
           onChange={handleChange}
         />
-        <Input
+        <TextArea
           name="source_link"
           label="Ссылка на источник"
+          minHeight={inputMinHeight}
           placeholder="https://cuprum.media/lifestyle/the-brain-sleeps"
           value={values.source_link}
           error={errors.source_link}
           touched={touched.source_link}
+          rows={isExtraSmallScreenDevice ? 2 : 1}
           onFocus={() => setFieldTouched('source_link')}
           onChange={handleChange}
         />
@@ -248,9 +261,10 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
           Статья будет опубликована на сайте после модерации
         </p>
         <Button
+          extraClass={styles.button}
           type="submit"
           label="Отправить на публикацию"
-          size="medium"
+          size={isSmallScreenDevice ? 'small' : 'medium'}
           isDisabled={!dirty || !isValid}
           isLoading={isSubmitting}
           hasSpinner
@@ -273,6 +287,7 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
             button={
               <Button
                 label="Написать ещё статью"
+                size={isSmallScreenDevice ? 'small' : 'medium'}
                 onClick={() => setResponse(undefined)}
               />
             }
@@ -289,6 +304,7 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
               button={
                 <Button
                   type="submit"
+                  size={isSmallScreenDevice ? 'small' : 'medium'}
                   label="Отправить повторно"
                   hasSpinner
                   spinnerSize="small"
@@ -306,12 +322,7 @@ export const CreatingAnArticlePage: FC = (): ReactElement => {
 
   return (
     <section>
-      <div
-        className={classNames(styles.wrapper, {
-          [styles[`wrapper--response`]]:
-            typeof response === 'boolean' || selectedImagePreview,
-        })}
-      >
+      <div className={styles.wrapper}>
         <h3 className={styles.heading}>Публикация статьи</h3>
         {renderContent()}
       </div>
diff --git a/src/pages/favorites/favorites.module.scss b/src/pages/favorites/favorites.module.scss
index 75f1886..8fc1e9b 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,34 @@
 .heading {
   @extend %heading-size-medium;
   margin-bottom: 48px;
+
+  &EmptyGallery {
+    margin-bottom: 56px;
+  }
+
+  @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 +59,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 +134,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 +163,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..b425b58 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"
     />
   ));
@@ -66,9 +68,16 @@ export const FavoritesPage: FC = (): ReactElement => {
         [styles.emptyGallery]: !isNotEmptyGallery,
       })}
     >
-      <h3 className={styles.heading}>Избранное</h3>
+      <h3
+        className={classNames(styles.heading, {
+          [styles.headingEmptyGallery]: isNotEmptyGallery,
+        })}
+      >
+        Избранное
+      </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 95f79c5..27229f9 100644
--- a/src/pages/profile/profile-page.module.scss
+++ b/src/pages/profile/profile-page.module.scss
@@ -1,17 +1,79 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
-@import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/wrappers.scss';
+@import 'assets/styles/abstracts/variables/indents';
+@import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/functions';
+
+$indent-tablet: calc-fluid-element(
+  $indent-section-sides-tablet,
+  $indent-section-sides-desktop,
+  $media-tablet-small,
+  $media-desktop-small
+);
+$indent-mobile: calc-fluid-element(
+  $indent-section-sides-mobile,
+  $indent-section-sides-tablet,
+  $media-mobile-small,
+  $media-tablet-small
+);
 
 .wrapper {
   display: grid;
-  grid-template-columns: 360px 74.7%;
+  grid-template-columns: 360px auto;
   column-gap: 5.59%;
   max-width: $wrapper-main-content-desktop;
   margin: 0 auto;
-  padding: 32px 0 80px;
+  padding: 48px 0 80px;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    margin: 0 $indent-section-sides-desktop;
+    column-gap: calc-fluid-element(
+      43px,
+      102px,
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    padding-top: 52px;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    margin: 0 $indent-tablet;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    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 {
-    padding-bottom: 55px;
+    padding-bottom: 80px;
+
+    @media screen and (max-width: $media-tablet-large) {
+      padding-bottom: 32px;
+    }
   }
 }
diff --git a/src/pages/profile/profile-page.tsx b/src/pages/profile/profile-page.tsx
index 71093e1..1bdb8ac 100644
--- a/src/pages/profile/profile-page.tsx
+++ b/src/pages/profile/profile-page.tsx
@@ -1,17 +1,43 @@
-import { useLocation, Outlet } from 'react-router-dom';
+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 { 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';
 
+type TContextType = {
+  isProfileTab: boolean;
+  setIsProfileTab: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
 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();
 
@@ -20,11 +46,13 @@ function ProfilePage() {
       <Header />
       <main
         className={classNames(styles.wrapper, {
+          [styles[`wrapper--favorites`]]: isRouteFavorites,
           [styles[`wrapper--publication`]]: isRouteCreatingAnArticle,
         })}
       >
-        <Sidebar />
-        <Outlet />
+        {!isProfileTab && isSmallScreenDevice ? null : <Sidebar />}
+        <Outlet context={{ isProfileTab, setIsProfileTab }} />
+        {isSmallScreenDevice && isButtonToTopVisible && <ButtonTopNavigation />}
       </main>
       <Footer />
     </>
@@ -32,3 +60,4 @@ function ProfilePage() {
 }
 
 export default ProfilePage;
+export const useProfileTab = () => useOutletContext<TContextType>();
diff --git a/src/shared/file-input/file-input.module.scss b/src/shared/file-input/file-input.module.scss
index dd61d27..ba635c9 100644
--- a/src/shared/file-input/file-input.module.scss
+++ b/src/shared/file-input/file-input.module.scss
@@ -1,8 +1,10 @@
 @import 'assets/styles/abstracts/variables/colors.scss';
 @import 'assets/styles/abstracts/variables/fonts.scss';
+@import 'assets/styles/abstracts/variables/media-queries.scss';
 @import 'assets/styles/abstracts/variables/z-index';
 @import 'assets/styles/abstracts/variables/animations';
 @import 'assets/styles/abstracts/placeholders.scss';
+@import 'assets/styles/abstracts/functions.scss';
 
 .fileWrapper {
   position: relative;
@@ -13,6 +15,8 @@
 .file {
   position: absolute;
   z-index: $zindex-overlay-filters-modal;
+  width: 0;
+  height: 0;
   opacity: 0;
 }
 
@@ -48,4 +52,17 @@
   * {
     transition: $transition-button;
   }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-text-medium-small * 10),
+      calc($font-size-text-medium * 10),
+      $media-tablet-small,
+      $media-desktop-small
+    );
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    font-size: $font-size-text-medium-small;
+  }
 }
diff --git a/src/shared/input/input.module.scss b/src/shared/input/input.module.scss
index 3610e06..a9b6b8e 100644
--- a/src/shared/input/input.module.scss
+++ b/src/shared/input/input.module.scss
@@ -1,5 +1,6 @@
 @import 'assets/styles/abstracts/variables/colors';
 @import 'assets/styles/abstracts/variables/fonts';
+@import 'assets/styles/abstracts/variables/media-queries';
 @import 'assets/styles/abstracts/variables/animations';
 @import 'assets/styles/abstracts/placeholders';
 
@@ -22,6 +23,11 @@
     @extend %text-size-medium;
     color: $color-neutral-700;
 
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      font-size: $font-size-text-small;
+      line-height: $font-line-height-text-small;
+    }
+
     &--disabled {
       color: $color-neutral-400;
     }
@@ -39,6 +45,11 @@
 
     &--medium {
       padding: 19px 12px;
+
+      @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+        padding-top: 11px;
+        padding-bottom: 11px;
+      }
     }
 
     &--small {
diff --git a/src/shared/text-area/text-area.module.scss b/src/shared/text-area/text-area.module.scss
index 8424275..e56ba20 100644
--- a/src/shared/text-area/text-area.module.scss
+++ b/src/shared/text-area/text-area.module.scss
@@ -1,5 +1,6 @@
 @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/variables/wrappers';
 @import 'assets/styles/abstracts/variables/animations';
@@ -43,6 +44,12 @@
       @extend %text-size-medium;
       color: $color-neutral-400;
     }
+
+    @media screen and (max-width: $media-tablet-large) {
+      padding-top: 12px;
+      padding-bottom: 12px;
+      min-height: 48px;
+    }
   }
 
   &--counter {
diff --git a/src/shared/text-area/text-area.tsx b/src/shared/text-area/text-area.tsx
index 740c4b9..2931cff 100644
--- a/src/shared/text-area/text-area.tsx
+++ b/src/shared/text-area/text-area.tsx
@@ -30,6 +30,7 @@ const TextArea: FC<ITextAreaProps> = ({
   autoComplete = 'off',
   error,
   touched,
+  rows = 1,
   onFocus,
   onBlur,
   onChange,
@@ -47,7 +48,7 @@ const TextArea: FC<ITextAreaProps> = ({
       )}px`;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  }, [value, minHeight, rows]);
 
   return (
     <div className={styles.textarea}>
@@ -64,6 +65,7 @@ const TextArea: FC<ITextAreaProps> = ({
           name={name}
           placeholder={placeholder}
           autoComplete={autoComplete}
+          rows={rows}
           onFocus={onFocus}
           onBlur={onBlur}
           onChange={onChange}