diff --git a/public/icons/key.svg b/public/icons/key.svg
new file mode 100644
index 00000000..11d788ca
--- /dev/null
+++ b/public/icons/key.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M6 0.25C2.87109 0.25 0.375 2.76758 0.375 5.875C0.375 8.0332 1.5918 9.9043 3.375 10.8477V17.3809C3.375 17.791 3.5625 18.1777 3.88477 18.4336L5.24219 19.5059C5.44727 19.6699 5.69531 19.75 5.94141 19.75C6.2168 19.75 6.49219 19.6484 6.70898 19.4492L9.15625 17.1797C9.33789 17.0117 9.39062 16.7461 9.28906 16.5215L8.625 15.0586V15.0234L9.52734 13.9043C9.79688 13.5684 9.8125 13.0918 9.56055 12.7402L8.625 11.4316V10.8477C10.4082 9.9043 11.625 8.0332 11.625 5.875C11.625 2.76758 9.12891 0.25 6 0.25ZM6 1.75C8.27344 1.75 10.125 3.60156 10.125 5.875C10.125 7.40625 9.28125 8.80469 7.92383 9.52148L7.125 9.94336V11.9121L8.10352 13.2812L7.125 14.4941V15.3828L7.64648 16.5332L5.92383 18.1328L4.97852 17.3848C4.91211 17.334 4.875 17.2559 4.875 17.1719V9.94336L4.07617 9.52148C2.71875 8.80469 1.875 7.40625 1.875 5.875C1.875 3.60156 3.72656 1.75 6 1.75ZM6 3.25C5.17188 3.25 4.5 3.92188 4.5 4.75C4.5 5.57812 5.17188 6.25 6 6.25C6.82812 6.25 7.5 5.57812 7.5 4.75C7.5 3.92188 6.82812 3.25 6 3.25Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss
index 58f775ab..eb8eea1b 100644
--- a/src/components/Article/Comment.module.scss
+++ b/src/components/Article/Comment.module.scss
@@ -1,5 +1,5 @@
 .comment {
-  margin: 0.5em 0;
+  margin: 0 0 0.5em;
   padding: 1rem;
   transition: background-color 0.3s;
   position: relative;
diff --git a/src/components/Article/CommentDate.module.scss b/src/components/Article/CommentDate.module.scss
index edcb1ce9..f9672066 100644
--- a/src/components/Article/CommentDate.module.scss
+++ b/src/components/Article/CommentDate.module.scss
@@ -4,14 +4,15 @@
   align-self: center;
   display: flex;
   flex: 1;
+  flex-wrap: wrap;
   @include font-size(1.2rem);
   font-size: 1.2rem;
-  gap: 1rem;
   justify-content: flex-start;
   margin: 0 1em 0 0;
 
   .date {
     font-weight: 500;
+    margin-right: 1rem;
 
     .icon {
       line-height: 1;
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
index 5aa176e4..da653817 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
@@ -9,6 +9,10 @@
     margin-bottom: 3rem;
   }
 
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
   .info {
     @include font-size(1.4rem);
     border: none;
diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 240e4be2..3fc01878 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -42,7 +42,7 @@
   flex: 1;
 
   @include media-breakpoint-up(sm) {
-    align-items: baseline;
+    align-items: center;
     display: flex;
   }
 
@@ -426,6 +426,10 @@
   }
 }
 
+.shareControl {
+  display: inline-block;
+}
+
 .buttonSubscribe {
   align-items: center;
   aspect-ratio: 1/1;
@@ -490,6 +494,7 @@
     color: #696969;
     @include font-size(2rem);
     font-weight: 500;
+    margin-top: 1.5rem;
   }
 
   .authorSubscribe {
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 9e5433c4..6fded1f2 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -208,76 +208,57 @@ export const AuthorCard = (props: Props) => {
             }
           >
             <div class={styles.subscribersContainer}>
-              <Switch>
-                <Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
-                  <a href="?modal=followers" class={styles.subscribers}>
-                    <For each={props.followers.slice(0, 3)}>
-                      {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
-                    </For>
-                    <div class={styles.subscribersCounter}>
-                      {t('SubscriberWithCount', { count: props.followers.length })}
-                    </div>
-                  </a>
-                </Match>
-                <Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
-                  <Button
-                    variant="secondary"
-                    onClick={() => redirectPage(router, 'profileSettings')}
-                    value={t('Edit profile')}
-                  />
-                </Match>
-              </Switch>
+              <Show when={props.followers && props.followers.length > 0}>
+                <a href="?modal=followers" class={styles.subscribers}>
+                  <For each={props.followers.slice(0, 3)}>
+                    {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
+                  </For>
+                  <div class={styles.subscribersCounter}>
+                    {t('SubscriberWithCount', { count: props.followers.length })}
+                  </div>
+                </a>
+              </Show>
 
-              <Switch>
-                <Match when={!props.isCurrentUser && props.following && props.following.length > 0}>
-                  <a href="?modal=following" class={styles.subscribers}>
-                    <For each={props.following.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}>
-                      {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
-                    </div>
-                  </a>
-                </Match>
-                <Match when={props.isCurrentUser && props.following && props.following.length > 0}>
-                  <SharePopup
-                    containerCssClass={stylesHeader.control}
-                    title={props.author.name}
-                    description={props.author.bio}
-                    imageUrl={props.author.userpic}
-                    shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
-                    trigger={<Button variant="secondary" value={t('Share')} />}
-                  />
-                </Match>
-              </Switch>
+              <Show when={props.following && props.following.length > 0}>
+                <a href="?modal=following" class={styles.subscribers}>
+                  <For each={props.following.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}>
+                    {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
+                  </div>
+                </a>
+              </Show>
             </div>
           </Show>
         </div>
         <ShowOnlyOnClient>
-          <Show when={isSessionLoaded() && props.author.links}>
-            <div class={styles.authorSubscribeSocial}>
-              <For each={props.author.links}>
-                {(link) => (
-                  <a
-                    class={styles.socialLink}
-                    href={link.startsWith('http') ? link : `https://${link}`}
-                    target="_blank"
-                    rel="nofollow noopener"
-                  >
-                    <span class={styles.authorSubscribeSocialLabel}>
-                      {link.startsWith('http') ? link : `https://${link}`}
-                    </span>
-                  </a>
-                )}
-              </For>
-            </div>
+          <Show when={isSessionLoaded()}>
+            <Show when={props.author.links && props.author.links.length > 0}>
+              <div class={styles.authorSubscribeSocial}>
+                <For each={props.author.links}>
+                  {(link) => (
+                    <a
+                      class={styles.socialLink}
+                      href={link.startsWith('http') ? link : `https://${link}`}
+                      target="_blank"
+                      rel="nofollow noopener"
+                    >
+                      <span class={styles.authorSubscribeSocialLabel}>
+                        {link.startsWith('http') ? link : `https://${link}`}
+                      </span>
+                    </a>
+                  )}
+                </For>
+              </div>
+            </Show>
             <Show when={canFollow()}>
               <div class={styles.authorSubscribe}>
                 <Show
@@ -362,6 +343,26 @@ export const AuthorCard = (props: Props) => {
                 </Show>
               </div>
             </Show>
+
+            <Show when={props.isCurrentUser}>
+              <div class={styles.authorSubscribe}>
+                <Button
+                  variant="secondary"
+                  onClick={() => redirectPage(router, 'profileSettings')}
+                  value={t('Edit profile')}
+                  class={styles.button}
+                />
+
+                <SharePopup
+                  containerCssClass={styles.shareControl}
+                  title={props.author.name}
+                  description={props.author.bio}
+                  imageUrl={props.author.userpic}
+                  shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
+                  trigger={<Button variant="secondary" value={t('Share')} />}
+                />
+              </div>
+            </Show>
           </Show>
         </ShowOnlyOnClient>
         <Show when={props.followers}>
diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss
index c09de070..5735b053 100644
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@@ -1,9 +1,11 @@
 .sidebar {
+  margin-top: -0.7rem;
   max-height: calc(100vh - 120px);
   overflow: auto;
   top: 120px;
 
   @include media-breakpoint-up(md) {
+    margin-top: 0;
     position: sticky;
 
     ul > li {
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 9d6fc432..93bfe8aa 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -104,9 +104,9 @@
   position: relative;
 
   @include media-breakpoint-down(lg) {
-    flex: 1 !important;
     max-width: 100% !important;
-    padding: 0 !important;
+    position: absolute;
+    right: 0;
   }
 }
 
@@ -139,7 +139,7 @@
     overflow: auto;
     padding: $container-padding-x !important;
     position: fixed;
-    top: 64px;
+    top: 58px;
     width: 100%;
     z-index: 1;
 
@@ -191,8 +191,9 @@
     }
   }
 
-  ul {
+  :global(.view-switcher) {
     margin-top: 0;
+    overflow: hidden;
   }
 
   li {
@@ -217,6 +218,10 @@
   .fixed & {
     display: block;
   }
+
+  a {
+    padding-top: 0.1em;
+  }
 }
 
 .mainNavigationSocial a {
@@ -246,6 +251,30 @@
     background: #f7f7f8;
     border: none;
     border-radius: 1.6rem;
+    padding-right: 5.6rem;
+
+    &:not(:placeholder-shown) {
+      & ~ .mobileSubscriptionSubmit {
+        display: block;
+      }
+    }
+  }
+}
+
+.mobileSubscriptionSubmit {
+  aspect-ratio: 1/1;
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  img {
+    aspect-ratio: 1/1;
+    left: 50%;
+    position: relative;
+    transform: translateX(-50%);
+    width: 16px !important;
   }
 }
 
@@ -387,19 +416,11 @@
   display: flex;
   justify-content: flex-end;
   position: absolute;
-  right: 5rem;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
 
-  @include media-breakpoint-up(lg) {
-    right: 0;
-  }
-
-  @include media-breakpoint-up(xl) {
-    right: 2rem;
-  }
-
   .control {
     cursor: pointer;
     border: 0;
@@ -446,10 +467,6 @@
     z-index: -1;
   }
 
-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
   .userpic {
     align-items: center;
     margin-right: 0;
@@ -491,6 +508,7 @@
   a,
   a:link {
     border: none;
+    cursor: pointer;
     height: auto;
     margin: 0;
     padding: 0;
@@ -534,6 +552,12 @@
   }
 
   &:global(.loginbtn) {
+    background: #e9e9ee;
+
+    @include media-breakpoint-up(xl) {
+      background: none;
+    }
+
     .icon {
       height: 2.4rem;
       width: 2.4rem;
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 855086ac..23cc3435 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -173,6 +173,11 @@ export const Header = (props: Props) => {
 
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
         <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
+          <div class={clsx(styles.burgerContainer, 'col-auto')}>
+            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
+              <div />
+            </div>
+          </div>
           <div class={clsx('col-md-5 col-xl-4 col-auto', styles.mainLogo)}>
             <a href={getPagePath(router, 'home')}>
               <img src="/logo.svg" alt={t('Discours')} />
@@ -278,6 +283,9 @@ export const Header = (props: Props) => {
                   <div class="pretty-form__item">
                     <input type="email" placeholder="Ваш email" id="subscription-email" />
                     <label for="subscription-email">{t('Your email')}</label>
+                    <button class={styles.mobileSubscriptionSubmit}>
+                      <Icon name="arrow-right" />
+                    </button>
                   </div>
                 </form>
 
@@ -327,11 +335,6 @@ export const Header = (props: Props) => {
               </a>
             </div>
           </Show>
-          <div class={clsx(styles.burgerContainer, 'col-auto')}>
-            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
-              <div />
-            </div>
-          </div>
 
           <div
             class={clsx(styles.subnavigation, 'col')}
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 5fe286b7..8668c093 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -108,7 +108,7 @@ export const HeaderAuth = (props: Props) => {
   return (
     <ShowOnlyOnClient>
       <Show when={isSessionLoaded()} keyed={true}>
-        <div class={clsx('col-sm-6 col-lg-7', styles.usernav)}>
+        <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
             <Show when={isCreatePostButtonVisible()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
@@ -129,13 +129,14 @@ export const HeaderAuth = (props: Props) => {
 
             <Show when={isNotificationsVisible()}>
               <div class={styles.userControlItem} onClick={handleBellIconClick}>
-                {/*TODO: check markup (cursor: pointer, hover)*/}
-                <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
-                <Icon
-                  name="bell-white-hover"
-                  counter={unreadNotificationsCount()}
-                  class={clsx(styles.icon, styles.iconHover)}
-                />
+                <div class={styles.button}>
+                  <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
+                  <Icon
+                    name="bell-white-hover"
+                    counter={unreadNotificationsCount()}
+                    class={clsx(styles.icon, styles.iconHover)}
+                  />
+                </div>
               </div>
             </Show>
 
@@ -175,7 +176,7 @@ export const HeaderAuth = (props: Props) => {
                 <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                   <a href="?modal=auth&mode=login">
                     <span class={styles.textLabel}>{t('Enter')}</span>
-                    <Icon name="user-default" class={styles.icon} />
+                    <Icon name="key" class={styles.icon} />
                     {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index f69f99c2..9dafa21a 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -82,6 +82,7 @@
   overflow: auto;
   padding: 5.4rem 2.4rem 2.4rem;
   position: relative;
+  text-align: left;
 
   @include media-breakpoint-up(sm) {
     padding: 5rem;
diff --git a/src/components/Nav/Topics/Topics.module.scss b/src/components/Nav/Topics/Topics.module.scss
index b83c0570..128dc46f 100644
--- a/src/components/Nav/Topics/Topics.module.scss
+++ b/src/components/Nav/Topics/Topics.module.scss
@@ -1,6 +1,5 @@
 .Topics {
-  @include font-size(1.4rem);
-
+  font-size: 1.6rem;
   height: 6rem;
   line-height: 6rem;
   margin-bottom: 3rem;
@@ -12,32 +11,68 @@
     padding: 0 divide($container-padding-x, 2);
   }
 
+  @include media-breakpoint-up(md) {
+    @include font-size(1.4rem);
+  }
+
   .list {
     display: flex;
-    flex-wrap: wrap;
     font-weight: 500;
     list-style: none;
     margin-top: 0;
-    padding: 0 7em 0 0;
+    overflow: auto;
+    padding: 0;
     position: relative;
+
+    @include media-breakpoint-up(lg) {
+      flex-wrap: wrap;
+      overflow: hidden;
+      padding-right: 7em;
+    }
   }
 
   .item {
     margin-right: 2.4rem;
 
     &.right {
+      display: none;
       margin-right: 0;
       position: absolute;
       right: 0;
       top: 0;
+      white-space: nowrap;
+
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+
+      :global(.icon) {
+        display: inline-block;
+        margin-left: 0.3em;
+        top: 0.15em;
+      }
     }
 
     a {
       border-bottom: unset;
+
       &.selected {
         font-weight: 500;
         border-bottom: 2px solid var(--default-color);
       }
+
+      &:hover {
+        .icon {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      margin-left: 0.3em;
+      position: relative;
+      top: 0.15em;
     }
   }
 }
diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss
index 6c186a76..c6c5c8d6 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@@ -9,6 +9,10 @@
     margin-bottom: 3rem;
   }
 
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
   .picture {
     display: block;
     width: 40px;
diff --git a/src/components/Views/Author/Author.module.scss b/src/components/Views/Author/Author.module.scss
index e7da012c..a9215987 100644
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@@ -8,8 +8,12 @@
   }
 
   .groupControls {
-    margin-bottom: 6rem !important;
+    margin-bottom: 2rem !important;
     margin-top: 0 !important;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 6rem !important;
+    }
   }
 }
 
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index 8ed68fdf..c9ceeb30 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -1,5 +1,6 @@
 .feedFilter {
-  margin: 0.2em 0 4.8rem;
+  margin-bottom: 4.8rem;
+  margin-top: 0.2em;
 
   @include media-breakpoint-down(md) {
     margin-right: 4rem !important;
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss
index cb20f387..51498b5f 100644
--- a/src/components/_shared/Button/Button.module.scss
+++ b/src/components/_shared/Button/Button.module.scss
@@ -1,6 +1,6 @@
 .button {
   border-radius: 2px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d2731f41..00c2dd42 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -589,18 +589,22 @@ figure {
 
 .view-switcher {
   @include font-size(1.4rem);
-
   display: flex;
-  flex-wrap: wrap;
   font-weight: 500;
   list-style: none;
-  margin: 3.6rem 0 0;
-  padding: 0;
+  margin: 3.6rem -1rem 0;
+  overflow: auto;
+  padding: 0 1rem;
+
+  @include media-breakpoint-up(md) {
+    flex-wrap: wrap;
+  }
 
   li {
     display: inline-block;
     margin-right: 2rem;
     margin-bottom: 0.6em;
+    white-space: nowrap;
 
     &:last-child {
       margin-right: 0;