diff --git a/src/components/Feed/Sidebar.module.scss b/src/components/Feed/Sidebar.module.scss
index 0e1dc67c..ca81ac8d 100644
--- a/src/components/Feed/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar.module.scss
@@ -1,3 +1,11 @@
+.sidebar {
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+  padding-right: 1rem;
+  position: sticky;
+  top: 120px;
+}
+
 .counter {
   align-items: center;
   align-self: flex-start;
@@ -29,6 +37,7 @@
 .settings {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2em;
 }
 
 a {
diff --git a/src/components/Feed/Sidebar.tsx b/src/components/Feed/Sidebar.tsx
index 0d6cde87..33174834 100644
--- a/src/components/Feed/Sidebar.tsx
+++ b/src/components/Feed/Sidebar.tsx
@@ -29,7 +29,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
   }
 
   return (
-    <>
+    <div class={styles.sidebar}>
       <ul>
         <li>
           <a href="#">
@@ -78,6 +78,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
             <Icon name="feed-notifications" class={styles.icon} />
             уведомления
           </a>
+          <span class={styles.counter}>283</span>
         </li>
       </ul>
 
@@ -119,6 +120,6 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
           {t('Feed settings')}
         </a>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 8867d332..b4dab49b 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -117,6 +117,10 @@
 
     &:hover {
       background: none;
+
+      img {
+        filter: none;
+      }
     }
   }
 }
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index 3806b2e8..f7d77325 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -14,16 +14,21 @@
   }
 
   ul {
-    margin-bottom: 3rem;
+    margin: 0 0 3rem;
   }
 
   li {
     display: flex;
     justify-content: space-between;
     margin: 0 0 1rem;
+    white-space: nowrap;
+    width: 100%;
 
     a {
       margin-right: 0.5em;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 9b87b85e..d804c010 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -78,115 +78,118 @@ export const FeedView = () => {
   return (
     <>
       <div class="wide-container feed">
-        <div class="row">
-          <div class={clsx('col-md-3', styles.feedNavigation)}>
+        <div class="shift-content">
+          <div class={clsx('left-col', styles.feedNavigation)}>
             <FeedSidebar authors={sortedAuthors()} />
           </div>
 
-          <div class="col-md-6">
-            <ul class="feed-filter">
-              <Show when={!!session()?.user?.slug}>
-                <li class="selected">
-                  <a href="/feed/my">{t('My feed')}</a>
+          <div class="row">
+            <div class="col-md-8">
+              <ul class="feed-filter">
+                <Show when={!!session()?.user?.slug}>
+                  <li class="selected">
+                    <a href="/feed/my">{t('My feed')}</a>
+                  </li>
+                </Show>
+                <li>
+                  <a href="/feed/?by=views">{t('Most read')}</a>
+                </li>
+                <li>
+                  <a href="/feed/?by=rating">{t('Top rated')}</a>
+                </li>
+                <li>
+                  <a href="/feed/?by=comments">{t('Most commented')}</a>
                 </li>
-              </Show>
-              <li>
-                <a href="/feed/?by=views">{t('Most read')}</a>
-              </li>
-              <li>
-                <a href="/feed/?by=rating">{t('Top rated')}</a>
-              </li>
-              <li>
-                <a href="/feed/?by=comments">{t('Most commented')}</a>
-              </li>
-            </ul>
-
-            <Show when={sortedArticles().length > 0}>
-              <For each={sortedArticles().slice(0, 4)}>
-                {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
-              </For>
-
-              <div class={stylesBeside.besideColumnTitle}>
-                <h4>{t('Popular authors')}</h4>
-                <a href="/authors">
-                  {t('All authors')}
-                  <Icon name="arrow-right" class={stylesBeside.icon} />
-                </a>
-              </div>
-
-              <ul class={stylesBeside.besideColumn}>
-                <For each={topAuthors().slice(0, 5)}>
-                  {(author) => (
-                    <li>
-                      <AuthorCard author={author} compact={true} hasLink={true} />
-                    </li>
-                  )}
-                </For>
               </ul>
 
-              <For each={sortedArticles().slice(4)}>
-                {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
-              </For>
-            </Show>
-          </div>
+              <Show when={sortedArticles().length > 0}>
+                <For each={sortedArticles().slice(0, 4)}>
+                  {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
+                </For>
 
-          <aside class={clsx('col-md-3', styles.feedAside)}>
-            <section class={styles.asideSection}>
-              <h4>{t('Comments')}</h4>
-              <ul class={stylesArticle.comments}>
-                <For each={topComments().filter((item) => item.body)}>
-                  {(comment) => {
-                    return (
-                      <li class={styles.comment}>
-                        <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
-                        <AuthorCard
-                          author={comment.createdBy as Author}
-                          isFeedMode={true}
-                          compact={true}
-                          hideFollow={true}
-                        />
-                        <div class={clsx('text-truncate', styles.commentArticleTitle)}>
-                          <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
-                        </div>
+                <div class={stylesBeside.besideColumnTitle}>
+                  <h4>{t('Popular authors')}</h4>
+                  <a href="/authors">
+                    {t('All authors')}
+                    <Icon name="arrow-right" class={stylesBeside.icon} />
+                  </a>
+                </div>
+
+                <ul class={stylesBeside.besideColumn}>
+                  <For each={topAuthors().slice(0, 5)}>
+                    {(author) => (
+                      <li>
+                        <AuthorCard author={author} compact={true} hasLink={true} />
                       </li>
-                    )
-                  }}
-                </For>
-              </ul>
-            </section>
+                    )}
+                  </For>
+                </ul>
 
-            <Show when={topTopics().length > 0}>
+                <For each={sortedArticles().slice(4)}>
+                  {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
+                </For>
+              </Show>
+            </div>
+
+            <aside class={clsx('col-md-4', styles.feedAside)}>
               <section class={styles.asideSection}>
-                <h4>{t('Topics')}</h4>
-                <For each={topTopics().slice(0, 5)}>
-                  {(topic) => (
-                    <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
-                      <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
-                    </span>
-                  )}
-                </For>
+                <h4>{t('Comments')}</h4>
+                <ul class={stylesArticle.comments}>
+                  <For each={topComments().filter((item) => item.body)}>
+                    {(comment) => {
+                      return (
+                        <li class={styles.comment}>
+                          <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
+                          <AuthorCard
+                            author={comment.createdBy as Author}
+                            isFeedMode={true}
+                            compact={true}
+                            hideFollow={true}
+                          />
+                          <div class={clsx('text-truncate', styles.commentArticleTitle)}>
+                            <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
+                          </div>
+                        </li>
+                      )
+                    }}
+                  </For>
+                </ul>
               </section>
-            </Show>
 
-            <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
-              <Icon name="pin" class={styles.icon} />
-              <ul class="nodash">
-                <li>
-                  <a href="/about/guide">Как устроен Дискурс</a>
-                </li>
-                <li>
-                  <a href="/how-to-write-a-good-article">Как создать хороший текст</a>
-                </li>
-                <li>
-                  <a href="#">Правила конструктивных дискуссий</a>
-                </li>
-                <li>
-                  <a href="/about/principles">Принципы сообщества</a>
-                </li>
-              </ul>
-            </section>
-          </aside>
+              <Show when={topTopics().length > 0}>
+                <section class={styles.asideSection}>
+                  <h4>{t('Topics')}</h4>
+                  <For each={topTopics().slice(0, 5)}>
+                    {(topic) => (
+                      <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
+                        <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
+                      </span>
+                    )}
+                  </For>
+                </section>
+              </Show>
+
+              <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
+                <Icon name="pin" class={styles.icon} />
+                <ul class="nodash">
+                  <li>
+                    <a href="/about/guide">Как устроен Дискурс</a>
+                  </li>
+                  <li>
+                    <a href="/how-to-write-a-good-article">Как создать хороший текст</a>
+                  </li>
+                  <li>
+                    <a href="#">Правила конструктивных дискуссий</a>
+                  </li>
+                  <li>
+                    <a href="/about/principles">Принципы сообщества</a>
+                  </li>
+                </ul>
+              </section>
+            </aside>
+          </div>
         </div>
+
         <Show when={isLoadMoreButtonVisible()}>
           <p class="load-more-container">
             <button class="button" onClick={loadMore}>
diff --git a/src/styles/Feed.scss b/src/styles/Feed.scss
index 93ce4616..fb5f923c 100644
--- a/src/styles/Feed.scss
+++ b/src/styles/Feed.scss
@@ -57,8 +57,8 @@
 
 .feed-filter {
   display: flex;
+  flex-wrap: wrap;
   @include font-size(1.7rem);
-
   font-weight: 500;
   list-style: none;
   margin: 0 0 1.6rem;
@@ -66,7 +66,7 @@
 
   li {
     border-bottom: 4px solid transparent;
-    margin: 0 1.4em 1em 0;
+    margin: 0 1.4em 0.5em 0;
 
     &:last-child {
       margin-right: 0;
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 3ae381c7..c87ca4bd 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -691,11 +691,11 @@ astro-island {
   .left-col {
     height: 100%;
     padding-right: 2rem;
-    position: absolute;
     right: 100%;
     top: 0;
 
     @include media-breakpoint-up(md) {
+      position: absolute;
       width: 161px;
     }