diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 9afe63b8..66e483ec 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -59,29 +59,27 @@ export const AllAuthorsView = (props: Props) => {
   const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
 
   return (
-    <div class={clsx(styles.allTopicsPage, 'container')}>
+    <div class={clsx(styles.allTopicsPage, 'wide-container')}>
       <Show when={sortedAuthors().length > 0}>
         <div class="shift-content">
-          <div class="row">
-            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
-              <h1>{t('Authors')}</h1>
-              <p>{t('Subscribe who you like to tune your personal feed')}</p>
+          <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
+            <h1>{t('Authors')}</h1>
+            <p>{t('Subscribe who you like to tune your personal feed')}</p>
 
-              <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
-                <li classList={{ selected: searchParams().by === 'shouts' }}>
-                  <a href="/authors?by=shouts">{t('By shouts')}</a>
-                </li>
-                <li classList={{ selected: searchParams().by === 'rating' }}>
-                  <a href="/authors?by=rating">{t('By rating')}</a>
-                </li>
-                <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
-                  <a href="/authors">{t('By alphabet')}</a>
-                </li>
-                <li class="view-switcher__search">
-                  <SearchField onChange={searchAuthors} />
-                </li>
-              </ul>
-            </div>
+            <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+              <li classList={{ selected: searchParams().by === 'shouts' }}>
+                <a href="/authors?by=shouts">{t('By shouts')}</a>
+              </li>
+              <li classList={{ selected: searchParams().by === 'rating' }}>
+                <a href="/authors?by=rating">{t('By rating')}</a>
+              </li>
+              <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
+                <a href="/authors">{t('By alphabet')}</a>
+              </li>
+              <li class="view-switcher__search">
+                <SearchField onChange={searchAuthors} />
+              </li>
+            </ul>
           </div>
 
           <Show
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index e4c5e349..ca80a63c 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -126,50 +126,46 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   }
 
   const AllTopicsHead = () => (
-    <div class="row">
-      <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
-        <h1>{t('Topics')}</h1>
-        <p>{t('Subscribe what you like to tune your personal feed')}</p>
+    <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
+      <h1>{t('Topics')}</h1>
+      <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
-        <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
-          <li classList={{ selected: searchParams().by === 'shouts' }}>
-            <a href="/topics?by=shouts">{t('By shouts')}</a>
-          </li>
-          <li classList={{ selected: searchParams().by === 'authors' }}>
-            <a href="/topics?by=authors">{t('By authors')}</a>
-          </li>
-          <li classList={{ selected: searchParams().by === 'title' }}>
-            <a href="/topics?by=title">{t('By alphabet')}</a>
-          </li>
-          <li class="view-switcher__search">
-            <SearchField onChange={searchTopics} />
-          </li>
-        </ul>
-      </div>
+      <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+        <li classList={{ selected: searchParams().by === 'shouts' }}>
+          <a href="/topics?by=shouts">{t('By shouts')}</a>
+        </li>
+        <li classList={{ selected: searchParams().by === 'authors' }}>
+          <a href="/topics?by=authors">{t('By authors')}</a>
+        </li>
+        <li classList={{ selected: searchParams().by === 'title' }}>
+          <a href="/topics?by=title">{t('By alphabet')}</a>
+        </li>
+        <li class="view-switcher__search">
+          <SearchField onChange={searchTopics} />
+        </li>
+      </ul>
     </div>
   )
   return (
-    <div class={clsx(styles.allTopicsPage, 'container')}>
+    <div class={clsx(styles.allTopicsPage, 'wide-container')}>
       <div class="shift-content">
         <AllTopicsHead />
 
         <Show when={sortedTopics().length > 0 || searchResults().length > 0}>
           <Show when={searchParams().by === 'title'}>
-            <div class="row">
-              <div class="col-lg-10 col-xl-9">
-                <ul class={clsx('nodash', styles.alphabet)}>
-                  <For each={ALPHABET}>
-                    {(letter, index) => (
-                      <li>
-                        <Show when={sortedKeys().includes(letter)}>
-                          <a href={`#letter-${index()}`}>{letter}</a>
-                        </Show>
-                        <Show when={!sortedKeys().includes(letter)}>{letter}</Show>
-                      </li>
-                    )}
-                  </For>
-                </ul>
-              </div>
+            <div class="col-lg-10 col-xl-9">
+              <ul class={clsx('nodash', styles.alphabet)}>
+                <For each={ALPHABET}>
+                  {(letter, index) => (
+                    <li>
+                      <Show when={sortedKeys().includes(letter)}>
+                        <a href={`#letter-${index()}`}>{letter}</a>
+                      </Show>
+                      <Show when={!sortedKeys().includes(letter)}>{letter}</Show>
+                    </li>
+                  )}
+                </For>
+              </ul>
             </div>
 
             <For each={sortedKeys()}>
@@ -183,9 +179,8 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                           <For each={byLetter()[letter]}>
                             {(topic) => (
                               <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
-                                <div class="topic-title">
-                                  <a href={`/topic/${topic.slug}`}>{topic.title}</a>
-                                </div>
+                                <a href={`/topic/${topic.slug}`}>{topic.title}</a>
+                                <span class={styles.articlesCounter}>{topic.stat.shouts}</span>
                               </div>
                             )}
                           </For>
@@ -238,12 +233,10 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
           </Show>
 
           <Show when={sortedTopics().length > limit()}>
-            <div class="row">
-              <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
-                <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                  {t('Load more')}
-                </button>
-              </div>
+            <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10 offset-md-1')}>
+              <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
+                {t('Load more')}
+              </button>
             </div>
           </Show>
         </Show>
diff --git a/src/styles/AllTopics.module.scss b/src/styles/AllTopics.module.scss
index ef536a42..3a79472d 100644
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@@ -1,6 +1,6 @@
 .allTopicsPage {
   .group {
-    font-weight: bold;
+    @include font-size(1.6rem);
     margin: 3em 0 9.6rem;
 
     @include media-breakpoint-down(sm) {
@@ -17,11 +17,7 @@
     }
 
     .topic {
-      margin-bottom: 1.6rem;
-
-      @include media-breakpoint-down(sm) {
-        margin-left: 2.6rem;
-      }
+      margin-bottom: 2.4rem;
     }
   }
 
@@ -54,6 +50,7 @@
 }
 
 .alphabet {
+  color: rgba(0, 0, 0, 0.2);
   display: flex;
   flex-wrap: wrap;
   font-weight: 700;
@@ -66,3 +63,10 @@
     margin-right: 3%;
   }
 }
+
+.articlesCounter {
+  @include font-size(1.2rem);
+
+  margin-left: 0.5em;
+  vertical-align: super;
+}