diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss
index a68b6e5b..ad75417e 100644
--- a/src/components/Author/Card.module.scss
+++ b/src/components/Author/Card.module.scss
@@ -15,12 +15,24 @@
 .authorDetails {
   display: flex;
   flex: 1;
-  padding-right: 1.2rem;
+  //padding-right: 1.2rem;
   width: max-content;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+  }
 }
 
 .authorDetailsWrapper {
-  flex: 1;
+  flex: 1 100%;
+
+  @include media-breakpoint-up(sm) {
+    flex: 1;
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-right: 1.2rem;
+  }
 }
 
 .authorName {
@@ -33,6 +45,7 @@
 .authorAbout {
   font-size: 1.5rem;
   color: rgb(0 0 0 / 60%);
+  word-break: break-word;
 }
 
 .authorSubscribe {
@@ -118,6 +131,10 @@
 
   button {
     margin-right: 0.5em;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
@@ -221,3 +238,22 @@
     vertical-align: middle;
   }
 }
+
+.authorsListItem {
+  .authorName {
+    @include font-size(2.2rem);
+    font-weight: bold;
+  }
+
+  .authorSubscribe {
+    align-items: baseline;
+
+    @include media-breakpoint-down(sm) {
+      padding: 1rem 0 0;
+    }
+  }
+
+  .buttonLabel {
+    display: block;
+  }
+}
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index 4608163c..4477ee34 100644
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@@ -1,7 +1,7 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from './Userpic'
 import { Icon } from '../Nav/Icon'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { createMemo, For, Show } from 'solid-js'
 import { translit } from '../../utils/ru2en'
 import { t } from '../../utils/intl'
@@ -19,6 +19,7 @@ interface AuthorCardProps {
   author: Author
   isAuthorPage?: boolean
   noSocialButtons?: boolean
+  isAuthorsList?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -36,51 +37,81 @@ export const AuthorCard = (props: AuthorCardProps) => {
   }
   // TODO: reimplement AuthorCard
   return (
-    <div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}>
-      <Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} />
+    <div
+      class={clsx(styles.author)}
+      classList={{
+        [styles.authorPage]: props.isAuthorPage,
+        [styles.authorsListItem]: props.isAuthorsList
+      }}
+    >
+      <Userpic
+        user={props.author}
+        hasLink={props.hasLink}
+        isBig={props.isAuthorPage}
+        isAuthorsList={props.isAuthorsList}
+      />
 
-      <div class={style.authorDetails}>
-        <div class={style.authorDetailsWrapper}>
+      <div class={styles.authorDetails}>
+        <div class={styles.authorDetailsWrapper}>
           <Show when={props.hasLink}>
-            <a class={style.authorName} href={`/author/${props.author.slug}`}>
+            <a class={styles.authorName} href={`/author/${props.author.slug}`}>
               {name()}
             </a>
           </Show>
           <Show when={!props.hasLink}>
-            <div class={style.authorName}>{name()}</div>
+            <div class={styles.authorName}>{name()}</div>
           </Show>
 
           <Show when={!props.hideDescription}>
-            <div class={style.authorAbout}>{bio()}</div>
+            <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
+              {bio()}
+            </div>
           </Show>
         </div>
 
         <Show when={canFollow()}>
-          <div class={style.authorSubscribe}>
+          <div class={styles.authorSubscribe}>
             <Show
               when={subscribed()}
               fallback={
                 <button
                   onClick={() => follow}
-                  class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                  class={clsx('button', styles.button)}
+                  classList={{
+                    [styles.buttonSubscribe]: !props.isAuthorsList,
+                    'button--subscribe': !props.isAuthorsList,
+                    'button--subscribe-topic': props.isAuthorsList,
+                    [styles.buttonWrite]: props.isAuthorsList
+                  }}
                 >
-                  <Icon name="author-subscribe" class={style.icon} />
-                  <span class={style.buttonLabel}>&nbsp;{t('Follow')}</span>
+                  <Show when={!props.isAuthorsList}>
+                    <Icon name="author-subscribe" class={styles.icon} />
+                    &nbsp;
+                  </Show>
+                  <span class={styles.buttonLabel}>{t('Follow')}</span>
                 </button>
               }
             >
               <button
                 onClick={() => unfollow}
-                class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                classList={{
+                  [styles.buttonSubscribe]: !props.isAuthorsList,
+                  'button--subscribe': !props.isAuthorsList,
+                  'button--subscribe-topic': props.isAuthorsList,
+                  [styles.buttonWrite]: props.isAuthorsList
+                }}
               >
-                <Icon name="author-unsubscribe" class={style.icon} />
-                <span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span>
+                <Show when={!props.isAuthorsList}>
+                  <Icon name="author-unsubscribe" class={styles.icon} />
+                  &nbsp;
+                </Show>
+                <span class={styles.buttonLabel}>{t('Unfollow')}</span>
               </button>
             </Show>
 
-            <Show when={!props.compact}>
-              <button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
-                <Icon name="edit" class={style.icon} />
+            <Show when={!props.compact && !props.isAuthorsList}>
+              <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
+                <Icon name="edit" class={styles.icon} />
                 {t('Write')}
               </button>
 
diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss
index 7006922a..20ed085e 100644
--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@@ -20,7 +20,7 @@
     border: 2px solid black;
     background-color: white;
     text-align: center;
-    line-height: 32px;
+    line-height: 28px;
   }
 
   .anonymous {
@@ -47,3 +47,15 @@
     width: 100%;
   }
 }
