diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 460be48a..fa6574c4 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -14,10 +14,13 @@
 }
 
 .authorDetails {
-  align-items: baseline;
-  display: flex;
   flex: 1;
 
+  @include media-breakpoint-up(sm) {
+    align-items: baseline;
+    display: flex;
+  }
+
   &.authorDetailsShrinked {
     flex: 0 0 auto;
   }
@@ -62,7 +65,7 @@
 
 .authorAbout {
   color: rgb(0 0 0 / 60%);
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   line-height: 1.4;
   word-break: break-word;
 }
@@ -442,11 +445,19 @@
   }
 }
 
+.subscribersContainer {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  margin-top: 1em;
+}
+
 .subscribers {
+  align-items: center;
   cursor: pointer;
   display: inline-flex;
+  margin-right: 3rem;
   vertical-align: top;
-  align-items: center;
 
   .userpic {
     background: var(--background-color);
@@ -459,7 +470,12 @@
   }
 }
 
-.listWrapper {
-  overflow: auto;
-  max-height: 70vh;
+.subscribersCounter {
+  margin-left: -0.6rem;
+}
+
+.listWrapper {
+  max-height: 70vh;
+  overflow: auto;
+  padding-right: 2rem;
 }
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 5257495c..8bd7bc79 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -39,6 +39,7 @@ type AuthorCardProps = {
   class?: string
   followers?: Author[]
   subscriptions?: Array<Author | Topic>
+  showPublicationsCounter?: boolean
 }
 
 function isAuthor(value: Author | Topic): value is Author {
@@ -115,128 +116,168 @@ export const AuthorCard = (props: AuthorCardProps) => {
   })
 
   return (
-    <div
-      class={clsx(styles.author, props.class)}
-      classList={{
-        ['row']: props.isAuthorPage,
-        [styles.authorPage]: props.isAuthorPage,
-        [styles.authorComments]: props.isComments,
-        [styles.authorsListItem]: props.isAuthorsList,
-        [styles.feedMode]: props.isFeedMode,
-        [styles.nowrapView]: props.isNowrap
-      }}
-    >
-      <Show
-        when={props.isAuthorPage}
-        fallback={
-          <Userpic
-            name={props.author.name}
-            userpic={props.author.userpic}
-            hasLink={props.hasLink}
-            isBig={props.isAuthorPage}
-            isAuthorsList={props.isAuthorsList}
-            isFeedMode={props.isFeedMode}
-            class={styles.circlewrap}
-          />
-        }
-      >
-        <div class="col-md-5">
-          <Userpic
-            name={props.author.name}
-            userpic={props.author.userpic}
-            hasLink={props.hasLink}
-            isBig={props.isAuthorPage}
-            isAuthorsList={props.isAuthorsList}
-            isFeedMode={props.isFeedMode}
-            class={styles.circlewrap}
-          />
-        </div>
-      </Show>
-
+    <>
       <div
-        class={styles.authorDetails}
+        class={clsx(styles.author, props.class)}
         classList={{
-          'col-md-15 col-xl-13': props.isAuthorPage,
-          [styles.authorDetailsShrinked]: props.isAuthorPage
+          ['row']: props.isAuthorPage,
+          [styles.authorPage]: props.isAuthorPage,
+          [styles.authorComments]: props.isComments,
+          [styles.authorsListItem]: props.isAuthorsList,
+          [styles.feedMode]: props.isFeedMode,
+          [styles.nowrapView]: props.isNowrap
         }}
       >
-        <div class={styles.authorDetailsWrapper}>
-          <div class={styles.authorNameContainer}>
-            <ConditionalWrapper
-              condition={props.hasLink}
-              wrapper={(children) => (
-                <a class={styles.authorName} href={`/author/${props.author.slug}`}>
-                  {children}
-                </a>
-              )}
-            >
-              <span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
-            </ConditionalWrapper>
-          </div>
-          {/*TODO: implement plurals by i18n*/}
-          <Show when={props.author.bio} fallback={<div>{props.author.stat?.shouts} публикаций</div>}>
-            <div
-              class={styles.authorAbout}
-              classList={{ 'text-truncate': props.truncateBio }}
-              innerHTML={props.author.bio}
+        <Show
+          when={props.isAuthorPage}
+          fallback={
+            <Userpic
+              name={props.author.name}
+              userpic={props.author.userpic}
+              hasLink={props.hasLink}
+              isBig={props.isAuthorPage}
+              isAuthorsList={props.isAuthorsList}
+              isFeedMode={props.isFeedMode}
+              class={styles.circlewrap}
             />
-          </Show>
+          }
+        >
+          <div class="col-md-5">
+            <Userpic
+              name={props.author.name}
+              userpic={props.author.userpic}
+              hasLink={props.hasLink}
+              isBig={props.isAuthorPage}
+              isAuthorsList={props.isAuthorsList}
+              isFeedMode={props.isFeedMode}
+              class={styles.circlewrap}
+            />
+          </div>
+        </Show>
 
-          <Show when={props.followers && props.followers.length > 0}>
-            <div class={styles.subscribers} onClick={() => showModal('followers')}>
-              <For each={props.followers.slice(0, 3)}>
-                {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
-              </For>
-              <div>
-                {props.followers.length}&nbsp;
-                {getNumeralsDeclension(props.followers.length, [
-                  t('subscriber'),
-                  t('subscriber_rp'),
-                  t('subscribers')
-                ])}
-              </div>
+        <div
+          class={styles.authorDetails}
+          classList={{
+            'col-md-15 col-xl-13': props.isAuthorPage,
+            [styles.authorDetailsShrinked]: props.isAuthorPage
+          }}
+        >
+          <div class={styles.authorDetailsWrapper}>
+            <div class={styles.authorNameContainer}>
+              <ConditionalWrapper
+                condition={props.hasLink}
+                wrapper={(children) => (
+                  <a class={styles.authorName} href={`/author/${props.author.slug}`}>
+                    {children}
+                  </a>
+                )}
+              >
+                <span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
+              </ConditionalWrapper>
             </div>
-          </Show>
-          <Show when={props.subscriptions && props.subscriptions.length > 0}>
-            <div>
-              <div class={styles.subscribers} onClick={() => showModal('subscriptions')}>
-                <For each={props.subscriptions.slice(0, 3)}>
-                  {(f) => {
-                    if ('name' in f) {
-                      return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
-                    } else if ('title' in f) {
-                      return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
-                    }
-                    return null
-                  }}
-                </For>
-                <div>
-                  {props.subscriptions.length}&nbsp;
-                  {getNumeralsDeclension(props.subscriptions.length, [
-                    t('subscription'),
-                    t('subscription_rp'),
-                    t('subscriptions')
-                  ])}
-                </div>
-              </div>
-            </div>
-          </Show>
-        </div>
-        <ShowOnlyOnClient>
-          <Show when={isSessionLoaded()}>
-            <Show when={canFollow()}>
-              <div class={styles.authorSubscribe}>
-                <Show when={!props.noSocialButtons && !props.hideWriteButton}>
-                  <div class={styles.authorSubscribeSocial}>
-                    <For each={props.author.links}>{(link) => <a href={link} />}</For>
+            {/*TODO: implement plurals by i18n*/}
+            <Show
+              when={props.author.bio}
+              fallback={
+                props.showPublicationsCounter ? (
+                  <div class={styles.authorAbout}>{props.author.stat?.shouts} публикаций</div>
+                ) : (
+                  ''
+                )
+              }
+            >
+              <div
+                class={styles.authorAbout}
+                classList={{ 'text-truncate': props.truncateBio }}
+                innerHTML={props.author.bio}
+              />
+            </Show>
+
+            <Show
+              when={
+                (props.followers && props.followers.length > 0) ||
+                (props.subscriptions && props.subscriptions.length > 0)
+              }
+            >
+              <div class={styles.subscribersContainer}>
+                <Show when={props.followers && props.followers.length > 0}>
+                  <div class={styles.subscribers} onClick={() => showModal('followers')}>
+                    <For each={props.followers.slice(0, 3)}>
+                      {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
+                    </For>
+                    <div class={styles.subscribersCounter}>
+                      {props.followers.length}&nbsp;
+                      {getNumeralsDeclension(props.followers.length, [
+                        t('subscriber'),
+                        t('subscriber_rp'),
+                        t('subscribers')
+                      ])}
+                    </div>
                   </div>
                 </Show>
+                <Show when={props.subscriptions && props.subscriptions.length > 0}>
+                  <div class={styles.subscribers} onClick={() => showModal('subscriptions')}>
+                    <For each={props.subscriptions.slice(0, 3)}>
+                      {(f) => {
+                        if ('name' in f) {
+                          return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
+                        } else if ('title' in f) {
+                          return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
+                        }
+                        return null
+                      }}
+                    </For>
+                    <div class={styles.subscribersCounter}>
+                      {props.subscriptions.length}&nbsp;
+                      {getNumeralsDeclension(props.subscriptions.length, [
+                        t('subscription'),
+                        t('subscription_rp'),
+                        t('subscriptions')
+                      ])}
+                    </div>
+                  </div>
+                </Show>
+              </div>
+            </Show>
+          </div>
+          <ShowOnlyOnClient>
+            <Show when={isSessionLoaded()}>
+              <Show when={canFollow()}>
+                <div class={styles.authorSubscribe}>
+                  <Show when={!props.noSocialButtons && !props.hideWriteButton}>
+                    <div class={styles.authorSubscribeSocial}>
+                      <For each={props.author.links}>{(link) => <a href={link} />}</For>
+                    </div>
+                  </Show>
 
-                <Show
-                  when={subscribed()}
-                  fallback={
+                  <Show
+                    when={subscribed()}
+                    fallback={
+                      <button
+                        onClick={handleSubscribe}
+                        class={clsx('button', styles.button)}
+                        classList={{
+                          [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
+                          'button--subscribe': !props.isAuthorsList,
+                          'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
+                          [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
+                          [styles.isSubscribing]: isSubscribing()
+                        }}
+                        disabled={isSubscribing()}
+                      >
+                        <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
+                          <Icon name="author-subscribe" class={styles.icon} />
+                        </Show>
+                        <Show when={props.isTextButton || props.isAuthorPage}>
+                          <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                            {t('Follow')}
+                          </span>
+                        </Show>
+                      </button>
+                    }
+                  >
                     <button
-                      onClick={handleSubscribe}
+                      onClick={() => subscribe(false)}
                       class={clsx('button', styles.button)}
                       classList={{
                         [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
@@ -248,94 +289,82 @@ export const AuthorCard = (props: AuthorCardProps) => {
                       disabled={isSubscribing()}
                     >
                       <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
-                        <Icon name="author-subscribe" class={styles.icon} />
+                        <Icon name="author-unsubscribe" class={styles.icon} />
                       </Show>
                       <Show when={props.isTextButton || props.isAuthorPage}>
-                        <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
-                          {t('Follow')}
+                        <span
+                          class={clsx(
+                            styles.buttonLabel,
+                            styles.buttonLabelVisible,
+                            styles.buttonUnfollowLabel
+                          )}
+                        >
+                          {t('Unfollow')}
+                        </span>
+                        <span
+                          class={clsx(
+                            styles.buttonLabel,
+                            styles.buttonLabelVisible,
+                            styles.buttonSubscribedLabel
+                          )}
+                        >
+                          {t('You are subscribed')}
                         </span>
                       </Show>
                     </button>
-                  }
-                >
-                  <button
-                    onClick={() => subscribe(false)}
-                    class={clsx('button', styles.button)}
-                    classList={{
-                      [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
-                      'button--subscribe': !props.isAuthorsList,
-                      'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
-                      [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
-                      [styles.isSubscribing]: isSubscribing()
-                    }}
-                    disabled={isSubscribing()}
-                  >
-                    <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
-                      <Icon name="author-unsubscribe" class={styles.icon} />
-                    </Show>
-                    <Show when={props.isTextButton || props.isAuthorPage}>
-                      <span
-                        class={clsx(
-                          styles.buttonLabel,
-                          styles.buttonLabelVisible,
-                          styles.buttonUnfollowLabel
-                        )}
-                      >
-                        {t('Unfollow')}
-                      </span>
-                      <span
-                        class={clsx(
-                          styles.buttonLabel,
-                          styles.buttonLabelVisible,
-                          styles.buttonSubscribedLabel
-                        )}
-                      >
-                        {t('You are subscribed')}
-                      </span>
-                    </Show>
-                  </button>
-                </Show>
+                  </Show>
 
-                <Show when={!props.hideWriteButton}>
-                  <button
-                    class={styles.button}
-                    classList={{
-                      [styles.buttonSubscribe]: !props.isAuthorsList,
-                      'button--subscribe': !props.isAuthorsList,
-                      'button--subscribe-topic': props.isAuthorsList,
-                      [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
-                    }}
-                    onClick={initChat}
-                  >
-                    <Show when={!props.isTextButton && !props.isAuthorPage}>
-                      <Icon name="comment" class={styles.icon} />
-                    </Show>
-                    <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
-                  </button>
-                </Show>
-              </div>
+                  <Show when={!props.hideWriteButton}>
+                    <button
+                      class={styles.button}
+                      classList={{
+                        [styles.buttonSubscribe]: !props.isAuthorsList,
+                        'button--subscribe': !props.isAuthorsList,
+                        'button--subscribe-topic': props.isAuthorsList,
+                        [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
+                      }}
+                      onClick={initChat}
+                    >
+                      <Show when={!props.isTextButton && !props.isAuthorPage}>
+                        <Icon name="comment" class={styles.icon} />
+                      </Show>
+                      <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
+                    </button>
+                  </Show>
+                </div>
+              </Show>
             </Show>
-          </Show>
-        </ShowOnlyOnClient>
+          </ShowOnlyOnClient>
+        </div>
       </div>
+
       <Show when={props.followers}>
         <Modal variant="wide" name="followers">
           <>
             <h2>{t('Followers')}</h2>
             <div class={styles.listWrapper}>
               <div class="row">
-                <For each={props.followers}>
-                  {(follower: Author) => (
-                    <div class="col-xs-12">
-                      <AuthorCard author={follower} hideWriteButton={true} hasLink={true} />
-                    </div>
-                  )}
-                </For>
+                <div class="col-24">
+                  <For each={props.followers}>
+                    {(follower: Author) => (
+                      <AuthorCard
+                        author={follower}
+                        hideWriteButton={true}
+                        hasLink={true}
+                        isTextButton={true}
+                        liteButtons={true}
+                        truncateBio={true}
+                        showPublicationsCounter={true}
+                      />
+                    )}
+                  </For>
+                </div>
               </div>
             </div>
           </>
         </Modal>
       </Show>
+
       <Show when={props.subscriptions}>
         <Modal variant="wide" name="subscriptions">
           <>
@@ -357,29 +386,32 @@ export const AuthorCard = (props: AuthorCardProps) => {
                 </button>
               </li>
             </ul>
+            <br />
             <div class={styles.listWrapper}>
               <div class="row">
-                <For each={subscriptions()}>
-                  {(subscription: Author | Topic) => (
-                    <div class="col-xs-12">
-                      {isAuthor(subscription) ? (
+                <div class="col-24">
+                  <For each={subscriptions()}>
+                    {(subscription: Author | Topic) =>
+                      isAuthor(subscription) ? (
                         <AuthorCard
                           author={subscription}
                           hideWriteButton={true}
                           hasLink={true}
                           isTextButton={true}
+                          truncateBio={true}
+                          showPublicationsCounter={true}
                         />
                       ) : (
-                        <TopicCard compact isTopicInRow showDescription topic={subscription} />
-                      )}
-                    </div>
-                  )}
-                </For>
+                        <TopicCard compact isTopicInRow showDescription isCardMode topic={subscription} />
+                      )
+                    }
+                  </For>
+                </div>
               </div>
             </div>
           </>
         </Modal>
       </Show>
-    </div>
+    </>
   )
 }
diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 5ed8a383..b7761634 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -398,8 +398,10 @@
   padding: 0 2.4rem;
   width: 100%;
 
-  @include media-breakpoint-down(sm) {
-    padding-top: 100%;
+  @include media-breakpoint-down(xl) {
+    aspect-ratio: auto;
+    height: 100%;
+    padding-top: 30%;
   }
 
   &.swiper-slide {
@@ -450,6 +452,12 @@
     justify-content: end;
     padding: 2.4rem;
     z-index: 1;
+
+    @include media-breakpoint-down(xl) {
+      padding-left: 0;
+      padding-right: 0;
+      position: relative;
+    }
   }
 
   .shoutCardCover {
diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 2dee7902..c0d58d03 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -19,6 +19,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  margin-top: 0;
 
   button {
     margin-top: 0;