diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index 79798cf061..e2f18d1c8d 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -104,7 +104,7 @@
     "description": ""
   },
   "3uQKhx": {
-    "defaultMessage": "若你希望向 Matters 提出建議，或遭遇操作異常，请發送郵件至",
+    "defaultMessage": "若你希望向 Matters 提出建議，或遭遇操作異常，請發送郵件至",
     "description": "src/views/Help/index.tsx"
   },
   "3yk8fB": {
diff --git a/package.json b/package.json
index 337c5edf92..1bcd6985f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <hi@matters.news>",
diff --git a/src/components/List/styles.css b/src/components/List/styles.css
index 789643d337..d5b21b3554 100644
--- a/src/components/List/styles.css
+++ b/src/components/List/styles.css
@@ -1,30 +1,34 @@
 .list {
   &.has-border {
-    & :global(> .list-item + .list-item) {
-      @mixin border-top-grey;
+    & :global(> .list-item) {
+      @mixin border-bottom-grey;
+
+      border-bottom-style: dashed;
+    }
 
-      border-top-style: dashed;
+    & :global(> .list-item:last-child) {
+      border-bottom: 0;
     }
   }
 
   &.spacing-y-base {
-    & :global(> .list-item + .list-item) {
-      padding-top: calc(var(--spacing-base) / 2);
-      margin-top: calc(var(--spacing-base) / 2);
+    & :global(> .list-item) {
+      padding-bottom: calc(var(--spacing-base) / 2);
+      margin-bottom: calc(var(--spacing-base) / 2);
     }
   }
 
   &.spacing-y-loose {
     & :global(> .list-item) {
-      padding-top: calc(var(--spacing-loose) / 2);
-      margin-top: calc(var(--spacing-loose) / 2);
+      padding-bottom: calc(var(--spacing-loose) / 2);
+      margin-bottom: calc(var(--spacing-loose) / 2);
     }
   }
 
   &.spacing-y-xloose {
     & :global(> .list-item) {
-      padding-top: calc(var(--spacing-x-loose) / 2);
-      margin-top: calc(var(--spacing-x-loose) / 2);
+      padding-bottom: calc(var(--spacing-x-loose) / 2);
+      margin-bottom: calc(var(--spacing-x-loose) / 2);
     }
   }
 
diff --git a/src/components/UserProfile/FollowingDialog/Content/index.tsx b/src/components/UserProfile/FollowingDialog/Content/index.tsx
index e1b37440f4..77766dee45 100644
--- a/src/components/UserProfile/FollowingDialog/Content/index.tsx
+++ b/src/components/UserProfile/FollowingDialog/Content/index.tsx
@@ -11,7 +11,7 @@ const FollowingDialogContent = () => {
   const [feedType, setFeedType] = useState<FollowingFeedType>('user')
 
   return (
-    <Dialog.Content>
+    <Dialog.Content spacing={['base', 'base']}>
       <FeedType type={feedType} setFeedType={setFeedType} />
       {feedType === 'circle' && <CirclesFeed />}
       {feedType === 'tag' && <TagsFeed />}
diff --git a/src/components/UserProfile/FollowingDialog/UsersFeed/index.tsx b/src/components/UserProfile/FollowingDialog/UsersFeed/index.tsx
index d4efa74b72..99d11854fb 100644
--- a/src/components/UserProfile/FollowingDialog/UsersFeed/index.tsx
+++ b/src/components/UserProfile/FollowingDialog/UsersFeed/index.tsx
@@ -124,6 +124,7 @@ const UsersFeed = () => {
                   id: node.id,
                 })
               }
+              spacing={['tight', 0]}
             />
           </List.Item>
         ))}
diff --git a/src/views/Follow/Feed/FollowingRecommendArticle/styles.css b/src/views/Follow/Feed/FollowingRecommendArticle/styles.css
index 6f483f554d..f22e79868c 100644
--- a/src/views/Follow/Feed/FollowingRecommendArticle/styles.css
+++ b/src/views/Follow/Feed/FollowingRecommendArticle/styles.css
@@ -20,12 +20,15 @@
   margin-right: var(--spacing-base);
 
   & .title {
-    @mixin line-clamp;
-
     margin-bottom: var(--spacing-x-tight);
     font-size: var(--font-size-xm);
     font-weight: var(--font-weight-medium);
-    -webkit-line-clamp: 2;
+
+    & :global(> a) {
+      @mixin line-clamp;
+
+      -webkit-line-clamp: 2;
+    }
   }
 
   & .author {
diff --git a/src/views/Follow/Feed/RecommendArticleActivity/index.tsx b/src/views/Follow/Feed/RecommendArticleActivity/index.tsx
index 97625599b3..8e792e9051 100644
--- a/src/views/Follow/Feed/RecommendArticleActivity/index.tsx
+++ b/src/views/Follow/Feed/RecommendArticleActivity/index.tsx
@@ -35,7 +35,7 @@ const RecommendArticleActivity = ({ articles, source, location }: Props) => {
       : 'ArticleRecommendationActivity'
 
   return (
-    <>
+    <section className="container">
       <Slides header={<FollowingRecommendHead type={type} />}>
         {articles.map((article, index) => (
           <Slides.Item
@@ -64,10 +64,10 @@ const RecommendArticleActivity = ({ articles, source, location }: Props) => {
             </section>
           </Slides.Item>
         ))}
-        <style jsx>{styles}</style>
       </Slides>
       <Waypoint onEnter={() => setMountTracker(true)} />
-    </>
+      <style jsx>{styles}</style>
+    </section>
   )
 }
 
diff --git a/src/views/Follow/Feed/RecommendArticleActivity/styles.css b/src/views/Follow/Feed/RecommendArticleActivity/styles.css
index b6d05893e2..a80ff171b0 100644
--- a/src/views/Follow/Feed/RecommendArticleActivity/styles.css
+++ b/src/views/Follow/Feed/RecommendArticleActivity/styles.css
@@ -2,6 +2,10 @@
   --recommend-article-card-height: 163px;
 }
 
+.container {
+  padding-bottom: var(--spacing-x-tight);
+}
+
 .item {
   @mixin border-grey;
 
diff --git a/src/views/Follow/Feed/RecommendCircleActivity/index.tsx b/src/views/Follow/Feed/RecommendCircleActivity/index.tsx
index d7dba6ed3d..4735a53232 100644
--- a/src/views/Follow/Feed/RecommendCircleActivity/index.tsx
+++ b/src/views/Follow/Feed/RecommendCircleActivity/index.tsx
@@ -18,27 +18,29 @@ const RecommendCircleActivity = ({ circles, location }: Props) => {
   }
 
   return (
-    <Slides header={<FollowingRecommendHead type="circle" />}>
-      {circles.map((circle, index) => (
-        <Slides.Item
-          size="md"
-          key={index}
-          onClick={() => {
-            analytics.trackEvent('click_feed', {
-              type: 'following',
-              contentType: 'CircleRecommendationActivity',
-              location: `${location}.${index}`,
-              id: circle.id,
-            })
-          }}
-        >
-          <section className="item">
-            <FollowingRecommendCircle circle={circle} />
-          </section>
-        </Slides.Item>
-      ))}
+    <section className="container">
+      <Slides header={<FollowingRecommendHead type="circle" />}>
+        {circles.map((circle, index) => (
+          <Slides.Item
+            size="md"
+            key={index}
+            onClick={() => {
+              analytics.trackEvent('click_feed', {
+                type: 'following',
+                contentType: 'CircleRecommendationActivity',
+                location: `${location}.${index}`,
+                id: circle.id,
+              })
+            }}
+          >
+            <section className="item">
+              <FollowingRecommendCircle circle={circle} />
+            </section>
+          </Slides.Item>
+        ))}
+      </Slides>
       <style jsx>{styles}</style>
-    </Slides>
+    </section>
   )
 }
 
diff --git a/src/views/Follow/Feed/RecommendCircleActivity/styles.css b/src/views/Follow/Feed/RecommendCircleActivity/styles.css
index c20d2fd7fe..4b8ba25a7c 100644
--- a/src/views/Follow/Feed/RecommendCircleActivity/styles.css
+++ b/src/views/Follow/Feed/RecommendCircleActivity/styles.css
@@ -1,3 +1,7 @@
+.container {
+  padding-bottom: var(--spacing-x-tight);
+}
+
 .item {
   @mixin border-grey;
 
diff --git a/src/views/Follow/Feed/RecommendUserActivity/index.tsx b/src/views/Follow/Feed/RecommendUserActivity/index.tsx
index 16c99904aa..0f6707f4ea 100644
--- a/src/views/Follow/Feed/RecommendUserActivity/index.tsx
+++ b/src/views/Follow/Feed/RecommendUserActivity/index.tsx
@@ -17,27 +17,29 @@ const RecommendUserActivity = ({ users }: Props) => {
   }
 
   return (
-    <Slides header={<FollowingRecommendHead type="user" />}>
-      {users.map((user, index) => (
-        <Slides.Item
-          size="md"
-          key={index}
-          onClick={() => {
-            analytics.trackEvent('click_feed', {
-              type: 'following',
-              contentType: 'UserRecommendationActivity',
-              location: `${location}.${index}`,
-              id: user.id,
-            })
-          }}
-        >
-          <section className="item">
-            <FollowingRecommendUser user={user} />
-          </section>
-        </Slides.Item>
-      ))}
+    <section className="container">
+      <Slides header={<FollowingRecommendHead type="user" />}>
+        {users.map((user, index) => (
+          <Slides.Item
+            size="md"
+            key={index}
+            onClick={() => {
+              analytics.trackEvent('click_feed', {
+                type: 'following',
+                contentType: 'UserRecommendationActivity',
+                location: `${location}.${index}`,
+                id: user.id,
+              })
+            }}
+          >
+            <section className="item">
+              <FollowingRecommendUser user={user} />
+            </section>
+          </Slides.Item>
+        ))}
+      </Slides>
       <style jsx>{styles}</style>
-    </Slides>
+    </section>
   )
 }
 
diff --git a/src/views/Follow/Feed/RecommendUserActivity/styles.css b/src/views/Follow/Feed/RecommendUserActivity/styles.css
index c20d2fd7fe..4b8ba25a7c 100644
--- a/src/views/Follow/Feed/RecommendUserActivity/styles.css
+++ b/src/views/Follow/Feed/RecommendUserActivity/styles.css
@@ -1,3 +1,7 @@
+.container {
+  padding-bottom: var(--spacing-x-tight);
+}
+
 .item {
   @mixin border-grey;
 
diff --git a/src/views/Follow/Feed/index.tsx b/src/views/Follow/Feed/index.tsx
index cd53fea76a..8d3be3cb9c 100644
--- a/src/views/Follow/Feed/index.tsx
+++ b/src/views/Follow/Feed/index.tsx
@@ -84,54 +84,38 @@ const FollowingFeed = () => {
 
       <InfiniteScroll hasNextPage={pageInfo.hasNextPage} loadMore={loadMore}>
         <List responsiveWrapper>
-          {edges.map(({ node }, i) => {
-            if (node.__typename === 'ArticleRecommendationActivity') {
-              return (
-                <section key={`${node.__typename}:${i}`}>
-                  <RecommendArticleActivity
-                    location={i}
-                    articles={node.recommendArticles}
-                    source={node.source}
-                  />
-                </section>
-              )
-            }
-
-            if (node.__typename === 'CircleRecommendationActivity') {
-              return (
-                <section key={`${node.__typename}:${i}`}>
-                  <RecommendCircleActivity
-                    location={i}
-                    circles={node.recommendCircles}
-                  />
-                </section>
-              )
-            }
-
-            if (node.__typename === 'UserRecommendationActivity') {
-              return (
-                <section key={`${node.__typename}:${i}`}>
-                  <RecommendUserActivity users={node.recommendUsers} />
-                </section>
-              )
-            }
-            return (
-              <List.Item key={`${node.__typename}:${i}`}>
-                {node.__typename === 'UserPublishArticleActivity' && (
-                  <UserPublishArticleActivity location={i} {...node} />
-                )}
-                {node.__typename === 'UserBroadcastCircleActivity' && (
-                  <UserBroadcastCircleActivity {...node} />
-                )}
-                {node.__typename === 'UserCreateCircleActivity' && (
-                  <UserCreateCircleActivity location={i} {...node} />
-                )}
-                {node.__typename === 'UserAddArticleTagActivity' && (
-                  <UserAddArticleTagActivity location={i} {...node} />
-                )}
-              </List.Item>
-            )
-          })}
+          {edges.map(({ node }, i) => (
+            <List.Item key={`${node.__typename}:${i}`}>
+              {node.__typename === 'UserPublishArticleActivity' && (
+                <UserPublishArticleActivity location={i} {...node} />
+              )}
+              {node.__typename === 'UserBroadcastCircleActivity' && (
+                <UserBroadcastCircleActivity {...node} />
+              )}
+              {node.__typename === 'UserCreateCircleActivity' && (
+                <UserCreateCircleActivity location={i} {...node} />
+              )}
+              {node.__typename === 'UserAddArticleTagActivity' && (
+                <UserAddArticleTagActivity location={i} {...node} />
+              )}
+              {node.__typename === 'ArticleRecommendationActivity' && (
+                <RecommendArticleActivity
+                  location={i}
+                  articles={node.recommendArticles}
+                  source={node.source}
+                />
+              )}
+              {node.__typename === 'CircleRecommendationActivity' && (
+                <RecommendCircleActivity
+                  location={i}
+                  circles={node.recommendCircles}
+                />
+              )}
+              {node.__typename === 'UserRecommendationActivity' && (
+                <RecommendUserActivity users={node.recommendUsers} />
+              )}
+            </List.Item>
+          ))}
         </List>
       </InfiniteScroll>
 
diff --git a/src/views/Follow/PickAuthors/AuthorPicker/index.tsx b/src/views/Follow/PickAuthors/AuthorPicker/index.tsx
index 824d5d63c4..fa84c4c708 100644
--- a/src/views/Follow/PickAuthors/AuthorPicker/index.tsx
+++ b/src/views/Follow/PickAuthors/AuthorPicker/index.tsx
@@ -8,6 +8,7 @@ import {
   List,
   PageHeader,
   QueryError,
+  ResponsiveWrapper,
   Spinner,
   TextIcon,
   Translate,
@@ -86,13 +87,15 @@ export const AuthorPicker = ({ title }: { title: React.ReactNode }) => {
       {error && <QueryError error={error} />}
 
       {!loading && (
-        <List hasBorder={false}>
-          {edges.map(({ node, cursor }) => (
-            <List.Item key={cursor}>
-              <UserDigest.Rich user={node} />
-            </List.Item>
-          ))}
-        </List>
+        <ResponsiveWrapper>
+          <List hasBorder={false}>
+            {edges.map(({ node, cursor }) => (
+              <List.Item key={cursor}>
+                <UserDigest.Rich user={node} spacing={['tight', 0]} />
+              </List.Item>
+            ))}
+          </List>
+        </ResponsiveWrapper>
       )}
 
       <style jsx>{styles}</style>
diff --git a/src/views/Follow/PickAuthors/AuthorPicker/styles.css b/src/views/Follow/PickAuthors/AuthorPicker/styles.css
index fc615c26bc..74d2cd1ebb 100644
--- a/src/views/Follow/PickAuthors/AuthorPicker/styles.css
+++ b/src/views/Follow/PickAuthors/AuthorPicker/styles.css
@@ -1,6 +1,10 @@
 .container {
   & :global(> header) {
     padding: var(--spacing-base);
+
+    @media (--sm-up) {
+      padding: var(--spacing-base) 0;
+    }
   }
 }
 
diff --git a/src/views/Home/Announcements/Carousel/styles.css b/src/views/Home/Announcements/Carousel/styles.css
index f86c6293d2..d7f9e934c2 100644
--- a/src/views/Home/Announcements/Carousel/styles.css
+++ b/src/views/Home/Announcements/Carousel/styles.css
@@ -22,7 +22,13 @@ header {
   left: var(--spacing-base);
   z-index: 1;
   height: var(--announcement-header-height);
-  padding: var(--spacing-x-tight) var(--spacing-base) 0;
+  padding-top: var(--spacing-x-tight);
+  padding-left: var(--spacing-x-tight);
+
+  @media (--sm-up) {
+    padding-left: 0;
+    margin-left: calc(0 - var(--spacing-x-tight));
+  }
 
   & .left {
     @mixin flex-center-start;
diff --git a/src/views/Home/Feed/Authors/index.tsx b/src/views/Home/Feed/Authors/index.tsx
index dd17292417..1aba489a73 100644
--- a/src/views/Home/Feed/Authors/index.tsx
+++ b/src/views/Home/Feed/Authors/index.tsx
@@ -7,6 +7,7 @@ import { FormattedMessage } from 'react-intl'
 import { PATHS } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
+  Media,
   QueryError,
   ShuffleButton,
   Slides,
@@ -80,11 +81,22 @@ const Authors = () => {
   }
 
   const SlidesHeader = (
-    <SectionHeader
-      type="authors"
-      rightButton={<ShuffleButton onClick={shuffle} />}
-      viewAll={false}
-    />
+    <>
+      <Media between={['md', 'xl']}>
+        <SectionHeader
+          type="authors"
+          rightButton={<ShuffleButton onClick={shuffle} />}
+          viewAll={true}
+        />
+      </Media>
+      <Media greaterThanOrEqual="xl">
+        <SectionHeader
+          type="authors"
+          rightButton={<ShuffleButton onClick={shuffle} />}
+          viewAll={false}
+        />
+      </Media>
+    </>
   )
 
   return (
@@ -123,17 +135,19 @@ const Authors = () => {
           ))}
       </Slides>
 
-      <section className="backToAll">
-        <ViewMoreCard
-          spacing={['tight', 'tight']}
-          href={PATHS.AUTHORS}
-          iconProps={{ size: 'sm' }}
-          textIconProps={{ size: 'sm', weight: 'md', spacing: 'xxtight' }}
-          textAlign="center"
-        >
-          <FormattedMessage defaultMessage="View All" description="" />
-        </ViewMoreCard>
-      </section>
+      <Media lessThan="md">
+        <section className="backToAll">
+          <ViewMoreCard
+            spacing={['tight', 'tight']}
+            href={PATHS.AUTHORS}
+            iconProps={{ size: 'sm' }}
+            textIconProps={{ size: 'sm', weight: 'md', spacing: 'xxtight' }}
+            textAlign="center"
+          >
+            <FormattedMessage defaultMessage="View All" description="" />
+          </ViewMoreCard>
+        </section>
+      </Media>
 
       <style jsx>{styles}</style>
     </section>
diff --git a/src/views/Home/Feed/Authors/styles.css b/src/views/Home/Feed/Authors/styles.css
index a57fd8b039..bbc555597d 100644
--- a/src/views/Home/Feed/Authors/styles.css
+++ b/src/views/Home/Feed/Authors/styles.css
@@ -1,6 +1,12 @@
 .authors {
-  margin-bottom: var(--spacing-x-loose);
-  border-bottom: 1px dashed var(--color-grey-lighter);
+  @mixin border-bottom-grey;
+
+  padding-bottom: var(--spacing-x-loose);
+  border-bottom-style: dashed;
+
+  @media (--sm-up) {
+    padding-bottom: var(--spacing-x-tight);
+  }
 
   & :global(.list-item > .card) {
     margin: 0 calc(var(--spacing-x-tight) * -1);
diff --git a/src/views/Home/Feed/Tags/index.tsx b/src/views/Home/Feed/Tags/index.tsx
index 7f19432c48..e292bbdf3e 100644
--- a/src/views/Home/Feed/Tags/index.tsx
+++ b/src/views/Home/Feed/Tags/index.tsx
@@ -7,6 +7,7 @@ import { FormattedMessage } from 'react-intl'
 import { PATHS } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
+  Media,
   QueryError,
   ShuffleButton,
   Slides,
@@ -88,11 +89,22 @@ const TagsFeed = () => {
   }
 
   const SlideHeader = (
-    <SectionHeader
-      type="tags"
-      rightButton={<ShuffleButton onClick={shuffle} />}
-      viewAll={false}
-    />
+    <>
+      <Media between={['md', 'xl']}>
+        <SectionHeader
+          type="tags"
+          rightButton={<ShuffleButton onClick={shuffle} />}
+          viewAll={true}
+        />
+      </Media>
+      <Media greaterThanOrEqual="xl">
+        <SectionHeader
+          type="tags"
+          rightButton={<ShuffleButton onClick={shuffle} />}
+          viewAll={false}
+        />
+      </Media>
+    </>
   )
 
   return (
@@ -126,18 +138,19 @@ const TagsFeed = () => {
             </Slides.Item>
           ))}
       </Slides>
-
-      <section className="backToAll">
-        <ViewMoreCard
-          spacing={['tight', 'tight']}
-          href={PATHS.TAGS}
-          iconProps={{ size: 'sm' }}
-          textIconProps={{ size: 'sm', weight: 'md', spacing: 'xxtight' }}
-          textAlign="center"
-        >
-          <FormattedMessage defaultMessage="View All" description="" />
-        </ViewMoreCard>
-      </section>
+      <Media lessThan="md">
+        <section className="backToAll">
+          <ViewMoreCard
+            spacing={['tight', 'tight']}
+            href={PATHS.TAGS}
+            iconProps={{ size: 'sm' }}
+            textIconProps={{ size: 'sm', weight: 'md', spacing: 'xxtight' }}
+            textAlign="center"
+          >
+            <FormattedMessage defaultMessage="View All" description="" />
+          </ViewMoreCard>
+        </section>
+      </Media>
 
       <style jsx>{styles}</style>
     </section>
diff --git a/src/views/Home/Feed/Tags/styles.css b/src/views/Home/Feed/Tags/styles.css
index 86e32595e0..f683899cf8 100644
--- a/src/views/Home/Feed/Tags/styles.css
+++ b/src/views/Home/Feed/Tags/styles.css
@@ -1,5 +1,12 @@
 .tags {
-  margin-bottom: var(--spacing-x-loose);
+  @mixin border-bottom-grey;
+
+  padding-bottom: var(--spacing-x-loose);
+  border-bottom-style: dashed;
+
+  @media (--sm-up) {
+    padding-bottom: var(--spacing-x-tight);
+  }
 
   & :global(.list-item > .card) {
     margin: 0 calc(var(--spacing-x-tight) * -1);
diff --git a/src/views/User/Articles/styles.css b/src/views/User/Articles/styles.css
index 4316974f4e..ce72024172 100644
--- a/src/views/User/Articles/styles.css
+++ b/src/views/User/Articles/styles.css
@@ -1,7 +1,7 @@
 .info {
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing-base);
+  padding-left: var(--spacing-base);
   margin: var(--spacing-x-tight) 0;
   color: var(--color-grey-dark);
   white-space: pre-wrap;