+
+.authorsList {
+  margin-right: 2.4rem;
+  max-height: 6.8rem;
+  min-width: 6.8rem;
+  height: 6.8rem;
+  width: 6.8rem;
+
+  .userpic {
+    line-height: 6.4rem;
+  }
+}
diff --git a/src/components/Author/Userpic.tsx b/src/components/Author/Userpic.tsx
index 0ed8744a..75dc918b 100644
--- a/src/components/Author/Userpic.tsx
+++ b/src/components/Author/Userpic.tsx
@@ -1,6 +1,6 @@
 import { Show } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
-import style from './Userpic.module.scss'
+import styles from './Userpic.module.scss'
 import { clsx } from 'clsx'
 
 interface UserpicProps {
@@ -8,6 +8,7 @@ interface UserpicProps {
   hasLink?: boolean
   isBig?: boolean
   class?: string
+  isAuthorsList?: boolean
 }
 
 export default (props: UserpicProps) => {
@@ -18,7 +19,13 @@ export default (props: UserpicProps) => {
   }
 
   return (
-    <div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}>
+    <div
+      class={clsx(styles.circlewrap, props.class)}
+      classList={{
+        [styles.big]: props.isBig,
+        [styles.authorsList]: props.isAuthorsList
+      }}
+    >
       <Show when={props.hasLink}>
         <a href={`/author/${props.user.slug}`}>
           <Show
@@ -31,7 +38,7 @@ export default (props: UserpicProps) => {
               />
             }
           >
-            <div class={style.userpic}>{letters()}</div>
+            <div class={styles.userpic}>{letters()}</div>
           </Show>
         </a>
       </Show>
@@ -47,7 +54,7 @@ export default (props: UserpicProps) => {
             />
           }
         >
-          <div class={style.userpic}>{letters()}</div>
+          <div class={styles.userpic}>{letters()}</div>
         </Show>
       </Show>
     </div>
diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx
index b4d690ff..b1158c60 100644
--- a/src/components/Pages/about/GuidePage.tsx
+++ b/src/components/Pages/about/GuidePage.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
 export const GuidePage = () => {
   const title = t('How it works')
 
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -28,12 +28,14 @@ export const GuidePage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#how-it-works">{title}</a>
diff --git a/src/components/Pages/about/HelpPage.tsx b/src/components/Pages/about/HelpPage.tsx
index 1a8cd4bb..34180213 100644
--- a/src/components/Pages/about/HelpPage.tsx
+++ b/src/components/Pages/about/HelpPage.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
 // const title = t('Support us')
 
 export const HelpPage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -25,12 +25,14 @@ export const HelpPage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx
index f5cb088a..3e7101af 100644
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@@ -9,7 +9,7 @@ import { Icon } from '../../Nav/Icon'
 // title={t('Manifest')}
 
 export const ManifestPage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -29,12 +29,14 @@ export const ManifestPage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#manifest">Манифест</a>
@@ -104,7 +106,7 @@ export const ManifestPage = () => {
               независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
               следующими способами:
             </p>
-            <details>
+            <details open>
               <summary>
                 <h3 id="contribute">Предлагать материалы</h3>
               </summary>
diff --git a/src/components/Pages/about/TermsOfUsePage.tsx b/src/components/Pages/about/TermsOfUsePage.tsx
index 7dad2295..3a300c00 100644
--- a/src/components/Pages/about/TermsOfUsePage.tsx
+++ b/src/components/Pages/about/TermsOfUsePage.tsx
@@ -5,7 +5,7 @@ import { Icon } from '../../Nav/Icon'
 // const title = t('Terms of use')
 
 export const TermsOfUsePage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -23,12 +23,14 @@ export const TermsOfUsePage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#terms-of-use">Пользовательское соглашение</a>
diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 0f499cdd..4d68d697 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -3,10 +3,6 @@
   margin-top: 3.2rem;
 
   .stats & {
-    @include media-breakpoint-down(sm) {
-      margin-left: 0;
-    }
-
     .topicDetailsItem {
       margin-bottom: 1.2rem;
     }
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 070738ba..2ba33ed0 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -57,81 +57,80 @@ export const AllAuthorsView = (props: Props) => {
   // log.debug(getSearchParams())
 
   return (
-    <div class={styles.allTopicsPage}>
+    <div class={clsx(styles.allTopicsPage, 'container')}>
       <Show when={sortedAuthors().length > 0}>
-        <div class="wide-container">
-          <div class="shift-content">
-            <div class="row">
-              <div class={clsx(styles.pageHeader, 'col-lg-9')}>
-                <h1>{t('Authors')}</h1>
-                <p>{t('Subscribe who you like to tune your personal feed')}</p>
-              </div>
+        <div class="shift-content">
+          <div class="row">
+            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
+              <h1>{t('Authors')}</h1>
+              <p>{t('Subscribe who you like to tune your personal feed')}</p>
             </div>
-            <div class="row">
-              <div class="col">
-                <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
-                  <li classList={{ selected: searchParams().by === 'shouts' }}>
-                    <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
-                      {t('By shouts')}
-                    </a>
-                  </li>
-                  <li classList={{ selected: searchParams().by === 'rating' }}>
-                    <a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
-                      {t('By rating')}
-                    </a>
-                  </li>
-                  <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
-                    <a href="/authors" onClick={handleClientRouteLinkClick}>
-                      {t('By alphabet')}
-                    </a>
-                  </li>
-                  <li class="view-switcher__search">
-                    <a href="/authors/search">
-                      <Icon name="search" />
-                      {t('Search author')}
-                    </a>
-                  </li>
-                </ul>
-                <Show
-                  when={!searchParams().by || searchParams().by === 'name'}
-                  fallback={() => (
-                    <div class="stats">
-                      <For each={sortedAuthors()}>
-                        {(author) => (
-                          <AuthorCard
-                            author={author}
-                            compact={false}
-                            hasLink={true}
-                            subscribed={subscribed(author.slug)}
-                            noSocialButtons={true}
-                          />
-                        )}
-                      </For>
-                    </div>
-                  )}
-                >
-                  <For each={sortedKeys()}>
-                    {(letter) => (
-                      <div class={clsx(styles.group, 'group')}>
-                        <h2>{letter}</h2>
-                        <div class="container">
-                          <div class="row">
-                            <For each={byLetter()[letter]}>
-                              {(author: Author) => (
-                                <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
-                                  <div class="topic-title">
-                                    <a href={`/author/${author.slug}`}>{author.name}</a>
-                                  </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-10 col-xl-8">
+              <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+                <li classList={{ selected: searchParams().by === 'shouts' }}>
+                  <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
+                    {t('By shouts')}
+                  </a>
+                </li>
+                <li classList={{ selected: searchParams().by === 'rating' }}>
+                  <a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
+                    {t('By rating')}
+                  </a>
+                </li>
+                <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
+                  <a href="/authors" onClick={handleClientRouteLinkClick}>
+                    {t('By alphabet')}
+                  </a>
+                </li>
+                <li class="view-switcher__search">
+                  <a href="/authors/search">
+                    <Icon name="search" />
+                    {t('Search author')}
+                  </a>
+                </li>
+              </ul>
+              <Show
+                when={!searchParams().by || searchParams().by === 'name'}
+                fallback={() => (
+                  <div class={styles.stats}>
+                    <For each={sortedAuthors()}>
+                      {(author) => (
+                        <AuthorCard
+                          author={author}
+                          compact={false}
+                          hasLink={true}
+                          subscribed={subscribed(author.slug)}
+                          noSocialButtons={true}
+                          isAuthorsList={true}
+                        />
+                      )}
+                    </For>
+                  </div>
+                )}
+              >
+                <For each={sortedKeys()}>
+                  {(letter) => (
+                    <div class={clsx(styles.group, 'group')}>
+                      <h2>{letter}</h2>
+                      <div class="container">
+                        <div class="row">
+                          <For each={byLetter()[letter]}>
+                            {(author: Author) => (
+                              <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
+                                <div class="topic-title">
+                                  <a href={`/author/${author.slug}`}>{author.name}</a>
                                 </div>
-                              )}
-                            </For>
-                          </div>
+                              </div>
+                            )}
+                          </For>
                         </div>
                       </div>
-                    )}
-                  </For>
-                </Show>
-              </div>
+                    </div>
+                  )}
+                </For>
+              </Show>
             </div>
           </div>
         </div>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index 618811a4..687385eb 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -54,90 +54,80 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
 
   return (
-    <div class={styles.allTopicsPage}>
+    <div class={clsx(styles.allTopicsPage, 'container')}>
       <Show when={sortedTopics().length > 0}>
-        <div class="wide-container">
-          <div class="shift-content">
-            <div class="row">
-              <div class={clsx(styles.pageHeader, 'col-lg-9')}>
-                <h1>{t('Topics')}</h1>
-                <div class="col-lg-10">
-                  <p>{t('Subscribe what you like to tune your personal feed')}</p>
-                </div>
+        <div class="shift-content">
+          <div class="row">
+            <div class={clsx(styles.pageHeader, 'col-lg-9')}>
+              <h1>{t('Topics')}</h1>
+              <div class="col-lg-10">
+                <p>{t('Subscribe what you like to tune your personal feed')}</p>
               </div>
             </div>
 
-            <div class="row">
-              <div class="col">
-                <div class="row">
-                  <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
-                    <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
-                      <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
-                        {t('By shouts')}
-                      </a>
-                    </li>
-                    <li classList={{ selected: searchParams().by === 'authors' }}>
-                      <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
-                        {t('By authors')}
-                      </a>
-                    </li>
-                    <li classList={{ selected: searchParams().by === 'title' }}>
-                      <a
-                        href="/topics?by=title"
-                        onClick={(ev) => {
-                          // just an example
-                          ev.preventDefault()
-                          changeSearchParam('by', 'title')
-                        }}
-                      >
-                        {t('By alphabet')}
-                      </a>
-                    </li>
-                    <li class="view-switcher__search">
-                      <a href="/topic/search">
-                        <Icon name="search" />
-                        {t('Search topic')}
-                      </a>
-                    </li>
-                  </ul>
-                </div>
+            <div class="col-12">
+              <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
+                <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
+                  <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
+                    {t('By shouts')}
+                  </a>
+                </li>
+                <li classList={{ selected: searchParams().by === 'authors' }}>
+                  <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
+                    {t('By authors')}
+                  </a>
+                </li>
+                <li classList={{ selected: searchParams().by === 'title' }}>
+                  <a
+                    href="/topics?by=title"
+                    onClick={(ev) => {
+                      // just an example
+                      ev.preventDefault()
+                      changeSearchParam('by', 'title')
+                    }}
+                  >
+                    {t('By alphabet')}
+                  </a>
+                </li>
+                <li class="view-switcher__search">
+                  <a href="/topic/search">
+                    <Icon name="search" />
+                    {t('Search topic')}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
 
-                <Show
-                  when={searchParams().by === 'title'}
-                  fallback={() => (
-                    <div class={cardStyles.stats}>
-                      <For each={sortedTopics()}>
+          <Show
+            when={searchParams().by === 'title'}
+            fallback={() => (
+              <For each={sortedTopics()}>
+                {(topic) => <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />}
+              </For>
+            )}
+          >
+            <For each={sortedKeys()}>
+              {(letter) => (
+                <div class={clsx(styles.group, 'group')}>
+                  <h2>{letter}</h2>
+                  <div class="container">
+                    <div class="row">
+                      <For each={byLetter()[letter]}>
                         {(topic) => (
-                          <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
+                          <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
+                            <div class="topic-title">
+                              <a href={`/topic/${topic.slug}`}>{topic.title}</a>
+                            </div>
+                          </div>
                         )}
                       </For>
                     </div>
-                  )}
-                >
-                  <For each={sortedKeys()}>
-                    {(letter) => (
-                      <div class={clsx(styles.group, 'group')}>
-                        <h2>{letter}</h2>
-                        <div class="container">
-                          <div class="row">
-                            <For each={byLetter()[letter]}>
-                              {(topic) => (
-                                <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
-                                  <div class="topic-title">
-                                    <a href={`/topic/${topic.slug}`}>{topic.title}</a>
-                                  </div>
-                                </div>
-                              )}
-                            </For>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                  </For>
-                </Show>
-              </div>
-            </div>
-          </div>
+                  </div>
+                </div>
+              )}
+            </For>
+          </Show>
         </div>
       </Show>
     </div>
diff --git a/src/styles/AllTopics.module.scss b/src/styles/AllTopics.module.scss
index 5dca6c2a..d6aecc23 100644
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@@ -1,11 +1,4 @@
 .allTopicsPage {
-  .pageHeader,
-  .group h2 {
-    @include media-breakpoint-down(sm) {
-      margin-left: 1.3rem;
-    }
-  }
-
   .group {
     font-weight: bold;
     margin: 3em 0 9.6rem;
@@ -39,8 +32,6 @@
   }
 }
 
-.viewSwitcher {
-  @include media-breakpoint-down(sm) {
-    margin: 0 2.6rem;
-  }
+.stats {
+  margin-top: 2.4rem;
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 0adff8f6..18ef91a6 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -250,8 +250,8 @@ button {
 }
 
 .button--content-index {
-  border: 2px solid #fff;
   background: none;
+  border: 2px solid #fff;
   height: 3.2rem;
   float: right;
   padding: 0;
@@ -271,15 +271,31 @@ button {
     right: $container-padding-x;
   }
 
+  .icon {
+    background: #fff;
+    transition: filter 0.3s;
+  }
+
   .icon,
   img {
+    height: 100%;
     vertical-align: middle;
     width: auto;
   }
 
   &:hover {
     .icon {
-      opacity: 0.5;
+      filter: invert(1);
+    }
+  }
+
+  .expanded {
+    border-radius: 100%;
+    overflow: hidden;
+
+    img {
+      height: auto;
+      margin-top: 0.8rem;
     }
   }
 }
@@ -515,6 +531,7 @@ figcaption {
 
 .view-switcher__search {
   text-align: right;
+  white-space: nowrap;
 
   @include media-breakpoint-up(sm) {
     flex: 1;
@@ -643,6 +660,11 @@ astro-island {
 
 .container {
   max-width: 1400px;
+  width: auto;
+
+  @include media-breakpoint-down(sm) {
+    //padding: 0 $container-padding-x * 0.5;
+  }
 }
 
 .container--static-page {
@@ -716,6 +738,10 @@ astro-island {
   a {
     border: none;
   }
+
+  h4 {
+    @include font-size(1.6rem);
+  }
 }
 
 .load-more-container {