diff --git a/lang/default.json b/lang/default.json
index 30379f9a89..ad3125a28d 100644
--- a/lang/default.json
+++ b/lang/default.json
@@ -1,4 +1,8 @@
 {
+  "+7SAix": {
+    "defaultMessage": "Must be between 2-12 characters long.",
+    "description": ""
+  },
   "+a+2ug": {
     "defaultMessage": "Members",
     "description": ""
@@ -35,6 +39,10 @@
     "defaultMessage": "replied to your comment on",
     "description": "src/components/Notice/CommentCommentNotice/CommentNewReplyNotice.tsx"
   },
+  "/podGX": {
+    "defaultMessage": "Public",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
   "0Azlrb": {
     "defaultMessage": "Manage",
     "description": ""
@@ -47,10 +55,18 @@
     "defaultMessage": "Bug Bounty",
     "description": ""
   },
+  "1qQzV0": {
+    "defaultMessage": "Invitees",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "20bImY": {
     "defaultMessage": "Discussion",
     "description": ""
   },
+  "2CqWQE": {
+    "defaultMessage": "Total",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "2atspc": {
     "defaultMessage": "Drafts",
     "description": ""
@@ -63,6 +79,10 @@
     "defaultMessage": "Likes",
     "description": ""
   },
+  "2uwwz+": {
+    "defaultMessage": "Accumulated read time indicates the total time length that registered users read.",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
   "32bml8": {
     "defaultMessage": "Following",
     "description": "src/components/Layout/SideNav/index.tsx"
@@ -131,6 +151,14 @@
     "defaultMessage": "Start Creating",
     "description": ""
   },
+  "6BXcdo": {
+    "defaultMessage": "Set threshold for circle (per month)",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "6OBAOi": {
+    "defaultMessage": "subscribers_empty",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "6flWFg": {
     "defaultMessage": "Term of Services",
     "description": ""
@@ -151,6 +179,10 @@
     "defaultMessage": "The article has been added to the Trending",
     "description": "src/components/ArticleDigest/DropdownActions/SetTagSelectedButton.tsx"
   },
+  "8KFsZN": {
+    "defaultMessage": "Read Counts",
+    "description": ""
+  },
   "8cv9D4": {
     "defaultMessage": "Next Step",
     "description": ""
@@ -207,10 +239,22 @@
     "defaultMessage": "Start creating now!",
     "description": "src/components/Forms/EmailSignUpForm/Complete.tsx"
   },
+  "AYTnjk": {
+    "defaultMessage": "Followers",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
   "BHFHeY": {
     "defaultMessage": "commented in {commentCircle}",
     "description": "src/components/Notice/CommentNotice/CommentMentionedYouNotice.tsx"
   },
+  "Bc20la": {
+    "defaultMessage": "days",
+    "description": ""
+  },
+  "Bjdw71": {
+    "defaultMessage": "followers_empty",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
   "BjzRe8": {
     "defaultMessage": ". Take a look at your income",
     "description": "src/components/Notice/TransactionNotice/PaymentReceivedDonationNotice.tsx"
@@ -239,10 +283,22 @@
     "defaultMessage": "Settings",
     "description": ""
   },
+  "DMlmcU": {
+    "defaultMessage": "Free Trial",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "DXJ8ys": {
+    "defaultMessage": "Read counts indicates how many registered users read.",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
   "E8W3qa": {
     "defaultMessage": "Must be between 2-20 characters long. Chinese characters, letters, numbers and underscores are allowed.",
     "description": ""
   },
+  "EQeKnO": {
+    "defaultMessage": "Manage Invitation",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
   "EW5R4p": {
     "defaultMessage": "Request an update, ask, share and discuss",
     "description": "src/views/Circle/Discussion/Discussion.tsx"
@@ -271,10 +327,18 @@
     "defaultMessage": "Install MetaMask",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"
   },
+  "Fe682o": {
+    "defaultMessage": "Next Month (Estimation)",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
   "FhWC22": {
     "defaultMessage": "Matters Community",
     "description": ""
   },
+  "FmWYRt": {
+    "defaultMessage": "Free trial period",
+    "description": ""
+  },
   "GBm/sD": {
     "defaultMessage": "posted a new topic and mentioned you",
     "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx"
@@ -287,6 +351,10 @@
     "defaultMessage": "Analytics",
     "description": ""
   },
+  "GugBCe": {
+    "defaultMessage": "New Followers This Month",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
   "H0JBH6": {
     "defaultMessage": "Log Out",
     "description": ""
@@ -335,10 +403,18 @@
     "defaultMessage": "Your article has been published to decentralized network",
     "description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx"
   },
+  "JXdbo8": {
+    "defaultMessage": "Done",
+    "description": ""
+  },
   "Jc+W6M": {
     "defaultMessage": "resigned as tag maintainer. Would you like to be the new tag maintainer?",
     "description": "src/components/Notice/TagNotice/TagLeaveNotice.tsx"
   },
+  "JpS59y": {
+    "defaultMessage": "Accepted",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
   "Js/Fij": {
     "defaultMessage": "This article has been removed from Trending",
     "description": "src/components/ArticleDigest/DropdownActions/SetTagUnselectedButton.tsx"
@@ -355,6 +431,10 @@
     "defaultMessage": "Profile updated",
     "description": "src/components/UserProfile/DropdownActions/EditProfileDialog/Content.tsx"
   },
+  "KLQ1/z": {
+    "defaultMessage": "Circle successfully created",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
   "KMcrz8": {
     "defaultMessage": "Maintain Tag",
     "description": "src/views/TagDetail/Owner/index.tsx"
@@ -367,6 +447,14 @@
     "defaultMessage": "invites you to join Circle for",
     "description": "src/components/Notice/CircleNotice/CircleInvitationNotice.tsx"
   },
+  "L0J61B": {
+    "defaultMessage": "Free",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "L4NXXh": {
+    "defaultMessage": "Total",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
   "L7Si5/": {
     "defaultMessage": "Manage Community",
     "description": "src/views/TagDetail/DropdownActions/index.tsx"
@@ -375,6 +463,10 @@
     "defaultMessage": "Followed",
     "description": ""
   },
+  "LOefol": {
+    "defaultMessage": "Paywalled",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
   "LW1aX1": {
     "defaultMessage": "Congrats!",
     "description": "src/components/Notice/CircleNotice/CircleInvitationNotice.tsx"
@@ -391,6 +483,10 @@
     "defaultMessage": "Wallet address will be part of your digital identity and shown in your profile page.",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"
   },
+  "MDNaxs": {
+    "defaultMessage": "followers",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
   "MkwOFW": {
     "defaultMessage": "Read History",
     "description": ""
@@ -419,6 +515,14 @@
     "defaultMessage": "resigned as tag collaborator. You can invite new collaborators to join",
     "description": "src/components/Notice/TagNotice/TagLeaveEditorNotice.tsx"
   },
+  "O0QB1v": {
+    "defaultMessage": "Friends will receive free trial invitations to Circle. Set up your invitations now!",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "OIj8pQ": {
+    "defaultMessage": "Invitation Sent",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
   "OKhRC6": {
     "defaultMessage": "Share",
     "description": ""
@@ -447,14 +551,38 @@
     "defaultMessage": "Select NFT as your avatar",
     "description": "src/components/UserProfile/DropdownActions/EditProfileDialog/NFTCollection/index.tsx"
   },
+  "QUqfbW": {
+    "defaultMessage": "Describe more about your Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
   "QV19cI": {
     "defaultMessage": "Failed to republish article",
     "description": "src/components/Notice/ArticleNotice/RevisedArticleNotPublishedNotice.tsx"
   },
+  "QZXKhG": {
+    "defaultMessage": "Set the Circle URL (cannot be modified after creation)",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
   "RFzVUD": {
     "defaultMessage": "Unpin Broadcast",
     "description": "src/components/Comment/DropdownActions/PinButton.tsx"
   },
+  "RxiHr/": {
+    "defaultMessage": "friends have not accepted your invitations.",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx"
+  },
+  "SENRqu": {
+    "defaultMessage": "Help",
+    "description": ""
+  },
+  "SNh1n0": {
+    "defaultMessage": "View Members",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SdXoXI": {
+    "defaultMessage": "Invitations have been sent. You can check invitation status on the invitation management page.",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
   "Seanpx": {
     "defaultMessage": "Required",
     "description": ""
@@ -467,6 +595,10 @@
     "defaultMessage": "Unpin",
     "description": "src/components/ArticleDigest/DropdownActions/StickyButton.tsx"
   },
+  "TSDiqB": {
+    "defaultMessage": "Subscribers",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "TjWWxF": {
     "defaultMessage": "Broadcast sent",
     "description": "src/views/Circle/Broadcast/Broadcast.tsx"
@@ -515,6 +647,10 @@
     "defaultMessage": "Matters will never ask your wallet key through any channel.",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"
   },
+  "VwuiYK": {
+    "defaultMessage": "This URL name has already been used, try another one",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
   "WBVVYd": {
     "defaultMessage": "Responses",
     "description": ""
@@ -523,6 +659,10 @@
     "defaultMessage": "Add to Featured",
     "description": "src/components/ArticleDigest/DropdownActions/SetTagSelectedButton.tsx"
   },
+  "WpvsPu": {
+    "defaultMessage": "Subscribe",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "WuvE8X": {
     "defaultMessage": "Followers of {circleName}",
     "description": "src/views/Circle/Profile/FollowersDialog/index.tsx"
@@ -535,6 +675,10 @@
     "defaultMessage": "Welcome to Matters!",
     "description": "src/components/Forms/EmailSignUpForm/Complete.tsx"
   },
+  "XHMco9": {
+    "defaultMessage": "subscribers",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "XVYrS/": {
     "defaultMessage": "No followers yet",
     "description": ""
@@ -567,10 +711,18 @@
     "defaultMessage": "Broadcast and mentioned you in comment",
     "description": "src/components/Notice/CircleNotice/CircleNewBroadcastComments.tsx"
   },
+  "Z6cII7": {
+    "defaultMessage": "Accumulated Read Time",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
   "Z6ewE3": {
     "defaultMessage": "Build Together",
     "description": "src/views/Me/Settings/AnonymousSettings/Enhance/index.tsx"
   },
+  "ZAs170": {
+    "defaultMessage": "Profile",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
   "ZUPQzl": {
     "defaultMessage": "comment",
     "description": "src/components/Notice/CommentCommentNotice/CommentNewReplyNotice.tsx"
@@ -607,6 +759,10 @@
     "defaultMessage": "Last {days} days",
     "description": "src/views/Me/Analytics/SelectPeriod/index.tsx"
   },
+  "b8ogKp": {
+    "defaultMessage": "Add Invitation",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx"
+  },
   "bBYO6x": {
     "defaultMessage": "Unblock",
     "description": "src/components/BlockUser/Button/index.tsx"
@@ -643,6 +799,10 @@
     "defaultMessage": "You haven‘t published any articles yet, so there is no data available. Create one now to introduce yourself!",
     "description": "src/views/Me/Analytics/EmptyAnalytics/index.tsx"
   },
+  "d4waan": {
+    "defaultMessage": "Income",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
   "deEeEI": {
     "defaultMessage": "Register",
     "description": ""
@@ -667,10 +827,18 @@
     "defaultMessage": "Maintainer",
     "description": ""
   },
+  "ei+kyp": {
+    "defaultMessage": "Name of the Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
   "enMIYK": {
     "defaultMessage": "My Page",
     "description": ""
   },
+  "eov+J2": {
+    "defaultMessage": "Custom URL Name",
+    "description": ""
+  },
   "euNJsE": {
     "defaultMessage": "A new article has been added to the circle, read it now!",
     "description": "src/components/Notice/ArticleNotice/CircleNewArticle.tsx"
@@ -683,6 +851,10 @@
     "defaultMessage": "Choose a method to enter",
     "description": "src/components/Forms/SelectAuthMethodForm/index.tsx"
   },
+  "fWDtpq": {
+    "defaultMessage": "Pending",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
   "ftD7Hy": {
     "defaultMessage": "mentioned you",
     "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx"
@@ -691,6 +863,10 @@
     "defaultMessage": "posted and replied to topics",
     "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx"
   },
+  "gMZZ9I": {
+    "defaultMessage": "Must be between 2-20 characters long. Only letters, numbers and underscores are allowed.",
+    "description": ""
+  },
   "gMZfHO": {
     "defaultMessage": "RSS Subscription",
     "description": "src/components/Dialogs/RssFeedDialog/Content.tsx"
@@ -783,6 +959,14 @@
     "defaultMessage": "Enter Email",
     "description": ""
   },
+  "lIir/P": {
+    "defaultMessage": "I see",
+    "description": ""
+  },
+  "lNjDPr": {
+    "defaultMessage": "You have not invited anyone yet! Invite friends to join your circle by clicking 'invite friends'.",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx"
+  },
   "lhaIoi": {
     "defaultMessage": "Enter Display Name",
     "description": ""
@@ -791,6 +975,10 @@
     "defaultMessage": "Trending",
     "description": ""
   },
+  "mCAIcg": {
+    "defaultMessage": "Hottest",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx"
+  },
   "mPe6DK": {
     "defaultMessage": "subscribed your circle",
     "description": "src/components/Notice/CircleNotice/CircleNewUserNotice.tsx"
@@ -807,6 +995,10 @@
     "defaultMessage": "Edit",
     "description": "src/components/Comment/DropdownActions/EditButton.tsx"
   },
+  "mjMpv4": {
+    "defaultMessage": "Circle Edited",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
   "mk+LCk": {
     "defaultMessage": "Display Preferences",
     "description": "src/views/Me/Settings/AnonymousSettings/DisplayPreferences/index.tsx"
@@ -850,9 +1042,9 @@
     "defaultMessage": "Collapse",
     "description": "src/components/Comment/DropdownActions/CollapseComment/Button.tsx"
   },
-  "pla6ZF": {
-    "defaultMessage": "Search articles, tags and authors",
-    "description": "src/components/Search/SearchBar/index.tsx"
+  "ptqBN1": {
+    "defaultMessage": "Not Now",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
   },
   "pwlQEY": {
     "defaultMessage": "Display Name",
@@ -866,6 +1058,10 @@
     "defaultMessage": "Manage Circle",
     "description": "src/views/Circle/Profile/DropdownActions/index.tsx"
   },
+  "q9oMKE": {
+    "defaultMessage": "Circle Name",
+    "description": ""
+  },
   "qPPrzm": {
     "defaultMessage": "supported your article",
     "description": "src/components/Notice/TransactionNotice/PaymentReceivedDonationNotice.tsx"
@@ -894,6 +1090,10 @@
     "defaultMessage": "Weibo",
     "description": "src/components/Share/Buttons/Weibo.tsx"
   },
+  "rXnmeE": {
+    "defaultMessage": "Confirm and Send",
+    "description": ""
+  },
   "reOeq5": {
     "defaultMessage": "You have created your personal creative space. Publish your first work!",
     "description": "src/components/Forms/EmailSignUpForm/Complete.tsx"
@@ -910,6 +1110,10 @@
     "defaultMessage": "Account Banned",
     "description": "src/components/UserProfile/index.tsx"
   },
+  "sPgUkN": {
+    "defaultMessage": "This Month",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
   "skbUBl": {
     "defaultMessage": "Log in",
     "description": "src/components/Buttons/Login/index.tsx"
@@ -938,6 +1142,14 @@
     "defaultMessage": "replied to topics and mentioned you",
     "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx"
   },
+  "tW3hM/": {
+    "defaultMessage": "Description of the Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "tzq2+W": {
+    "defaultMessage": "Send",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
   "u5aHb4": {
     "defaultMessage": "Copy Link",
     "description": ""
@@ -982,6 +1194,10 @@
     "defaultMessage": "Contact Channel",
     "description": "src/components/Forms/WalletAuthForm/Connect.tsx"
   },
+  "wXzTZ0": {
+    "defaultMessage": "Enter the name of your Circle",
+    "description": ""
+  },
   "wbcwKd": {
     "defaultMessage": "View All",
     "description": ""
@@ -994,6 +1210,10 @@
     "defaultMessage": "As a reminder, the email address will not be used as a login but only as a contact channel.",
     "description": "src/components/Forms/WalletAuthForm/Connect.tsx"
   },
+  "xWZr13": {
+    "defaultMessage": "{follower, plural, =1 {follower} other {followers}}",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
   "xiKjd/": {
     "defaultMessage": "Continue with Email",
     "description": "src/components/Forms/SelectAuthMethodForm/index.tsx"
@@ -1006,6 +1226,10 @@
     "defaultMessage": "invites you to become a collaborator",
     "description": "src/components/Notice/TagNotice/TagAddEditorNotice.tsx"
   },
+  "y0b6Kp": {
+    "defaultMessage": "Pay",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
   "y1Z3or": {
     "defaultMessage": "Language",
     "description": ""
@@ -1022,6 +1246,10 @@
     "defaultMessage": "Your",
     "description": "src/components/Notice/TransactionNotice/PaymentPayoutNotice.tsx"
   },
+  "zKOr2x": {
+    "defaultMessage": "Conversion Rate of Followers",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
   "zQvVDJ": {
     "defaultMessage": "All",
     "description": ""
@@ -1032,5 +1260,9 @@
   "zxlwbc": {
     "defaultMessage": "Waiting ...",
     "description": "src/components/Dialogs/RssFeedDialog/Content.tsx"
+  },
+  "zxy15q": {
+    "defaultMessage": "{subscriber, plural, =1 {subscriber} other {subscribers}}",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   }
 }
diff --git a/lang/en.json b/lang/en.json
index e400ac2acd..fda640be9f 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -719,10 +719,6 @@
     "defaultMessage": "You won't see announcements for 7 days",
     "description": "src/views/Home/Announcements/index.tsx"
   },
-  "pla6ZF": {
-    "defaultMessage": "Search articles, tags and authors",
-    "description": "src/components/Search/SearchBar/index.tsx"
-  },
   "3kbIhS": {
     "defaultMessage": "Untitled",
     "description": ""
@@ -1061,5 +1057,237 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {article} other {articles}}",
     "description": ""
+  },
+  "ZAs170": {
+    "defaultMessage": "Profile",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "DMlmcU": {
+    "defaultMessage": "Free Trial",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "EQeKnO": {
+    "defaultMessage": "Manage Invitation",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "KLQ1/z": {
+    "defaultMessage": "Circle successfully created",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "mjMpv4": {
+    "defaultMessage": "Circle Edited",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "ei+kyp": {
+    "defaultMessage": "Name of the Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "tW3hM/": {
+    "defaultMessage": "Description of the Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "CwWLOr": {
+    "defaultMessage": "Enter the name of your Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "QUqfbW": {
+    "defaultMessage": "Describe more about your Circle",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "JXdbo8": {
+    "defaultMessage": "Done",
+    "description": ""
+  },
+  "q9oMKE": {
+    "defaultMessage": "Circle Name",
+    "description": ""
+  },
+  "QZXKhG": {
+    "defaultMessage": "Set the Circle URL (cannot be modified after creation)",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "6BXcdo": {
+    "defaultMessage": "Set threshold for circle (per month)",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "VwuiYK": {
+    "defaultMessage": "This URL name has already been used, try another one",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "gMZZ9I": {
+    "defaultMessage": "Must be between 2-20 characters long. Only letters, numbers and underscores are allowed.",
+    "description": ""
+  },
+  "+7SAix": {
+    "defaultMessage": "Must be between 2-12 characters long.",
+    "description": ""
+  },
+  "eov+J2": {
+    "defaultMessage": "Custom URL Name",
+    "description": ""
+  },
+  "8KFsZN": {
+    "defaultMessage": "Read Counts",
+    "description": ""
+  },
+  "LOefol": {
+    "defaultMessage": "Paywalled",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
+  "/podGX": {
+    "defaultMessage": "Public",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
+  "mCAIcg": {
+    "defaultMessage": "Hottest",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx"
+  },
+  "lNjDPr": {
+    "defaultMessage": "You have not invited anyone yet! Invite friends to join your circle by clicking 'invite friends'.",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx"
+  },
+  "RxiHr/": {
+    "defaultMessage": "friends have not accepted your invitations.",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx"
+  },
+  "b8ogKp": {
+    "defaultMessage": "Add Invitation",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx"
+  },
+  "FmWYRt": {
+    "defaultMessage": "Free trial period",
+    "description": ""
+  },
+  "Bc20la": {
+    "defaultMessage": "days",
+    "description": ""
+  },
+  "O0QB1v": {
+    "defaultMessage": "Friends will receive free trial invitations to Circle. Set up your invitations now!",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "rXnmeE": {
+    "defaultMessage": "Confirm and Send",
+    "description": ""
+  },
+  "ptqBN1": {
+    "defaultMessage": "Not Now",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "tzq2+W": {
+    "defaultMessage": "Send",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "fWDtpq": {
+    "defaultMessage": "Pending",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
+  "JpS59y": {
+    "defaultMessage": "Accepted",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
+  "Bjdw71": {
+    "defaultMessage": "",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "xWZr13": {
+    "defaultMessage": "{follower, plural, =1 {follower} other {followers}}",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "GugBCe": {
+    "defaultMessage": "New Followers This Month",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "MDNaxs": {
+    "defaultMessage": "",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "zKOr2x": {
+    "defaultMessage": "Conversion Rate of Followers",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "AYTnjk": {
+    "defaultMessage": "Followers",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "sPgUkN": {
+    "defaultMessage": "This Month",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "Fe682o": {
+    "defaultMessage": "Next Month (Estimation)",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "L4NXXh": {
+    "defaultMessage": "Total",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "d4waan": {
+    "defaultMessage": "Income",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "6OBAOi": {
+    "defaultMessage": "",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "zxy15q": {
+    "defaultMessage": "{subscriber, plural, =1 {subscriber} other {subscribers}}",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "TSDiqB": {
+    "defaultMessage": "Subscribers",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "XHMco9": {
+    "defaultMessage": "",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "1qQzV0": {
+    "defaultMessage": "Invitees",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "WpvsPu": {
+    "defaultMessage": "Subscribe",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SNh1n0": {
+    "defaultMessage": "View Members",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "2CqWQE": {
+    "defaultMessage": "Total",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "y0b6Kp": {
+    "defaultMessage": "Pay",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "L0J61B": {
+    "defaultMessage": "Free",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SdXoXI": {
+    "defaultMessage": "Invitations have been sent. You can check invitation status on the invitation management page.",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
+  "OIj8pQ": {
+    "defaultMessage": "Invitation Sent",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
+  "lIir/P": {
+    "defaultMessage": "I see",
+    "description": ""
+  },
+  "2uwwz+": {
+    "defaultMessage": "Accumulated read time indicates the total time length that registered users read.",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
+  "Z6cII7": {
+    "defaultMessage": "Accumulated Read Time",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
+  "DXJ8ys": {
+    "defaultMessage": "Read counts indicates how many registered users read.",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
   }
 }
diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
index 6d56e58083..1ef62673d4 100644
--- a/lang/zh-Hans.json
+++ b/lang/zh-Hans.json
@@ -727,10 +727,6 @@
     "defaultMessage": "暂时隐藏公告栏 7 天",
     "description": "src/views/Home/Announcements/index.tsx"
   },
-  "pla6ZF": {
-    "defaultMessage": "搜索作品、标签、作者",
-    "description": "src/components/Search/SearchBar/index.tsx"
-  },
   "3kbIhS": {
     "defaultMessage": "未命名",
     "description": ""
@@ -1061,5 +1057,237 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {篇文章} other {篇文章}}",
     "description": ""
+  },
+  "ZAs170": {
+    "defaultMessage": "基本资料",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "DMlmcU": {
+    "defaultMessage": "免费资格",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "EQeKnO": {
+    "defaultMessage": "邀请管理",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "KLQ1/z": {
+    "defaultMessage": "围炉创建成功",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "mjMpv4": {
+    "defaultMessage": "围炉已更新",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "ei+kyp": {
+    "defaultMessage": "围炉名称",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "tW3hM/": {
+    "defaultMessage": "围炉描述",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "CwWLOr": {
+    "defaultMessage": "给围炉取一个吸引人的名字吧",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "QUqfbW": {
+    "defaultMessage": "说说围炉的有趣之处，吸引支持者加入",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "JXdbo8": {
+    "defaultMessage": "完成",
+    "description": ""
+  },
+  "q9oMKE": {
+    "defaultMessage": "围炉名称",
+    "description": ""
+  },
+  "QZXKhG": {
+    "defaultMessage": "设置围炉网址（创建后不可修改）",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "6BXcdo": {
+    "defaultMessage": "设定围炉门槛（每月）",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "VwuiYK": {
+    "defaultMessage": "Oops！此网址名称已被使用了，换一个试试",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "gMZZ9I": {
+    "defaultMessage": "2-20 个字符，仅支持英文、数字或下划线",
+    "description": ""
+  },
+  "+7SAix": {
+    "defaultMessage": "2-12 个字符",
+    "description": ""
+  },
+  "eov+J2": {
+    "defaultMessage": "自定义网址名称",
+    "description": ""
+  },
+  "8KFsZN": {
+    "defaultMessage": "阅读次数",
+    "description": ""
+  },
+  "LOefol": {
+    "defaultMessage": "上锁",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
+  "/podGX": {
+    "defaultMessage": "公开",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
+  "mCAIcg": {
+    "defaultMessage": "站内阅读热门排行",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx"
+  },
+  "lNjDPr": {
+    "defaultMessage": "你还没有邀请任何用户喔！点击新增邀请，添加站内或站外朋友加入围炉赠与对方免费资格的固定时长",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx"
+  },
+  "RxiHr/": {
+    "defaultMessage": "还没有任何用户回覆你的邀请喔！",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx"
+  },
+  "b8ogKp": {
+    "defaultMessage": "新增邀请",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx"
+  },
+  "FmWYRt": {
+    "defaultMessage": "免费资格时长",
+    "description": ""
+  },
+  "Bc20la": {
+    "defaultMessage": "天",
+    "description": ""
+  },
+  "O0QB1v": {
+    "defaultMessage": "用户将收到你的围炉免费资格邀请函，设置免费的时限，邀请他们一起加入吧！",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "rXnmeE": {
+    "defaultMessage": "确认发送",
+    "description": ""
+  },
+  "ptqBN1": {
+    "defaultMessage": "暂时不要",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "tzq2+W": {
+    "defaultMessage": "寄出邀请",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "fWDtpq": {
+    "defaultMessage": "邀请中",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
+  "JpS59y": {
+    "defaultMessage": "已接受",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
+  "Bjdw71": {
+    "defaultMessage": "目前总追踪人数",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "xWZr13": {
+    "defaultMessage": "{follower, plural, =1 {人} other {人}}",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "GugBCe": {
+    "defaultMessage": "本月新增追踪人数",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "MDNaxs": {
+    "defaultMessage": "人",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "zKOr2x": {
+    "defaultMessage": "已追踪用户占总观看人数比例",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "AYTnjk": {
+    "defaultMessage": "追踪",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "sPgUkN": {
+    "defaultMessage": "本月营收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "Fe682o": {
+    "defaultMessage": "下月预期营收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "L4NXXh": {
+    "defaultMessage": "目前总营收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "d4waan": {
+    "defaultMessage": "营收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "6OBAOi": {
+    "defaultMessage": "目前总订阅人数",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "zxy15q": {
+    "defaultMessage": "{subscriber, plural, =1 {人} other {人}}",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "TSDiqB": {
+    "defaultMessage": "付费人数",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "XHMco9": {
+    "defaultMessage": "人",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "1qQzV0": {
+    "defaultMessage": "免费邀请",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "WpvsPu": {
+    "defaultMessage": "订阅",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SNh1n0": {
+    "defaultMessage": "查看名单",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "2CqWQE": {
+    "defaultMessage": "总数",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "y0b6Kp": {
+    "defaultMessage": "付费",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "L0J61B": {
+    "defaultMessage": "免费",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SdXoXI": {
+    "defaultMessage": "你已寄出邀请给朋友们，快去已邀请管理查看他们加入的进度吧！",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
+  "OIj8pQ": {
+    "defaultMessage": "成功发送邀请",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
+  "lIir/P": {
+    "defaultMessage": "我知道了",
+    "description": ""
+  },
+  "2uwwz+": {
+    "defaultMessage": "累计阅读时長代表了你的作品被登入用户阅读的总时数，每次阅读过程超过一定时间后才会计入。此外，同一个用户的多次阅读也会进行累计。",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
+  "Z6cII7": {
+    "defaultMessage": "累计阅读时数",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
+  "DXJ8ys": {
+    "defaultMessage": "阅读次数代表了你的作品被登入用户阅读的总次数，每次阅读过程超过一定时间后才会计入。此外，同一个用户的多次阅读也会进行累计。",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
   }
 }
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index 43472f4151..569ce30535 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -719,10 +719,6 @@
     "defaultMessage": "暫時隱藏公告欄 7 天",
     "description": "src/views/Home/Announcements/index.tsx"
   },
-  "pla6ZF": {
-    "defaultMessage": "搜尋作品、標籤、作者",
-    "description": "src/components/Search/SearchBar/index.tsx"
-  },
   "3kbIhS": {
     "defaultMessage": "未命名",
     "description": ""
@@ -1061,5 +1057,237 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {篇文章} other {篇文章}}",
     "description": ""
+  },
+  "ZAs170": {
+    "defaultMessage": "基本資料",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "DMlmcU": {
+    "defaultMessage": "免費資格",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "EQeKnO": {
+    "defaultMessage": "邀請管理",
+    "description": "src/views/Circle/Settings/index.tsx"
+  },
+  "KLQ1/z": {
+    "defaultMessage": "圍爐創建成功",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "mjMpv4": {
+    "defaultMessage": "圍爐已更新",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "ei+kyp": {
+    "defaultMessage": "圍爐名稱",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "tW3hM/": {
+    "defaultMessage": "圍爐描述",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "CwWLOr": {
+    "defaultMessage": "給圍爐取一個吸引人的名字吧",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "QUqfbW": {
+    "defaultMessage": "說說圍爐的有趣之處，吸引支持者加入",
+    "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
+  },
+  "JXdbo8": {
+    "defaultMessage": "完成",
+    "description": ""
+  },
+  "q9oMKE": {
+    "defaultMessage": "圍爐名稱",
+    "description": ""
+  },
+  "QZXKhG": {
+    "defaultMessage": "設置圍爐網址（創建後不可修改）",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "6BXcdo": {
+    "defaultMessage": "設定圍爐門檻（每月）",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "VwuiYK": {
+    "defaultMessage": "Oops！此網址已被使用了，換一個試試",
+    "description": "src/components/Forms/CreateCircleForm/Init.tsx"
+  },
+  "gMZZ9I": {
+    "defaultMessage": "2-20 個字元，僅支持英文、數字或下劃線",
+    "description": ""
+  },
+  "+7SAix": {
+    "defaultMessage": "2-12 個字元",
+    "description": ""
+  },
+  "eov+J2": {
+    "defaultMessage": "自定義網址名稱",
+    "description": ""
+  },
+  "8KFsZN": {
+    "defaultMessage": "閱讀次數",
+    "description": ""
+  },
+  "LOefol": {
+    "defaultMessage": "上鎖",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
+  "/podGX": {
+    "defaultMessage": "公開",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+  },
+  "mCAIcg": {
+    "defaultMessage": "站內閱讀熱門排行",
+    "description": "src/views/Circle/Analytics/ContentAnalytics/index.tsx"
+  },
+  "lNjDPr": {
+    "defaultMessage": "你還沒有邀請任何用戶喔！點擊新增邀請，添加站內或站外朋友加入圍爐贈與對方免費資格的固定時長",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx"
+  },
+  "RxiHr/": {
+    "defaultMessage": "還沒有任何用戶回覆你的邀請喔！",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx"
+  },
+  "b8ogKp": {
+    "defaultMessage": "新增邀請",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx"
+  },
+  "FmWYRt": {
+    "defaultMessage": "免費資格時長",
+    "description": ""
+  },
+  "Bc20la": {
+    "defaultMessage": "天",
+    "description": ""
+  },
+  "O0QB1v": {
+    "defaultMessage": "用戶將收到你的圍爐免費資格邀請函，設置免費的時限，邀請他們一起加入吧！",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "rXnmeE": {
+    "defaultMessage": "確認發送",
+    "description": ""
+  },
+  "ptqBN1": {
+    "defaultMessage": "暫時不要",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "tzq2+W": {
+    "defaultMessage": "寄出邀請",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+  },
+  "fWDtpq": {
+    "defaultMessage": "邀請中",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
+  "JpS59y": {
+    "defaultMessage": "已接受",
+    "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+  },
+  "Bjdw71": {
+    "defaultMessage": "目前總追蹤人數",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "xWZr13": {
+    "defaultMessage": "{follower, plural, =1 {人} other {人}}",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "GugBCe": {
+    "defaultMessage": "本月新增追蹤人數",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "MDNaxs": {
+    "defaultMessage": "人",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "zKOr2x": {
+    "defaultMessage": "已追蹤用戶佔總觀看人數比例",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "AYTnjk": {
+    "defaultMessage": "追蹤",
+    "description": "src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+  },
+  "sPgUkN": {
+    "defaultMessage": "本月營收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "Fe682o": {
+    "defaultMessage": "下月預期營收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "L4NXXh": {
+    "defaultMessage": "目前總營收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "d4waan": {
+    "defaultMessage": "營收",
+    "description": "src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+  },
+  "6OBAOi": {
+    "defaultMessage": "目前總訂閱人數",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "zxy15q": {
+    "defaultMessage": "{subscriber, plural, =1 {人} other {人}}",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "TSDiqB": {
+    "defaultMessage": "付費人數",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "XHMco9": {
+    "defaultMessage": "人",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "1qQzV0": {
+    "defaultMessage": "免費邀請",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "WpvsPu": {
+    "defaultMessage": "訂閱",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SNh1n0": {
+    "defaultMessage": "查看名單",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "2CqWQE": {
+    "defaultMessage": "總數",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "y0b6Kp": {
+    "defaultMessage": "付費",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "L0J61B": {
+    "defaultMessage": "免費",
+    "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+  },
+  "SdXoXI": {
+    "defaultMessage": "你已寄出邀請給朋友們，快去已邀請管理查看他們加入的進度吧！",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
+  "OIj8pQ": {
+    "defaultMessage": "成功發送邀請",
+    "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
+  },
+  "lIir/P": {
+    "defaultMessage": "我知道了",
+    "description": ""
+  },
+  "2uwwz+": {
+    "defaultMessage": "累計閱讀時數代表了你的作品被登入用戶閱讀的總時數，每次閱讀過程超過一定時間後才會計入。此外，同一個用戶的多次閱讀也會進行累計。",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
+  "Z6cII7": {
+    "defaultMessage": "累計閱讀時數",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
+  },
+  "DXJ8ys": {
+    "defaultMessage": "閱讀次數代表了你的作品被登入用戶閱讀的總次數，每次閱讀過程超過一定時間後才會計入。此外，同一個用戶的多次閱讀也會進行累計。",
+    "description": "src/components/Dialogs/HelpDialog/index.tsx"
   }
 }
diff --git a/package.json b/package.json
index 9383359928..03766085e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.17.2",
+  "version": "4.18.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <hi@matters.news>",
diff --git a/public/static/icons/24px/disableComment.svg b/public/static/icons/24px/disableComment.svg
new file mode 100644
index 0000000000..ff0899c95f
--- /dev/null
+++ b/public/static/icons/24px/disableComment.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.85522 12.0947C7.85522 13.9096 9.20069 15.4102 10.9486 15.6536V16.4209C10.9486 16.5949 11.0391 16.7565 11.1875 16.8473C11.336 16.9382 11.521 16.9453 11.676 16.8661L13.9863 15.6859C15.8943 15.6204 17.421 14.0529 17.421 12.1289V11.7979C17.421 9.64941 15.6793 7.90771 13.5308 7.90771H11.7454C9.59692 7.90771 7.85522 9.64941 7.85522 11.7979V12.0947Z" fill="white" stroke="#B3B3B3" stroke-linejoin="round"/>
+<circle cx="12.5" cy="12" r="10" stroke="#B3B3B3"/>
+<path d="M19.7691 4.73096L5.63452 19.2694" stroke="#B3B3B3"/>
+</svg>
diff --git a/public/static/icons/uncheckedGrey.svg b/public/static/icons/uncheckedGrey.svg
new file mode 100644
index 0000000000..e5cef1816c
--- /dev/null
+++ b/public/static/icons/uncheckedGrey.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.25" y="1.24976" width="18.5" height="18.5" rx="9.25" fill="#EDEDED" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/>
+</svg>
diff --git a/public/static/images/illustration-empty-search-history.png b/public/static/images/illustration-empty-search-history.png
new file mode 100644
index 0000000000..74b44cf9d0
Binary files /dev/null and b/public/static/images/illustration-empty-search-history.png differ
diff --git a/src/common/enums/index.ts b/src/common/enums/index.ts
index ec83b23bd8..6473056949 100644
--- a/src/common/enums/index.ts
+++ b/src/common/enums/index.ts
@@ -13,6 +13,7 @@ export * from './oauth'
 export * from './payment'
 export * from './responsive'
 export * from './route'
+export * from './search'
 export * from './storage'
 export * from './test'
 export * from './text'
diff --git a/src/common/enums/search.ts b/src/common/enums/search.ts
new file mode 100644
index 0000000000..1dc0b9dfa4
--- /dev/null
+++ b/src/common/enums/search.ts
@@ -0,0 +1,17 @@
+export const MIN_QUICK_SEARCH_KEY_LENGTH = 2
+
+export const MAX_QUICK_SEARCH_KEY_LENGTH = 10
+
+export const SEARCH_START_FLAG = '@#＠＃'
+
+export const MAX_SEARCH_KEY_LENGTH = 60
+
+export const MAX_SEARCH_RESULTS_LENGTH = 200
+
+export const FIRST_SEARCH_RESULTS_LENGTH = 30
+
+export const LATER_SEARCH_RESULTS_LENGTH = 20
+
+export const SEARCH_HISTORY_LENGTH = 20
+
+export const SEARCH_HISTORY_DISPLAY_LENGTH = 10
diff --git a/src/common/enums/storage.ts b/src/common/enums/storage.ts
index 27257a7c37..6bb6468721 100644
--- a/src/common/enums/storage.ts
+++ b/src/common/enums/storage.ts
@@ -7,3 +7,5 @@ export const STORAGE_KEY_ONBOARDING_TASKS = '__ONBOARDING_TASKS'
 export const STORAGE_KEY_CIRCLE_BANNER = '__CIRCLE_BANNER'
 
 export const STORAGE_KEY_ANNOUNCEMENT = '__ANNOUNCEMENT'
+
+export const STORAGE_KEY_SEARCH_HISTORY = '__SEARCH_HISTORY'
diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts
index 83e4cb9f95..5d0defee0e 100644
--- a/src/common/enums/text.ts
+++ b/src/common/enums/text.ts
@@ -21,6 +21,8 @@ export const TEXT = {
     all: '全部',
     allAuthors: '全部作者',
     allIcymi: '不要錯過',
+    allowResponses: '開啟回應',
+    allowResponsesHint: '允許讀者回應本文（開啟後無法關閉）',
     allTags: '全部標籤',
     allTopics: '熱議廣場',
     likesReceived: '讚賞我的',
@@ -35,6 +37,7 @@ export const TEXT = {
     articleBanned: '作品因違反社區約章被隱藏',
     articleFingerprint: '作品指紋',
     articleManagement: '作品管理',
+    articleResponse: '回應設置',
     ASSET_NOT_FOUND: '資源不存在',
     back: '返回',
     backToDiscover: '返回發現',
@@ -83,6 +86,8 @@ export const TEXT = {
     delete: '刪除',
     deleteArticleTag: '作品已移除標籤',
     deleteDraft: '刪除草稿',
+    disableResponses: '關閉回應',
+    disableResponsesHint: '不允許讀者回應本文（可通過修訂打開回應功能）',
     disagree: '我不同意',
     discover: '發現',
     DISPLAYNAME_INVALID: '名稱不正確',
@@ -426,6 +431,8 @@ export const TEXT = {
     all: '全部',
     allAuthors: '全部作者',
     allIcymi: '不要错过',
+    allowResponses: '开启回应',
+    allowResponsesHint: '允许读者回应本文（开启后无法关闭）',
     allTags: '全部标签',
     allTopics: '热议广场',
     likesReceived: '赞赏我的',
@@ -440,6 +447,7 @@ export const TEXT = {
     articleBanned: '作品因违反社区约章被隐藏',
     articleFingerprint: '作品指纹',
     articleManagement: '作品管理',
+    articleResponse: '回应设置',
     ASSET_NOT_FOUND: '资源不存在',
     back: '返回',
     backToDiscover: '返回发现',
@@ -488,6 +496,8 @@ export const TEXT = {
     delete: '删除',
     deleteArticleTag: '作品已移除标签',
     deleteDraft: '刪除草稿',
+    disableResponses: '关闭回应',
+    disableResponsesHint: '不允许读者回应本文（可通过编辑打开回应功能）',
     disagree: '我不同意',
     discover: '发现',
     DISPLAYNAME_INVALID: '名称不正确',
@@ -831,6 +841,9 @@ export const TEXT = {
     all: 'All time',
     allAuthors: 'All Authors',
     allIcymi: `Matters' Choice`,
+    allowResponses: 'Allow Responses',
+    allowResponsesHint:
+      'Allow readers to respond to this article (can NOT be disabled afterwards)',
     allTags: 'Tags',
     allTopics: 'Recommended Topics',
     likesReceived: 'Likes Received',
@@ -845,6 +858,7 @@ export const TEXT = {
     articleBanned: 'The article has been archived due to violation of terms',
     articleFingerprint: 'Content Hash',
     articleManagement: 'Article Management',
+    articleResponse: 'Response',
     ASSET_NOT_FOUND: 'Asset not found',
     back: 'Back',
     backToDiscover: 'Back to discovery',
@@ -901,6 +915,9 @@ export const TEXT = {
     deleteArticleTag: 'Tag Removed',
     deleteComment: 'Delete',
     deleteDraft: 'Delete Draft',
+    disableResponses: 'Disable Responses',
+    disableResponsesHint:
+      'Disallow readers to respond to this article (you can enable responses later by editing this article)',
     disagree: 'Disagree',
     discover: 'Discover',
     DISPLAYNAME_INVALID: 'Invalid display name',
diff --git a/src/common/utils/analytics.ts b/src/common/utils/analytics.ts
index 296a63bd14..3c219fdd6c 100644
--- a/src/common/utils/analytics.ts
+++ b/src/common/utils/analytics.ts
@@ -84,7 +84,9 @@ interface LoadMoreProp {
     | UserFeedType
     | TagFeedType
     | CircleFeedType
+    | 'quick_search'
   location: number
+  searchKey?: string
 }
 
 /**
@@ -137,6 +139,7 @@ interface ClickFeedProp {
   contentType: ContentType | ActivityType
   location: number | string
   id?: string
+  searchKey?: string
 }
 
 /**
@@ -158,7 +161,13 @@ interface TagExposureProp {
 }
 
 // content type
-export type ContentType = 'article' | 'comment' | 'circle' | 'user' | 'tag'
+export type ContentType =
+  | 'article'
+  | 'comment'
+  | 'circle'
+  | 'user'
+  | 'tag'
+  | 'key'
 export type ActivityType =
   | 'UserPublishArticleActivity'
   | 'UserBroadcastCircleActivity'
@@ -182,6 +191,7 @@ export type FeedType =
   | TagFeedType
   | CircleFeedType
   | 'following'
+  | 'search_history'
 
 type ArticleFeedType =
   | 'all_authors'
@@ -231,6 +241,7 @@ type UserFeedType =
   | 'newest'
   | 'search'
   | 'search_user'
+  | 'quick_search_user'
   | 'tag_detail_latest'
   | 'tag_detail_selected'
   | 'tag_detail_community'
@@ -244,6 +255,7 @@ type TagFeedType =
   // | 'follow-tag'
   | 'search'
   | 'search_tag'
+  | 'quick_search_tag'
   | 'tags' // tag feed on home page
   | 'user_tag'
 
diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts
index 1fc3b7f084..367eb4afff 100644
--- a/src/common/utils/index.ts
+++ b/src/common/utils/index.ts
@@ -18,6 +18,7 @@ export * from './payment'
 export * from './random'
 export * from './response'
 export * from './route'
+export * from './search'
 export * from './storage'
 export * from './text'
 export * from './time'
diff --git a/src/common/utils/search.ts b/src/common/utils/search.ts
new file mode 100644
index 0000000000..7b6a901c78
--- /dev/null
+++ b/src/common/utils/search.ts
@@ -0,0 +1,6 @@
+export type SearchType = 'article' | 'user' | 'tag' | undefined
+
+export const getSearchType = (value: string): SearchType => {
+  const types = ['article', 'user', 'tag']
+  return types.includes(value) ? (value as SearchType) : undefined
+}
diff --git a/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx b/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx
index 4b6f6113ff..950b35eb2d 100644
--- a/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx
+++ b/src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx
@@ -3,12 +3,7 @@ import _isArray from 'lodash/isArray'
 import { FormattedMessage } from 'react-intl'
 
 import { REFETCH_TAG_DETAIL_ARTICLES } from '~/common/enums'
-import {
-  IconRemove24,
-  Menu,
-  TextIcon,
-  useMutation,
-} from '~/components'
+import { IconRemove24, Menu, TextIcon, useMutation } from '~/components'
 import updateTagArticlesCount from '~/components/GQL/updates/tagArticlesCount'
 import {
   DeleteArticlesTagsMutation,
@@ -75,7 +70,10 @@ const RemoveTagButton = ({
       }}
     >
       <TextIcon icon={<IconRemove24 size="md" />} size="md" spacing="base">
-        <FormattedMessage defaultMessage="Remove Article" description="src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx" />
+        <FormattedMessage
+          defaultMessage="Remove Article"
+          description="src/components/ArticleDigest/DropdownActions/RemoveTagButton.tsx"
+        />
       </TextIcon>
     </Menu.Item>
   )
diff --git a/src/components/ArticleDigest/Feed/index.tsx b/src/components/ArticleDigest/Feed/index.tsx
index f2041ec6f7..c2b5456733 100644
--- a/src/components/ArticleDigest/Feed/index.tsx
+++ b/src/components/ArticleDigest/Feed/index.tsx
@@ -2,7 +2,13 @@ import React from 'react'
 
 import { TEST_ID } from '~/common/enums'
 import { stripHtml, toPath, UtmParams } from '~/common/utils'
-import { Card, CircleDigest, ResponsiveImage } from '~/components'
+import {
+  Card,
+  CardProps,
+  CircleDigest,
+  DateTime,
+  ResponsiveImage,
+} from '~/components'
 import { UserDigest } from '~/components/UserDigest'
 import {
   ArticleDigestFeedArticlePrivateFragment,
@@ -18,6 +24,7 @@ import styles from './styles.css'
 export type ArticleDigestFeedControls = {
   onClick?: () => any
   onClickAuthor?: () => void
+  isConciseFooter?: boolean
   hasFollow?: boolean
   hasCircle?: boolean
 }
@@ -28,13 +35,15 @@ export type ArticleDigestFeedProps = {
   header?: React.ReactNode
 } & ArticleDigestFeedControls &
   FooterActionsProps &
-  UtmParams
+  UtmParams &
+  Pick<CardProps, 'is'>
 
 const BaseArticleDigestFeed = ({
   article,
   header,
   date,
 
+  isConciseFooter = false,
   hasFollow,
   hasCircle = true,
   onClick,
@@ -42,6 +51,7 @@ const BaseArticleDigestFeed = ({
 
   utm_source,
   utm_medium,
+  is,
 
   ...controls
 }: ArticleDigestFeedProps) => {
@@ -66,6 +76,7 @@ const BaseArticleDigestFeed = ({
       spacing={['base', 'base']}
       onClick={onClick}
       testId={TEST_ID.DIGEST_ARTICLE_FEED}
+      is={is}
     >
       {header ||
         (hasCircle && circle && (
@@ -103,7 +114,14 @@ const BaseArticleDigestFeed = ({
         )}
       </section>
 
-      <FooterActions article={article} inCard date={date} {...controls} />
+      {isConciseFooter && (
+        <section>
+          <DateTime date={article.createdAt} />
+        </section>
+      )}
+      {!isConciseFooter && (
+        <FooterActions article={article} inCard date={date} {...controls} />
+      )}
 
       <style jsx>{styles}</style>
     </Card>
diff --git a/src/components/Comment/DropdownActions/CollapseComment/Button.tsx b/src/components/Comment/DropdownActions/CollapseComment/Button.tsx
index 0b3e37f36b..d37d3ba16b 100644
--- a/src/components/Comment/DropdownActions/CollapseComment/Button.tsx
+++ b/src/components/Comment/DropdownActions/CollapseComment/Button.tsx
@@ -6,7 +6,10 @@ const CollapseCommentButton = ({ openDialog }: { openDialog: () => void }) => {
   return (
     <Menu.Item onClick={openDialog} ariaHasPopup="dialog">
       <TextIcon icon={<IconCollapse16 size="md" />} size="md" spacing="base">
-        <FormattedMessage defaultMessage="Collapse" description="src/components/Comment/DropdownActions/CollapseComment/Button.tsx"/>
+        <FormattedMessage
+          defaultMessage="Collapse"
+          description="src/components/Comment/DropdownActions/CollapseComment/Button.tsx"
+        />
       </TextIcon>
     </Menu.Item>
   )
diff --git a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
index 9aeba1687b..896ea10b9e 100644
--- a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
+++ b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
@@ -39,7 +39,7 @@ const DeleteCommentDialog = ({
   const commentId = comment.id
 
   const { lang } = useContext(LanguageContext)
-  
+
   const [deleteComment] = useMutation<DeleteCommentMutation>(DELETE_COMMENT, {
     variables: { id: commentId },
     optimisticResponse: {
@@ -59,9 +59,13 @@ const DeleteCommentDialog = ({
         detail: {
           color: 'green',
           content: (
-            <FormattedMessage defaultMessage="{commentType} has been deleted" description="src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx" values={{
-              commentType: COMMENT_TYPE_TEXT[lang][type]
-            }}/>
+            <FormattedMessage
+              defaultMessage="{commentType} has been deleted"
+              description="src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
+              values={{
+                commentType: COMMENT_TYPE_TEXT[lang][type],
+              }}
+            />
           ),
 
           buttonPlacement: 'center',
@@ -77,9 +81,13 @@ const DeleteCommentDialog = ({
       <Dialog isOpen={show} onDismiss={closeDialog} size="sm">
         <Dialog.Header
           title={
-            <FormattedMessage defaultMessage="Delete {commentType}" description="src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx" values={{
-              commentType: COMMENT_TYPE_TEXT[lang][type]
-            }}/>
+            <FormattedMessage
+              defaultMessage="Delete {commentType}"
+              description="src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
+              values={{
+                commentType: COMMENT_TYPE_TEXT[lang][type],
+              }}
+            />
           }
           closeDialog={closeDialog}
           mode="inner"
@@ -87,9 +95,13 @@ const DeleteCommentDialog = ({
 
         <Dialog.Message>
           <p>
-            <FormattedMessage defaultMessage="After deletion, the {commentType} will be removed immediately" description="src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx" values={{
-              commentType: COMMENT_TYPE_TEXT[lang][type]
-            }}/>
+            <FormattedMessage
+              defaultMessage="After deletion, the {commentType} will be removed immediately"
+              description="src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx"
+              values={{
+                commentType: COMMENT_TYPE_TEXT[lang][type],
+              }}
+            />
           </p>
         </Dialog.Message>
 
@@ -101,7 +113,7 @@ const DeleteCommentDialog = ({
               closeDialog()
             }}
           >
-            <FormattedMessage defaultMessage="Confirm" description=""  />
+            <FormattedMessage defaultMessage="Confirm" description="" />
           </Dialog.Footer.Button>
 
           <Dialog.Footer.Button
diff --git a/src/components/Dialogs/HelpDialog/index.tsx b/src/components/Dialogs/HelpDialog/index.tsx
index 33917eb650..8e9ea7a741 100644
--- a/src/components/Dialogs/HelpDialog/index.tsx
+++ b/src/components/Dialogs/HelpDialog/index.tsx
@@ -1,8 +1,10 @@
+import { FormattedMessage } from 'react-intl'
+
 import {
   Dialog,
+  IconRead16,
   IconReadTimeTotal16,
   TextIcon,
-  Translate,
   useDialogSwitch,
 } from '~/components'
 
@@ -17,35 +19,15 @@ type Props = {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
 } & HelpDetailProps
 
-const time = {
-  zh_hant:
-    '累計閱讀時數代表了你的作品被登入用戶閱讀的總時數，每次閱讀過程超過一定時間後才會計入。' +
-    '此外，同一個用戶的多次閱讀也會進行累計。',
-  zh_hans:
-    '累计阅读时長代表了你的作品被登入用户阅读的总时数，每次阅读过程超过一定时间后才会计入。' +
-    '此外，同一个用户的多次阅读也会进行累计。',
-  en: 'Accumulated read time indicates the total time length that registered users read.',
-}
-
-const count = {
-  zh_hant:
-    '閱讀次數代表了你的作品被登入用戶閱讀的總次數，每次閱讀過程超過一定時間後才會計入。' +
-    '此外，同一個用戶的多次閱讀也會進行累計。',
-  zh_hans:
-    '阅读次数代表了你的作品被登入用户阅读的总次数，每次阅读过程超过一定时间后才会计入' +
-    '此外，同一个用户的多次阅读也会进行累计。',
-  en: 'Read counts indicates how many registered users read.',
-}
-
 const ReadTime = () => (
   <>
     <h2 className="title">
       <TextIcon icon={<IconReadTimeTotal16 size="md" />} weight="md">
-        <Translate id="readTime" />
+        <FormattedMessage defaultMessage="Accumulated Read Time" description="src/components/Dialogs/HelpDialog/index.tsx" />
       </TextIcon>
     </h2>
     <p className="description">
-      <Translate zh_hant={time.zh_hant} zh_hans={time.zh_hans} en={time.en} />
+      <FormattedMessage defaultMessage="Accumulated read time indicates the total time length that registered users read." description="src/components/Dialogs/HelpDialog/index.tsx" />
     </p>
     <style jsx>{styles}</style>
   </>
@@ -54,16 +36,12 @@ const ReadTime = () => (
 const ReadCount = () => (
   <>
     <h2 className="title">
-      <TextIcon icon={<IconReadTimeTotal16 size="md" />} weight="md">
-        <Translate id="readCount" />
+      <TextIcon icon={<IconRead16 size="md" />} weight="md">
+        <FormattedMessage defaultMessage="Read Counts" description="" />
       </TextIcon>
     </h2>
     <p className="description">
-      <Translate
-        zh_hant={count.zh_hant}
-        zh_hans={count.zh_hans}
-        en={count.en}
-      />
+      <FormattedMessage defaultMessage="Read counts indicates how many registered users read." description="src/components/Dialogs/HelpDialog/index.tsx" />
     </p>
     <style jsx>{styles}</style>
   </>
@@ -78,7 +56,7 @@ const BaseHelpDialog = ({ children, hasCount, hasTime }: Props) => {
 
       <Dialog size="sm" isOpen={show} onDismiss={closeDialog}>
         <Dialog.Header
-          title={<Translate id="help" />}
+          title={<FormattedMessage defaultMessage="Help" description="" />}
           closeDialog={closeDialog}
         />
 
@@ -93,7 +71,7 @@ const BaseHelpDialog = ({ children, hasCount, hasTime }: Props) => {
             bgColor="green"
             onClick={closeDialog}
           >
-            <Translate id="understood" />
+            <FormattedMessage defaultMessage="I see" description="" />
           </Dialog.Footer.Button>
         </Dialog.Footer>
       </Dialog>
diff --git a/src/components/Editor/BottomBar/AccessDialog/index.tsx b/src/components/Editor/BottomBar/AccessDialog/index.tsx
index 7d22cee1c2..d3d4a306f2 100644
--- a/src/components/Editor/BottomBar/AccessDialog/index.tsx
+++ b/src/components/Editor/BottomBar/AccessDialog/index.tsx
@@ -1,16 +1,29 @@
 import _get from 'lodash/get'
 
-import { Dialog, Translate, useDialogSwitch } from '~/components'
+import { Dialog, Spacer, Translate, useDialogSwitch } from '~/components'
 
 import ToggleAccess, { ToggleAccessProps } from '../../ToggleAccess'
+import ToggleResponse, { ToggleResponseProps } from '../../ToggleResponse'
 
 type AccessDialogProps = {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
-} & ToggleAccessProps
-
-const BaseAccessDialog = ({ children, ...props }: AccessDialogProps) => {
+} & ToggleAccessProps &
+  ToggleResponseProps
+
+const BaseAccessDialog = ({
+  children,
+  canComment,
+  toggleComment,
+  ...props
+}: AccessDialogProps) => {
   const { show, openDialog, closeDialog } = useDialogSwitch(true)
 
+  const toggleResponseProps: ToggleResponseProps = {
+    canComment,
+    toggleComment,
+    disableChangeCanComment: props.article?.canComment,
+  }
+
   return (
     <>
       {children({ openDialog })}
@@ -29,6 +42,8 @@ const BaseAccessDialog = ({ children, ...props }: AccessDialogProps) => {
         />
 
         <Dialog.Content spacing={['base', 'base']}>
+          <ToggleResponse {...toggleResponseProps} />
+          <Spacer size="base" />
           <ToggleAccess {...props} />
         </Dialog.Content>
       </Dialog>
diff --git a/src/components/Editor/BottomBar/index.tsx b/src/components/Editor/BottomBar/index.tsx
index 772eac51a6..c90eb48f36 100644
--- a/src/components/Editor/BottomBar/index.tsx
+++ b/src/components/Editor/BottomBar/index.tsx
@@ -16,8 +16,10 @@ import { SearchSelectDialog } from '~/components/Dialogs/SearchSelectDialog'
 import {
   SetCollectionProps,
   SetCoverProps,
+  SetResponseProps,
   SetTagsProps,
   ToggleAccessProps,
+  ToggleResponseProps,
 } from '~/components/Editor'
 import { SearchSelectNode } from '~/components/Forms/SearchSelectForm'
 import {
@@ -37,6 +39,7 @@ export type BottomBarProps = {
 } & SetCoverProps &
   SetCollectionProps &
   SetTagsProps &
+  SetResponseProps &
   ToggleAccessProps
 
 /**
@@ -77,6 +80,9 @@ const BottomBar: React.FC<BottomBarProps> = ({
   togglePublishISCN,
   iscnPublishSaving,
 
+  canComment,
+  toggleComment,
+
   saving,
   disabled,
 }) => {
@@ -96,7 +102,7 @@ const BottomBar: React.FC<BottomBarProps> = ({
     entityType,
     coverSaving,
   }
-  const accessProps: ToggleAccessProps = {
+  const accessProps: ToggleAccessProps & ToggleResponseProps = {
     circle,
     accessType,
     license,
@@ -113,6 +119,10 @@ const BottomBar: React.FC<BottomBarProps> = ({
     iscnPublish,
     togglePublishISCN,
     iscnPublishSaving,
+
+    canComment,
+    toggleComment,
+    disableChangeCanComment: article?.canComment,
   }
 
   return (
@@ -201,7 +211,7 @@ const BottomBar: React.FC<BottomBarProps> = ({
               )}
             </SearchSelectDialog>
 
-            {/* Circle & License & Support Feedback & ISCN */}
+            {/* Circle & License & Support Feedback & ISCN & canComment */}
             <AccessDialog {...accessProps}>
               {({ openDialog }) => (
                 <button
diff --git a/src/components/Editor/SettingsDialog/List/index.tsx b/src/components/Editor/SettingsDialog/List/index.tsx
index 3f937e42d8..5ffc6f8def 100644
--- a/src/components/Editor/SettingsDialog/List/index.tsx
+++ b/src/components/Editor/SettingsDialog/List/index.tsx
@@ -4,6 +4,7 @@ import { SetPublishISCNProps } from '~/components/Editor'
 import ListItem from '../../ListItem'
 import { Step } from '../../SettingsDialog'
 import ToggleAccess, { ToggleAccessProps } from '../../ToggleAccess'
+import ToggleResponse, { ToggleResponseProps } from '../../ToggleResponse'
 import styles from './styles.css'
 
 export type SettingsListDialogButtons = {
@@ -23,6 +24,7 @@ export type SettingsListDialogProps = {
   collectionCount: number
   tagsCount: number
 } & SettingsListDialogButtons &
+  ToggleResponseProps &
   ToggleAccessProps &
   SetPublishISCNProps
 
@@ -41,8 +43,18 @@ const SettingsList = ({
   collectionCount,
   tagsCount,
 
+  canComment,
+  toggleComment,
+  disableChangeCanComment,
+
   ...restProps
 }: SettingsListDialogProps) => {
+  const responseProps: ToggleResponseProps = {
+    canComment,
+    toggleComment,
+    disableChangeCanComment,
+  }
+
   return (
     <>
       <Dialog.Header
@@ -83,6 +95,10 @@ const SettingsList = ({
             <ListItem.NumberIndicator num={collectionCount} />
           </ListItem>
 
+          <section className="response">
+            <ToggleResponse {...responseProps} />
+          </section>
+
           <section className="access">
             <ToggleAccess {...restProps} />
           </section>
diff --git a/src/components/Editor/SettingsDialog/List/styles.css b/src/components/Editor/SettingsDialog/List/styles.css
index 5ba6920224..025e5d3a25 100644
--- a/src/components/Editor/SettingsDialog/List/styles.css
+++ b/src/components/Editor/SettingsDialog/List/styles.css
@@ -3,6 +3,10 @@ ul {
   overflow-y: auto;
 }
 
+.response {
+  padding: var(--spacing-base);
+}
+
 .access {
   padding: var(--spacing-base);
 }
diff --git a/src/components/Editor/SettingsDialog/index.tsx b/src/components/Editor/SettingsDialog/index.tsx
index fce889c9cc..4e6fe0dbbc 100644
--- a/src/components/Editor/SettingsDialog/index.tsx
+++ b/src/components/Editor/SettingsDialog/index.tsx
@@ -7,6 +7,7 @@ import {
   SetPublishISCNProps,
   SetTagsProps,
   ToggleAccessProps,
+  ToggleResponseProps,
 } from '~/components/Editor'
 import { SearchSelectNode } from '~/components/Forms/SearchSelectForm'
 import {
@@ -42,6 +43,7 @@ export type EditorSettingsDialogProps = {
   SetCollectionProps &
   SetTagsProps &
   ToggleAccessProps &
+  ToggleResponseProps &
   SetPublishISCNProps &
   SettingsListDialogButtons
 
@@ -92,6 +94,9 @@ const BaseEditorSettingsDialog = ({
   togglePublishISCN,
   iscnPublishSaving,
 
+  canComment,
+  toggleComment,
+
   saving,
   disabled,
   confirmButtonText,
@@ -150,6 +155,12 @@ const BaseEditorSettingsDialog = ({
     },
   }
 
+  const responseProps: ToggleResponseProps = {
+    canComment,
+    toggleComment,
+    disableChangeCanComment: article?.canComment,
+  }
+
   return (
     <>
       {children({ openDialog })}
@@ -168,6 +179,7 @@ const BaseEditorSettingsDialog = ({
             collectionCount={collection.length}
             tagsCount={tags.length}
             {...accessProps}
+            {...responseProps}
           />
         )}
 
diff --git a/src/components/Editor/Sidebar/Box/index.tsx b/src/components/Editor/Sidebar/Box/index.tsx
index 322bbe78f5..9e4451c2c9 100644
--- a/src/components/Editor/Sidebar/Box/index.tsx
+++ b/src/components/Editor/Sidebar/Box/index.tsx
@@ -19,6 +19,7 @@ interface BoxProps {
   subtitle?: TextId
   onClick?: () => any
   disabled?: boolean
+  footerSpace?: boolean
 }
 
 const Box: React.FC<React.PropsWithChildren<BoxProps>> = ({
@@ -27,12 +28,14 @@ const Box: React.FC<React.PropsWithChildren<BoxProps>> = ({
   subtitle,
   onClick,
   disabled,
+  footerSpace = true,
   children,
 }) => {
   const { lang } = useContext(LanguageContext)
 
   const boxClasses = classNames({
     box: true,
+    footerSpace: !!footerSpace,
     'u-area-disable': disabled,
   })
 
diff --git a/src/components/Editor/Sidebar/Box/styles.css b/src/components/Editor/Sidebar/Box/styles.css
index 07e5a3b349..7bdcd7f804 100644
--- a/src/components/Editor/Sidebar/Box/styles.css
+++ b/src/components/Editor/Sidebar/Box/styles.css
@@ -1,7 +1,7 @@
 .box {
   @mixin border-grey;
 
-  padding: var(--spacing-base) 0;
+  padding: var(--spacing-base) 0 0;
   border-radius: var(--spacing-x-tight);
 
   & header {
@@ -11,6 +11,10 @@
   }
 }
 
+.footerSpace {
+  padding-bottom: var(--spacing-base);
+}
+
 .subtitle {
   padding: 0 var(--spacing-base);
   margin-top: var(--spacing-xx-tight);
diff --git a/src/components/Editor/Sidebar/Response/index.tsx b/src/components/Editor/Sidebar/Response/index.tsx
new file mode 100644
index 0000000000..31ac9b4f85
--- /dev/null
+++ b/src/components/Editor/Sidebar/Response/index.tsx
@@ -0,0 +1,25 @@
+import { IconComment16 } from '~/components'
+
+import { SetResponseProps } from '../..'
+import ToggleResponse, { ToggleResponseProps } from '../../ToggleResponse'
+import Box from '../Box'
+import styles from './styles.css'
+
+export type SidebarManagementProps = ToggleResponseProps & SetResponseProps
+
+const SidebarArticleResponse: React.FC<SidebarManagementProps> = (props) => {
+  return (
+    <Box
+      icon={<IconComment16 size="md" />}
+      title="articleResponse"
+      footerSpace={false}
+    >
+      <section className="container">
+        <ToggleResponse inSidebar {...props} />
+        <style jsx>{styles}</style>
+      </section>
+    </Box>
+  )
+}
+
+export default SidebarArticleResponse
diff --git a/src/components/Editor/Sidebar/Response/styles.css b/src/components/Editor/Sidebar/Response/styles.css
new file mode 100644
index 0000000000..6aeb5ad74d
--- /dev/null
+++ b/src/components/Editor/Sidebar/Response/styles.css
@@ -0,0 +1,5 @@
+.container {
+  @mixin border-top-grey;
+
+  margin-top: var(--spacing-base);
+}
diff --git a/src/components/Editor/Sidebar/index.tsx b/src/components/Editor/Sidebar/index.tsx
index 139cfb0e1f..340cb7944e 100644
--- a/src/components/Editor/Sidebar/index.tsx
+++ b/src/components/Editor/Sidebar/index.tsx
@@ -1,6 +1,7 @@
 import Collection from './Collection'
 import Cover from './Cover'
 import Management from './Management'
+import SidebarArticleResponse from './Response'
 import Tags from './Tags'
 
 const Sidebar = {
@@ -8,6 +9,7 @@ const Sidebar = {
   Tags,
   Collection,
   Management,
+  Response: SidebarArticleResponse,
 }
 
 export default Sidebar
diff --git a/src/components/Editor/ToggleResponse/index.tsx b/src/components/Editor/ToggleResponse/index.tsx
new file mode 100644
index 0000000000..ad8a54d37b
--- /dev/null
+++ b/src/components/Editor/ToggleResponse/index.tsx
@@ -0,0 +1,142 @@
+import classNames from 'classnames'
+
+import {
+  IconChecked,
+  IconUnChecked,
+  IconUnCheckedGrey,
+  Translate,
+} from '~/components'
+
+import styles from './styles.css'
+
+export type ToggleResponseProps = {
+  canComment: boolean | null
+  toggleComment: (canComment: boolean) => void
+  inSidebar?: boolean
+  disableChangeCanComment?: boolean
+}
+
+const ToggleResponse = ({
+  canComment,
+  toggleComment,
+  inSidebar,
+  disableChangeCanComment = false,
+}: ToggleResponseProps) => {
+  const allowResponse = () => {
+    if (disableChangeCanComment) return
+    toggleComment(true)
+  }
+  const disableResponse = () => {
+    if (disableChangeCanComment) return
+    toggleComment(false)
+  }
+
+  const wrapperClasses = classNames({
+    wrapper: true,
+    inSidebar: !!inSidebar,
+    disableChange: !!disableChangeCanComment,
+  })
+
+  if (inSidebar) {
+    return (
+      <section className={wrapperClasses}>
+        <section className="item" onClick={allowResponse}>
+          <section className="left">
+            <h3>
+              <Translate id="allowResponses" />
+            </h3>
+            <p className="hint">
+              <Translate id="allowResponsesHint" />
+            </p>
+          </section>
+          <section className="right">
+            {canComment ? (
+              <IconChecked
+                size="md"
+                color={disableChangeCanComment ? 'grey' : 'green'}
+              />
+            ) : (
+              <IconUnChecked color="grey-light" size="md" />
+            )}
+          </section>
+        </section>
+        <section className="item" onClick={disableResponse}>
+          <section className="left">
+            <h3>
+              <Translate id="disableResponses" />
+            </h3>
+            <p className="hint">
+              <Translate id="disableResponsesHint" />
+            </p>
+          </section>
+          <section className="right">
+            {canComment ? (
+              disableChangeCanComment ? (
+                <IconUnCheckedGrey color="grey-light" size="md" />
+              ) : (
+                <IconUnChecked color="grey-light" size="md" />
+              )
+            ) : (
+              <IconChecked size="md" color="green" />
+            )}
+          </section>
+        </section>
+        <style jsx>{styles}</style>
+      </section>
+    )
+  }
+
+  return (
+    <section className="container">
+      <h3 className="title">
+        <Translate id="articleResponse" />
+      </h3>
+      <section className={wrapperClasses}>
+        <section className="item" onClick={allowResponse}>
+          <section className="left">
+            <h3>
+              <Translate id="allowResponses" />
+            </h3>
+            <p className="hint">
+              <Translate id="allowResponsesHint" />
+            </p>
+          </section>
+          <section className="right">
+            {canComment ? (
+              <IconChecked
+                color={disableChangeCanComment ? 'grey' : 'green'}
+                size="md-s"
+              />
+            ) : (
+              <IconUnChecked color="grey-light" size="md-s" />
+            )}
+          </section>
+        </section>
+        <section className="item" onClick={disableResponse}>
+          <section className="left">
+            <h3>
+              <Translate id="disableResponses" />
+            </h3>
+            <p className="hint">
+              <Translate id="disableResponsesHint" />
+            </p>
+          </section>
+          <section className="right">
+            {canComment ? (
+              disableChangeCanComment ? (
+                <IconUnCheckedGrey color="grey-light" size="md-s" />
+              ) : (
+                <IconUnChecked color="grey-light" size="md-s" />
+              )
+            ) : (
+              <IconChecked color="green" size="md-s" />
+            )}
+          </section>
+        </section>
+      </section>
+      <style jsx>{styles}</style>
+    </section>
+  )
+}
+
+export default ToggleResponse
diff --git a/src/components/Editor/ToggleResponse/styles.css b/src/components/Editor/ToggleResponse/styles.css
new file mode 100644
index 0000000000..3ced6a15d7
--- /dev/null
+++ b/src/components/Editor/ToggleResponse/styles.css
@@ -0,0 +1,62 @@
+.wrapper {
+  padding: var(--spacing-base);
+  background: var(--color-grey-lighter);
+  border-radius: 0.5rem;
+
+  & .item {
+    @mixin flex-center-space-between;
+
+    gap: var(--spacing-loose);
+    cursor: pointer;
+
+    & h3 {
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-base);
+      line-height: 1rem;
+      color: var(--color-black);
+    }
+
+    & .hint {
+      margin-top: var(--spacing-xx-tight);
+      font-size: var(--font-size-xs);
+      color: var(--color-grey);
+    }
+  }
+
+  & .item + .item {
+    padding-top: var(--spacing-base);
+  }
+}
+
+.inSidebar {
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+
+  & .item {
+    gap: var(--spacing-x-loose);
+    padding: var(--spacing-base);
+
+    & h3 {
+      font-size: var(--font-size-md-s);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  & .item + .item {
+    @mixin border-top-grey;
+  }
+}
+
+.disableChange {
+  & .item {
+    cursor: not-allowed;
+  }
+}
+
+.container {
+  & .title {
+    padding-bottom: var(--spacing-base);
+    font-size: var(--font-size-base);
+  }
+}
diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
index 7fb8298192..c64551e208 100644
--- a/src/components/Editor/index.tsx
+++ b/src/components/Editor/index.tsx
@@ -5,6 +5,7 @@ import {
 
 export * from './SetCover'
 export * from './ToggleAccess'
+export * from './ToggleResponse'
 
 export type SetCollectionProps = {
   collection: ArticleDigestDropdownArticleFragment[]
@@ -25,3 +26,8 @@ export type SetPublishISCNProps = {
   togglePublishISCN: (iscnPublish: boolean) => void
   iscnPublishSaving: boolean
 }
+
+export type SetResponseProps = {
+  canComment: boolean | null
+  toggleComment: (canComment: boolean) => void
+}
diff --git a/src/components/Forms/CreateCircleForm/Init.tsx b/src/components/Forms/CreateCircleForm/Init.tsx
index b53d914aec..0014881d6c 100644
--- a/src/components/Forms/CreateCircleForm/Init.tsx
+++ b/src/components/Forms/CreateCircleForm/Init.tsx
@@ -1,6 +1,7 @@
 import { useFormik } from 'formik'
 import _pickBy from 'lodash/pickBy'
 import { useContext, useRef } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 import {
   PAYMENT_CURRENCY,
@@ -10,7 +11,6 @@ import {
 import {
   analytics,
   parseFormSubmitErrors,
-  translate,
   validateCircleAmount,
   validateCircleDisplayName,
   validateCircleName,
@@ -20,7 +20,6 @@ import {
   Form,
   LanguageContext,
   Layout,
-  Translate,
   useMutation,
 } from '~/components'
 import PUT_CIRCLE from '~/components/GQL/mutations/putCircle'
@@ -54,6 +53,7 @@ const Init: React.FC<FormProps> = ({
   const isInPage = purpose === 'page'
   const formId = 'create-circle-init-form'
 
+  const intl = useIntl()
   const {
     values,
     errors,
@@ -101,18 +101,28 @@ const Init: React.FC<FormProps> = ({
           if (c === 'NAME_EXISTS') {
             setFieldError(
               'name',
-              translate({
-                zh_hant: 'Oops！此網址已被使用了，換一個試試',
-                zh_hans: 'Oops！此网址名称已被使用了，换一个试试',
-                lang,
+              intl.formatMessage({
+                defaultMessage:
+                  'This URL name has already been used, try another one',
+                description: 'src/components/Forms/CreateCircleForm/Init.tsx',
               })
             )
           } else if (c === 'NAME_INVALID') {
-            setFieldError('name', translate({ id: 'hintCircleName', lang }))
+            setFieldError(
+              'name',
+              intl.formatMessage({
+                defaultMessage:
+                  'Must be between 2-20 characters long. Only letters, numbers and underscores are allowed.',
+                description: '',
+              })
+            )
           } else if (c === 'DISPLAYNAME_INVALID') {
             setFieldError(
               'name',
-              translate({ id: 'hintCircleDisplayName', lang })
+              intl.formatMessage({
+                defaultMessage: 'Must be between 2-12 characters long.',
+                description: '',
+              })
             )
           } else {
             setFieldError('name', messages[c])
@@ -125,14 +135,13 @@ const Init: React.FC<FormProps> = ({
   const InnerForm = (
     <Form id={formId} onSubmit={handleSubmit}>
       <Form.Input
-        label={<Translate zh_hant="圍爐名稱" zh_hans="围炉名称" />}
+        label={<FormattedMessage defaultMessage="Circle Name" description="" />}
         type="text"
         name="displayName"
         required
-        placeholder={translate({
-          zh_hant: '給圍爐取一個吸引人的名字吧',
-          zh_hans: '给围炉取一个吸引人的名字吧',
-          lang,
+        placeholder={intl.formatMessage({
+          defaultMessage: 'Enter the name of your Circle',
+          description: '',
         })}
         value={values.displayName}
         error={touched.displayName && errors.displayName}
@@ -143,18 +152,17 @@ const Init: React.FC<FormProps> = ({
       <section className="displayNameInput">
         <Form.Input
           label={
-            <Translate
-              zh_hant="設置圍爐網址（創建後不可修改）"
-              zh_hans="设置围炉网址（创建后不可修改）"
+            <FormattedMessage
+              defaultMessage="Set the Circle URL (cannot be modified after creation)"
+              description="src/components/Forms/CreateCircleForm/Init.tsx"
             />
           }
           type="text"
           name="name"
           required
-          placeholder={translate({
-            zh_hant: '自定義網址名稱',
-            zh_hans: '自定义网址名称',
-            lang,
+          placeholder={intl.formatMessage({
+            defaultMessage: 'Custom URL Name',
+            description: '',
           })}
           value={values.name}
           error={touched.name && errors.name}
@@ -171,9 +179,9 @@ const Init: React.FC<FormProps> = ({
         max={PAYMENT_MAXIMUM_CIRCLE_AMOUNT.HKD}
         currency={PAYMENT_CURRENCY.HKD}
         label={
-          <Translate
-            zh_hant="設定圍爐門檻（每月）"
-            zh_hans="设定围炉门槛（每月）"
+          <FormattedMessage
+            defaultMessage="Set threshold for circle (per month)"
+            description="src/components/Forms/CreateCircleForm/Init.tsx"
           />
         }
         name="amount"
@@ -203,7 +211,7 @@ const Init: React.FC<FormProps> = ({
       type="submit"
       form={formId}
       disabled={!isValid || isSubmitting}
-      text={<Translate id="nextStep" />}
+      text={<FormattedMessage defaultMessage="Next Step" description="" />}
       loading={isSubmitting}
     />
   )
diff --git a/src/components/Forms/CreateCircleForm/Profile.tsx b/src/components/Forms/CreateCircleForm/Profile.tsx
index 02dd244409..dd6ab491a9 100644
--- a/src/components/Forms/CreateCircleForm/Profile.tsx
+++ b/src/components/Forms/CreateCircleForm/Profile.tsx
@@ -2,13 +2,13 @@ import { useFormik } from 'formik'
 import _pickBy from 'lodash/pickBy'
 import { useRouter } from 'next/router'
 import { useContext } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 import CIRCLE_COVER from '@/public/static/images/circle-cover.svg'
 import { ADD_TOAST, ASSET_TYPE, ENTITY_TYPE } from '~/common/enums'
 import {
   parseFormSubmitErrors,
   toPath,
-  translate,
   validateCircleDisplayName,
   validateDescription,
 } from '~/common/utils'
@@ -19,7 +19,6 @@ import {
   Form,
   LanguageContext,
   Layout,
-  Translate,
   useMutation,
 } from '~/components'
 import PUT_CIRCLE from '~/components/GQL/mutations/putCircle'
@@ -61,6 +60,7 @@ const Init: React.FC<FormProps> = ({ circle, type, purpose, closeDialog }) => {
   const formId = 'edit-circle-profile-form'
   const titleId = isCreate ? 'circleCreation' : 'basicProfile'
 
+  const intl = useIntl()
   const {
     values,
     errors,
@@ -106,8 +106,16 @@ const Init: React.FC<FormProps> = ({ circle, type, purpose, closeDialog }) => {
           new CustomEvent(ADD_TOAST, {
             detail: {
               color: 'green',
-              content: (
-                <Translate id={isCreate ? 'circleCreated' : 'circleEdited'} />
+              content: isCreate ? (
+                <FormattedMessage
+                  defaultMessage="Circle successfully created"
+                  description="src/components/Forms/CreateCircleForm/Profile.tsx"
+                />
+              ) : (
+                <FormattedMessage
+                  description="src/components/Forms/CreateCircleForm/Profile.tsx"
+                  defaultMessage="Circle Edited"
+                />
               ),
             },
           })
@@ -147,7 +155,10 @@ const Init: React.FC<FormProps> = ({ circle, type, purpose, closeDialog }) => {
         />
 
         <p className="hint">
-          <Translate id="recommendedCoverSize" />
+          <FormattedMessage
+            defaultMessage="Recommended size: 1600px x 900px"
+            description=""
+          />
         </p>
       </section>
 
@@ -163,19 +174,17 @@ const Init: React.FC<FormProps> = ({ circle, type, purpose, closeDialog }) => {
       {!isCreate && (
         <Form.Input
           label={
-            <Translate
-              zh_hant="圍爐名稱"
-              zh_hans="围炉名称"
-              en="Name of the Circle"
+            <FormattedMessage
+              defaultMessage="Name of the Circle"
+              description="src/components/Forms/CreateCircleForm/Profile.tsx"
             />
           }
           type="text"
           name="displayName"
           required
-          placeholder={translate({
-            zh_hant: '給圍爐取一個吸引人的名字吧',
-            zh_hans: '给围炉取一个吸引人的名字吧',
-            lang,
+          placeholder={intl.formatMessage({
+            defaultMessage: 'Enter the name of your Circle',
+            description: '',
           })}
           value={values.displayName}
           error={touched.displayName && errors.displayName}
@@ -186,20 +195,23 @@ const Init: React.FC<FormProps> = ({ circle, type, purpose, closeDialog }) => {
 
       <Form.Textarea
         label={
-          <Translate
-            zh_hant="圍爐描述"
-            zh_hans="围炉描述"
-            en="Description of the Circle"
+          <FormattedMessage
+            defaultMessage="Description of the Circle"
+            description="src/components/Forms/CreateCircleForm/Profile.tsx"
           />
         }
         name="description"
         required
-        placeholder={translate({
-          zh_hant: '說說圍爐的有趣之處，吸引支持者加入',
-          zh_hans: '说说围炉的有趣之处，吸引支持者加入',
-          lang,
+        placeholder={intl.formatMessage({
+          defaultMessage: 'Describe more about your Circle',
+          description: 'src/components/Forms/CreateCircleForm/Profile.tsx',
         })}
-        hint={<Translate id="hintDescription" />}
+        hint={
+          <FormattedMessage
+            defaultMessage="Maximum 200 characters."
+            description=""
+          />
+        }
         value={values.description}
         error={touched.description && errors.description}
         onBlur={handleBlur}
@@ -215,7 +227,7 @@ const Init: React.FC<FormProps> = ({ circle, type, purpose, closeDialog }) => {
       type="submit"
       form={formId}
       disabled={!isValid || isSubmitting}
-      text={<Translate id="done" />}
+      text={<FormattedMessage defaultMessage="Done" description="" />}
       loading={isSubmitting}
     />
   )
diff --git a/src/components/Hook/useRoute.ts b/src/components/Hook/useRoute.ts
index 4017531081..0538dca2aa 100644
--- a/src/components/Hook/useRoute.ts
+++ b/src/components/Hook/useRoute.ts
@@ -54,5 +54,10 @@ export const useRoute = () => {
     router.push({ query })
   }
 
-  return { isInPath, isPathStartWith, getQuery, setQuery, router }
+  const replaceQuery = (key: QueryKey, value: string) => {
+    const query = { ...router.query, [key]: value }
+    router.replace({ query })
+  }
+
+  return { isInPath, isPathStartWith, getQuery, setQuery, replaceQuery, router }
 }
diff --git a/src/components/Icon/IconDisableComment24.tsx b/src/components/Icon/IconDisableComment24.tsx
new file mode 100644
index 0000000000..1a91d52a53
--- /dev/null
+++ b/src/components/Icon/IconDisableComment24.tsx
@@ -0,0 +1,5 @@
+import { ReactComponent as Icon } from '@/public/static/icons/24px/disableComment.svg'
+
+import { withIcon } from './withIcon'
+
+export const IconDisableComment24 = withIcon(Icon)
diff --git a/src/components/Icon/IconUnCheckedGrey.tsx b/src/components/Icon/IconUnCheckedGrey.tsx
new file mode 100644
index 0000000000..1319dcfed8
--- /dev/null
+++ b/src/components/Icon/IconUnCheckedGrey.tsx
@@ -0,0 +1,5 @@
+import { ReactComponent as Icon } from '@/public/static/icons/uncheckedGrey.svg'
+
+import { withIcon } from './withIcon'
+
+export const IconUnCheckedGrey = withIcon(Icon)
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 454505f1ba..67d559a2fc 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -52,6 +52,7 @@ export * from './IconCollapse16'
 export * from './IconCollection24'
 export * from './IconComment16'
 export * from './IconCopy16'
+export * from './IconDisableComment24'
 export * from './IconDisallow16'
 export * from './IconDollarCircle16'
 export * from './IconDonate24'
@@ -130,6 +131,7 @@ export * from './IconSupport'
 export * from './IconTranslate16'
 export * from './IconTraveloggers16'
 export * from './IconUnChecked'
+export * from './IconUnCheckedGrey'
 export * from './IconUnfollow24'
 export * from './IconUnlock24'
 export * from './IconUnMute24'
diff --git a/src/components/Interaction/Card/index.tsx b/src/components/Interaction/Card/index.tsx
index eda01c12b3..dc56947713 100644
--- a/src/components/Interaction/Card/index.tsx
+++ b/src/components/Interaction/Card/index.tsx
@@ -1,7 +1,14 @@
 import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { AriaAttributes, AriaRole, forwardRef, useContext, useRef } from 'react'
+import {
+  AriaAttributes,
+  AriaRole,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react'
 
 import { KEYCODES, TEST_ID } from '~/common/enums'
 import { translate } from '~/common/utils'
@@ -24,6 +31,9 @@ export interface CardProps {
   borderColor?: CardBorderColor
   borderRadius?: CardBorderRadius
 
+  isActive?: boolean
+  activeOutline?: 'auto'
+
   href?: string
 
   htmlHref?: string
@@ -51,6 +61,9 @@ export const Card: React.FC<React.PropsWithChildren<CardProps>> = forwardRef(
       borderColor,
       borderRadius,
 
+      isActive,
+      activeOutline,
+
       href,
 
       htmlHref,
@@ -83,6 +96,7 @@ export const Card: React.FC<React.PropsWithChildren<CardProps>> = forwardRef(
       [`bg-active-${bgActiveColor}`]: !!bgActiveColor,
       [`border-${borderColor}`]: !!borderColor,
       [`border-radius-${borderRadius}`]: !!borderRadius,
+      ['active-outline-auto']: !!activeOutline,
 
       hasBorder: !!borderColor || !!borderRadius,
       disabled,
@@ -157,6 +171,12 @@ export const Card: React.FC<React.PropsWithChildren<CardProps>> = forwardRef(
       }
     }
 
+    useEffect(() => {
+      if (cardRef && isActive) {
+        cardRef.current.focus()
+      }
+    }, [cardRef, isActive])
+
     if (is === 'link' && href) {
       return (
         <Link href={href} legacyBehavior>
diff --git a/src/components/Interaction/Card/styles.css b/src/components/Interaction/Card/styles.css
index 72bc8704f4..d29e1543d6 100644
--- a/src/components/Interaction/Card/styles.css
+++ b/src/components/Interaction/Card/styles.css
@@ -11,6 +11,14 @@
   }
 }
 
+.active-outline-auto {
+  &:not(.disabled) {
+    &:focus {
+      outline: auto;
+    }
+  }
+}
+
 /* Background */
 .bg-white {
   background: var(--color-white);
diff --git a/src/components/Layout/NavBar/index.tsx b/src/components/Layout/NavBar/index.tsx
index 038e229fa7..a83522d902 100644
--- a/src/components/Layout/NavBar/index.tsx
+++ b/src/components/Layout/NavBar/index.tsx
@@ -1,6 +1,7 @@
 import { useContext } from 'react'
 
 import { PATHS, TEXT } from '~/common/enums'
+import { toPath } from '~/common/utils'
 import {
   IconNavHome24,
   IconNavHomeActive24,
@@ -18,8 +19,8 @@ import styles from './styles.css'
 
 const NavBar = () => {
   const viewer = useContext(ViewerContext)
+  const { router, isInPath } = useRoute()
   const { lang } = useContext(LanguageContext)
-  const { isInPath } = useRoute()
   const isInHome = isInPath('HOME')
   const isInFollow = isInPath('FOLLOW')
   const isInNotification = isInPath('ME_NOTIFICATIONS')
@@ -61,7 +62,17 @@ const NavBar = () => {
           icon={<IconNavSearch24 size="md" />}
           activeIcon={<IconNavSearch24 size="md" color="green" />}
           active={isInSearch}
-          href={PATHS.SEARCH}
+          onClick={() => {
+            const path = toPath({
+              page: 'search',
+            })
+
+            if (isInSearch) {
+              router.replace(path.href)
+            } else {
+              router.push(path.href)
+            }
+          }}
         />
 
         {viewer.isAuthed && (
diff --git a/src/components/Layout/SideNav/index.tsx b/src/components/Layout/SideNav/index.tsx
index adf2388611..f75b6f3bc9 100644
--- a/src/components/Layout/SideNav/index.tsx
+++ b/src/components/Layout/SideNav/index.tsx
@@ -5,6 +5,7 @@ import FocusLock from 'react-focus-lock'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import { PATHS, Z_INDEX } from '~/common/enums'
+import { toPath } from '~/common/utils'
 import {
   Dropdown,
   hidePopperOnClick,
@@ -28,7 +29,7 @@ import NavListItem from './NavListItem'
 import styles from './styles.css'
 
 const SideNav = () => {
-  const { isInPath, isPathStartWith, getQuery } = useRoute()
+  const { router, isInPath, isPathStartWith, getQuery } = useRoute()
   const viewer = useContext(ViewerContext)
 
   const userName = getQuery('name')
@@ -104,7 +105,17 @@ const SideNav = () => {
             icon={<IconNavSearch24 size="md" />}
             activeIcon={<IconNavSearch24 size="md" color="green" />}
             active={isInSearch}
-            href={PATHS.SEARCH}
+            onClick={() => {
+              const path = toPath({
+                page: 'search',
+              })
+
+              if (isInSearch) {
+                router.replace(path.href)
+              } else {
+                router.push(path.href)
+              }
+            }}
           />
         </Media>
 
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index ce76941810..1f042021ce 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -95,7 +95,6 @@ const Main: React.FC<React.PropsWithChildren<MainProps>> = ({
   children,
 }) => {
   const { isInPath, isPathStartWith } = useRoute()
-  const isInSearch = isInPath('SEARCH')
   const isInSettings = isInPath('SETTINGS')
   const isInArticleDetail = isInPath('ARTICLE_DETAIL')
   const isInCircle = isPathStartWith('/~', true)
@@ -134,7 +133,7 @@ const Main: React.FC<React.PropsWithChildren<MainProps>> = ({
       <aside className="l-col-three-right">
         <Media greaterThanOrEqual="xl">
           <section className="content">
-            {!isInSearch && !inEditor && <SearchBar />}
+            {!inEditor && <SearchBar />}
 
             {showOnboardingTasks && <DynamicOnboardingTasksWidget />}
 
diff --git a/src/components/Search/SearchBar/index.tsx b/src/components/Search/SearchBar/index.tsx
index 34c8a0aae7..2d8adcc5ef 100644
--- a/src/components/Search/SearchBar/index.tsx
+++ b/src/components/Search/SearchBar/index.tsx
@@ -1,18 +1,21 @@
 import dynamic from 'next/dynamic'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { useDebounce } from 'use-debounce'
 
-import { INPUT_DEBOUNCE, Z_INDEX } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import { INPUT_DEBOUNCE, MAX_SEARCH_KEY_LENGTH, Z_INDEX } from '~/common/enums'
+import { getSearchType, toPath, translate } from '~/common/utils'
 import {
   Button,
   Dropdown,
+  IconClear16,
   IconSearch16,
-  SearchAutoComplete,
-  SearchOverview,
+  LanguageContext,
+  SearchQuickResult,
+  useNativeEventListener,
   useRoute,
 } from '~/components'
+import { QuickResultQuery } from '~/gql/graphql'
 
 import styles from './styles.css'
 
@@ -44,13 +47,34 @@ const SearchButton = () => {
   )
 }
 
+interface ClearButtonProps {
+  onClick: () => void
+}
+
+const ClearButton = ({ onClick }: ClearButtonProps) => {
+  const { lang } = useContext(LanguageContext)
+
+  return (
+    <Button
+      size={['2rem', '2rem']}
+      type="button"
+      aria-label={translate({ id: 'clear', lang })}
+      onClick={onClick}
+    >
+      <IconClear16 color="grey-dark" />
+    </Button>
+  )
+}
+
 export const SearchBar: React.FC<SearchBarProps> = ({
   onChange,
   hasDropdown = true,
 }) => {
-  const { getQuery, router } = useRoute()
+  const { getQuery, router, isInPath } = useRoute()
+  const isInSearch = isInPath('SEARCH')
   const q = getQuery('q')
-  const [search, setSearch] = useState('')
+  const type = getSearchType(getQuery('type'))
+  const [search, setSearch] = useState(q)
   const [debouncedSearch] = useDebounce(search, INPUT_DEBOUNCE)
   const intl = useIntl()
 
@@ -59,15 +83,85 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     description: '',
   })
   const textPlaceholder = intl.formatMessage({
-    defaultMessage: 'Search articles, tags and authors',
-    description: 'src/components/Search/SearchBar/index.tsx',
+    defaultMessage: 'Search',
+    description: '',
   })
 
+  const searchTextInput = useRef<HTMLInputElement>(null)
+
   // dropdown
   const [showDropdown, setShowDropdown] = useState(false)
   const closeDropdown = () => setShowDropdown(false)
   const openDropdown = () => setShowDropdown(true)
 
+  // quick result hotkeys
+  const [data, setData] = useState<QuickResultQuery>()
+  const [activeItem, setActiveItem] = useState('input')
+  const resetActiveItem = () => setActiveItem('input')
+  const items = ['input']
+  const { edges: userEdges } = data?.user || {}
+  const { edges: tagEdges } = data?.tag || {}
+  const hasUsers = userEdges && userEdges.length > 0
+  const hasTags = tagEdges && tagEdges.length > 0
+
+  if (hasUsers) {
+    userEdges.map(({ cursor }, i) => {
+      items.push(`user${cursor}`)
+    })
+  }
+  if (hasTags) {
+    tagEdges.map(({ cursor }, i) => {
+      items.push(`tag${cursor}`)
+    })
+  }
+
+  useNativeEventListener(
+    'keydown',
+    (e: { code: string; preventDefault: () => void }) => {
+      if (e.code === 'ArrowUp') {
+        if (!showDropdown) return
+
+        e.preventDefault()
+        const activeIndex = items.indexOf(activeItem)
+        if (activeIndex === 0) return
+
+        setActiveItem(items[activeIndex - 1])
+      }
+
+      if (e.code === 'ArrowDown') {
+        if (!showDropdown) return
+
+        e.preventDefault()
+        const activeIndex = items.indexOf(activeItem)
+        if (activeIndex === items.length - 1) return
+
+        setActiveItem(items[activeIndex + 1])
+      }
+
+      if (e.code === 'Escape') {
+        if (!showDropdown) return
+
+        setShowDropdown(false)
+      }
+    },
+    true
+  )
+
+  useEffect(() => {
+    if (
+      hasDropdown &&
+      showDropdown &&
+      searchTextInput.current &&
+      activeItem === 'input'
+    ) {
+      searchTextInput.current.focus()
+    }
+  }, [activeItem])
+
+  useEffect(() => {
+    setSearch(q)
+  }, [q])
+
   useEffect(() => {
     if (onChange) {
       onChange(debouncedSearch)
@@ -81,13 +175,24 @@ export const SearchBar: React.FC<SearchBarProps> = ({
       onSubmit={(values) => {
         const path = toPath({
           page: 'search',
-          q: values.q.slice(0, 100),
+          q: encodeURIComponent(values.q.slice(0, MAX_SEARCH_KEY_LENGTH)),
+          type,
         })
-        router.push(path.href)
+
+        if (values.q.length <= 0) return
+
+        searchTextInput.current?.blur()
+
+        if (isInSearch) {
+          router.replace(path.href)
+        } else {
+          router.push(path.href)
+        }
+
         closeDropdown()
       }}
     >
-      {({ values, handleSubmit, handleChange }) => {
+      {({ values, setValues, handleSubmit, handleChange }) => {
         if (!hasDropdown) {
           return (
             <form
@@ -95,10 +200,12 @@ export const SearchBar: React.FC<SearchBarProps> = ({
               aria-label={textPlaceholder}
               role="search"
               autoComplete="off"
+              action=""
             >
               <input
                 type="search"
                 name="q"
+                ref={searchTextInput}
                 aria-label={textAriaLabel}
                 placeholder={textPlaceholder}
                 autoCorrect="off"
@@ -107,9 +214,18 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                   setSearch(e.target.value)
                 }}
                 value={values.q}
+                maxLength={MAX_SEARCH_KEY_LENGTH}
               />
 
               <SearchButton />
+              {search.length > 0 && (
+                <ClearButton
+                  onClick={() => {
+                    setValues({ q: '' })
+                    setSearch('')
+                  }}
+                />
+              )}
 
               <style jsx>{styles}</style>
             </form>
@@ -119,10 +235,22 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         return (
           <Dropdown
             content={
-              debouncedSearch ? (
-                <SearchAutoComplete searchKey={debouncedSearch} />
-              ) : (
-                <SearchOverview />
+              !isInSearch &&
+              debouncedSearch && (
+                <SearchQuickResult
+                  searchKey={debouncedSearch}
+                  onUpdateData={(newData: QuickResultQuery | undefined) => {
+                    setData(newData)
+                  }}
+                  closeDropdown={() => {
+                    closeDropdown()
+
+                    // clear input
+                    setValues({ q: '' })
+                    setSearch('')
+                  }}
+                  activeItem={activeItem}
+                />
               )
             }
             trigger={undefined}
@@ -132,20 +260,23 @@ export const SearchBar: React.FC<SearchBarProps> = ({
             visible={showDropdown}
             zIndex={Z_INDEX.OVER_GLOBAL_HEADER}
           >
-            <form onSubmit={handleSubmit} autoComplete="off">
+            <form onSubmit={handleSubmit} autoComplete="off" action="">
               <input
                 type="search"
                 name="q"
+                ref={searchTextInput}
                 aria-label={textAriaLabel}
                 placeholder={textPlaceholder}
                 value={values.q}
                 onChange={(e) => {
                   handleChange(e)
                   setSearch(e.target.value)
+                  resetActiveItem()
                   openDropdown()
                 }}
                 onFocus={openDropdown}
                 onClick={openDropdown}
+                maxLength={MAX_SEARCH_KEY_LENGTH}
               />
 
               <SearchButton />
diff --git a/src/components/Search/SearchBar/styles.css b/src/components/Search/SearchBar/styles.css
index 38aee1579d..f8bc2fa106 100644
--- a/src/components/Search/SearchBar/styles.css
+++ b/src/components/Search/SearchBar/styles.css
@@ -19,8 +19,9 @@ form {
     padding: 0 var(--spacing-base) 0 var(--search-bar-button-width);
     font-size: var(--font-size-sm);
     color: var(--color-black);
+    text-overflow: ellipsis;
     background-color: var(--color-grey-lighter);
-    border: 1px solid var(--color-grey-lighter);
+    border: 1px solid var(--color-line-grey-light);
     border-radius: var(--search-bar-height);
     transition-property: border-color, background-color;
 
@@ -42,4 +43,12 @@ form {
     width: var(--search-bar-button-width);
     height: 100%;
   }
+
+  & :global(button[type='button']) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--search-bar-button-width);
+    height: 100%;
+  }
 }
diff --git a/src/components/Search/SearchHistory/EmptySearchHistory/index.tsx b/src/components/Search/SearchHistory/EmptySearchHistory/index.tsx
new file mode 100644
index 0000000000..2e036bd0a5
--- /dev/null
+++ b/src/components/Search/SearchHistory/EmptySearchHistory/index.tsx
@@ -0,0 +1,23 @@
+import IMAGE_EMPTY_SEARCH_HISTORY from '@/public/static/images/illustration-empty-search-history.png'
+import { Translate } from '~/components'
+
+import styles from './styles.css'
+
+const EmptySearchHistory = () => {
+  return (
+    <section className="container">
+      <img src={IMAGE_EMPTY_SEARCH_HISTORY.src} alt="empty search history" />
+      <section className="hint">
+        <Translate
+          zh_hant="輸入關鍵詞餵食搜尋怪，幫你找到相關內容哦！"
+          zh_hans="输入关键词喂食搜寻怪，帮你找到相关内容哦！"
+          en="Once upon a time there was a search monster who ate your keyword then gave you what you ask for."
+        />
+      </section>
+
+      <style jsx>{styles}</style>
+    </section>
+  )
+}
+
+export default EmptySearchHistory
diff --git a/src/components/Search/SearchHistory/EmptySearchHistory/styles.css b/src/components/Search/SearchHistory/EmptySearchHistory/styles.css
new file mode 100644
index 0000000000..9c36c53e0c
--- /dev/null
+++ b/src/components/Search/SearchHistory/EmptySearchHistory/styles.css
@@ -0,0 +1,17 @@
+.container {
+  @mixin flex-center-all;
+
+  flex-direction: column;
+  padding: 2.5rem 2rem 0;
+
+  & img {
+    height: 200px;
+  }
+
+  & .hint {
+    padding-top: var(--spacing-x-tight);
+    font-size: var(--font-size-sm-s);
+    line-height: 1.5rem;
+    color: var(--color-grey-darker);
+  }
+}
diff --git a/src/components/Search/SearchHistory/index.tsx b/src/components/Search/SearchHistory/index.tsx
new file mode 100644
index 0000000000..2abe19340f
--- /dev/null
+++ b/src/components/Search/SearchHistory/index.tsx
@@ -0,0 +1,61 @@
+import { analytics, toPath } from '~/common/utils'
+import { Button, IconClose32, Menu, TextIcon, Translate } from '~/components'
+
+interface SearchHistoryProps {
+  data: string[] | undefined
+  removeSearchHistoryItem: (value: string) => void
+}
+import EmptySearchHistory from './EmptySearchHistory'
+import styles from './styles.css'
+
+export const SearchHistory = ({
+  data,
+  removeSearchHistoryItem,
+}: SearchHistoryProps) => {
+  if (!data || data.length <= 0) {
+    return <EmptySearchHistory />
+  }
+
+  return (
+    <section>
+      <section className="title">
+        <TextIcon size="xm" color="grey" weight="md">
+          <Translate zh_hans="最近搜索" zh_hant="最近搜尋" en="History" />
+        </TextIcon>
+      </section>
+      <Menu>
+        {data.map((value, i) => (
+          <Menu.Item
+            key={i}
+            {...toPath({
+              page: 'search',
+              q: value,
+            })}
+            spacing={['base', 'base']}
+            onClick={() => {
+              analytics.trackEvent('click_feed', {
+                type: 'search_history',
+                contentType: 'key',
+                location: i,
+                searchKey: value,
+              })
+            }}
+          >
+            <section className="item">
+              <span className="key">{value}</span>
+              <Button
+                onClick={(e) => {
+                  e?.stopPropagation()
+                  removeSearchHistoryItem(value)
+                }}
+              >
+                <IconClose32 color="grey" size="md" />
+              </Button>
+            </section>
+          </Menu.Item>
+        ))}
+      </Menu>
+      <style jsx>{styles}</style>
+    </section>
+  )
+}
diff --git a/src/components/Search/SearchHistory/styles.css b/src/components/Search/SearchHistory/styles.css
new file mode 100644
index 0000000000..770c6c91b6
--- /dev/null
+++ b/src/components/Search/SearchHistory/styles.css
@@ -0,0 +1,17 @@
+.title {
+  padding: var(--spacing-loose) var(--spacing-base) var(--spacing-base);
+}
+
+.item {
+  @mixin flex-center-space-between;
+
+  & .key {
+    @mixin line-clamp;
+
+    font-size: var(--font-size-md-s);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5rem;
+    color: var(--color-black);
+    word-break: break-all;
+  }
+}
diff --git a/src/components/Search/SearchQuickResult/TriggerFullSearchItem.tsx b/src/components/Search/SearchQuickResult/TriggerFullSearchItem.tsx
new file mode 100644
index 0000000000..7e504b12b7
--- /dev/null
+++ b/src/components/Search/SearchQuickResult/TriggerFullSearchItem.tsx
@@ -0,0 +1,32 @@
+import { toPath } from '~/common/utils'
+import { IconArrowRight16, Menu, TextIcon, Translate } from '~/components'
+
+interface TriggerFullSearchItemProps {
+  searchKey: string
+}
+
+const TriggerFullSearchItem = ({ searchKey }: TriggerFullSearchItemProps) => {
+  return (
+    <Menu.Item
+      {...toPath({
+        page: 'search',
+        q: searchKey,
+      })}
+    >
+      <TextIcon
+        icon={<IconArrowRight16 color="green" />}
+        color="green"
+        weight="md"
+        textPlacement="left"
+      >
+        <Translate
+          zh_hant="查看所有作品、用戶、標籤檢索結果"
+          zh_hans="查看所有作品、用戶、标签搜索結果"
+          en="All article, author, tag search results"
+        />
+      </TextIcon>
+    </Menu.Item>
+  )
+}
+
+export default TriggerFullSearchItem
diff --git a/src/components/Search/SearchQuickResult/gql.ts b/src/components/Search/SearchQuickResult/gql.ts
new file mode 100644
index 0000000000..88fcf9875a
--- /dev/null
+++ b/src/components/Search/SearchQuickResult/gql.ts
@@ -0,0 +1,49 @@
+import gql from 'graphql-tag'
+
+// TODO: Why this line don't work
+// import { TagDigest, UserDigest } from '~/components'
+import { TagDigest } from '~/components/TagDigest'
+import { UserDigest } from '~/components/UserDigest'
+
+export const QUICK_RESULT = gql`
+  query QuickResult($key: String!, $version: SearchAPIVersion = v20221212) {
+    user: search(
+      input: {
+        type: User
+        quicksearch: true
+        version: $version
+        first: 5
+        key: $key
+      }
+    ) {
+      edges {
+        cursor
+        node {
+          ... on User {
+            ...UserDigestConciseUser
+          }
+        }
+      }
+    }
+    tag: search(
+      input: {
+        type: Tag
+        quicksearch: true
+        version: $version
+        first: 5
+        key: $key
+      }
+    ) {
+      edges {
+        cursor
+        node {
+          ... on Tag {
+            ...TagDigestConciseTag
+          }
+        }
+      }
+    }
+  }
+  ${UserDigest.Concise.fragments.user}
+  ${TagDigest.Concise.fragments.tag}
+`
diff --git a/src/components/Search/SearchQuickResult/index.tsx b/src/components/Search/SearchQuickResult/index.tsx
new file mode 100644
index 0000000000..425c0655e6
--- /dev/null
+++ b/src/components/Search/SearchQuickResult/index.tsx
@@ -0,0 +1,180 @@
+import { useApolloClient } from '@apollo/react-hooks'
+import { Fragment, useEffect, useState } from 'react'
+
+import {
+  MAX_QUICK_SEARCH_KEY_LENGTH,
+  MIN_QUICK_SEARCH_KEY_LENGTH,
+  SEARCH_START_FLAG,
+} from '~/common/enums'
+import { analytics, toPath } from '~/common/utils'
+import {
+  Media,
+  Menu,
+  Spacer,
+  Spinner,
+  TagDigest,
+  UserDigest,
+  useRoute,
+} from '~/components'
+import { QuickResultQuery } from '~/gql/graphql'
+
+import { QUICK_RESULT } from './gql'
+import TriggerFullSearchItem from './TriggerFullSearchItem'
+
+interface QuickSearchProps {
+  searchKey: string
+  activeItem?: string
+  onUpdateData?: (data: QuickResultQuery | undefined) => void
+  closeDropdown: () => void
+
+  inPage?: boolean
+}
+
+export const SearchQuickResult = (props: QuickSearchProps) => {
+  // TODO: Just test for team, will be removed when release
+  const { getQuery } = useRoute()
+  const version = getQuery('version')
+
+  const { searchKey, inPage, activeItem, onUpdateData, closeDropdown } = props
+  const client = useApolloClient()
+  const [data, setData] = useState<QuickResultQuery>()
+  const clearData = () => setData(undefined)
+  const [loading, setLoading] = useState(false)
+
+  const { edges: userEdges } = data?.user || {}
+  const { edges: tagEdges } = data?.tag || {}
+
+  const hasUsers = userEdges && userEdges.length > 0
+  const hasTags = tagEdges && tagEdges.length > 0
+
+  useEffect(() => {
+    if (onUpdateData) {
+      onUpdateData(data)
+    }
+  }, [JSON.stringify(data)])
+
+  useEffect(() => {
+    ;(async () => {
+      clearData()
+      if (
+        SEARCH_START_FLAG.includes(searchKey[0]) &&
+        (searchKey.length < MIN_QUICK_SEARCH_KEY_LENGTH + 1 ||
+          searchKey.length > MAX_QUICK_SEARCH_KEY_LENGTH + 1)
+      ) {
+        return
+      }
+
+      if (
+        searchKey.length < MIN_QUICK_SEARCH_KEY_LENGTH ||
+        searchKey.length > MAX_QUICK_SEARCH_KEY_LENGTH
+      )
+        return
+
+      setLoading(true)
+      // Why not useLazyQuery 👇🔗
+      // https://github.com/apollographql/apollo-client/issues/5912
+      const response = await client.query({
+        query: QUICK_RESULT,
+        variables: {
+          key: searchKey,
+          version: version === '' ? undefined : version,
+        },
+        fetchPolicy: 'no-cache',
+      })
+      analytics.trackEvent('load_more', {
+        type: 'quick_search',
+        location: 0,
+        searchKey: searchKey,
+      })
+      setData(response.data)
+      setLoading(response.loading)
+    })()
+  }, [searchKey])
+
+  if (loading) {
+    return (
+      <Menu width={inPage ? undefined : 'md'}>
+        <Spinner />
+      </Menu>
+    )
+  }
+
+  if (!hasUsers && !hasTags) {
+    return null
+  }
+
+  return (
+    <Menu width={inPage ? undefined : 'md'}>
+      <Media lessThan="lg">
+        <TriggerFullSearchItem searchKey={searchKey} />
+        <Menu.Divider />
+      </Media>
+      {hasUsers &&
+        userEdges.map(
+          ({ node, cursor }, i) =>
+            node.__typename === 'User' && (
+              <Fragment key={cursor}>
+                <Menu.Item
+                  bgActiveColor="grey-lighter"
+                  activeOutline="auto"
+                  isActive={`user${cursor}` === activeItem}
+                  {...toPath({
+                    page: 'userProfile',
+                    userName: node.userName || '',
+                  })}
+                  onClick={() => {
+                    closeDropdown()
+                    analytics.trackEvent('click_feed', {
+                      type: 'quick_search_user',
+                      contentType: 'user',
+                      location: i,
+                      id: node.id,
+                      searchKey: searchKey,
+                    })
+                  }}
+                >
+                  <UserDigest.Concise
+                    user={node}
+                    avatarSize="lg"
+                    nameStyle="tight"
+                  />
+                </Menu.Item>
+              </Fragment>
+            )
+        )}
+      {hasUsers && <Spacer size="xtight" />}
+      {hasUsers && hasTags && <Menu.Divider />}
+      {hasUsers && <Spacer size="xtight" />}
+      {hasTags &&
+        tagEdges.map(
+          ({ node, cursor }, i) =>
+            node.__typename === 'Tag' && (
+              <Fragment key={cursor}>
+                <Menu.Item
+                  spacing={['base', 'base']}
+                  bgActiveColor="grey-lighter"
+                  activeOutline="auto"
+                  isActive={`tag${cursor}` === activeItem}
+                  {...toPath({
+                    page: 'tagDetail',
+                    tag: node,
+                  })}
+                  onClick={() => {
+                    closeDropdown()
+                    analytics.trackEvent('click_feed', {
+                      type: 'quick_search_tag',
+                      contentType: 'tag',
+                      location: i,
+                      id: node.id,
+                      searchKey: searchKey,
+                    })
+                  }}
+                >
+                  <TagDigest.Concise tag={node} textSize="sm" />
+                </Menu.Item>
+              </Fragment>
+            )
+        )}
+    </Menu>
+  )
+}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index d991de45ef..55f2576179 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -1,3 +1,6 @@
 export * from './SearchAutoComplete'
 export * from './SearchBar'
+export * from './SearchHistory'
+export * from './SearchHistory'
 export * from './SearchOverview'
+export * from './SearchQuickResult'
diff --git a/src/components/TagDigest/Concise/index.tsx b/src/components/TagDigest/Concise/index.tsx
new file mode 100644
index 0000000000..a94405c5bb
--- /dev/null
+++ b/src/components/TagDigest/Concise/index.tsx
@@ -0,0 +1,70 @@
+import gql from 'graphql-tag'
+
+import { numAbbr, toPath } from '~/common/utils'
+import {
+  IconArticle16,
+  IconHashTag16,
+  LinkWrapper,
+  TextIcon,
+} from '~/components'
+import { TagDigestConciseTagFragment } from '~/gql/graphql'
+
+import styles from './styles.css'
+
+export type TagDigestConciseTagProps = {
+  tag: TagDigestConciseTagFragment
+  textSize?: 'sm' | 'md-s'
+  showArticlesNum?: boolean
+}
+
+const fragments = {
+  tag: gql`
+    fragment TagDigestConciseTag on Tag {
+      id
+      content
+      numArticles
+    }
+  `,
+}
+
+const Concise = ({
+  tag,
+  textSize = 'md-s',
+  showArticlesNum,
+}: TagDigestConciseTagProps) => {
+  const path = toPath({
+    page: 'tagDetail',
+    tag,
+  })
+  return (
+    <LinkWrapper {...path}>
+      <section className="content">
+        <TextIcon
+          icon={<IconHashTag16 color="grey" />}
+          color="black"
+          size={textSize}
+          spacing="xxtight"
+          weight="md"
+        >
+          {tag.content}
+        </TextIcon>
+
+        {showArticlesNum && (
+          <TextIcon
+            icon={<IconArticle16 color="grey-dark" size="xs" />}
+            size="xs"
+            spacing="xxtight"
+            color="grey-dark"
+          >
+            {numAbbr(tag.numArticles)}
+          </TextIcon>
+        )}
+        <style jsx>{styles}</style>
+      </section>
+    </LinkWrapper>
+  )
+}
+
+Concise.fragments = fragments
+
+export default Concise
diff --git a/src/components/TagDigest/Concise/styles.css b/src/components/TagDigest/Concise/styles.css
new file mode 100644
index 0000000000..8e95ee81d6
--- /dev/null
+++ b/src/components/TagDigest/Concise/styles.css
@@ -0,0 +1,5 @@
+.content {
+  & :global(span + span) {
+    margin-left: 0.625rem;
+  }
+}
diff --git a/src/components/TagDigest/index.tsx b/src/components/TagDigest/index.tsx
index faae96e758..f5fd06a8db 100644
--- a/src/components/TagDigest/index.tsx
+++ b/src/components/TagDigest/index.tsx
@@ -1,8 +1,10 @@
+import Concise from './Concise'
 import Feed from './Feed'
 import Rich from './Rich'
 import Sidebar from './Sidebar'
 
 export const TagDigest = {
+  Concise,
   Rich,
   Sidebar,
   Feed,
diff --git a/src/components/UserDigest/Concise/gql.ts b/src/components/UserDigest/Concise/gql.ts
new file mode 100644
index 0000000000..a9dfbac214
--- /dev/null
+++ b/src/components/UserDigest/Concise/gql.ts
@@ -0,0 +1,20 @@
+import gql from 'graphql-tag'
+
+import { Avatar } from '~/components/Avatar'
+
+export const fragments = {
+  user: gql`
+    fragment UserDigestConciseUser on User {
+      id
+      userName
+      displayName
+      status {
+        state
+      }
+      ...AvatarUser
+      ...AvatarUserLogbook
+    }
+    ${Avatar.fragments.user}
+    ${Avatar.fragments.logbook}
+  `,
+}
diff --git a/src/components/UserDigest/Concise/index.tsx b/src/components/UserDigest/Concise/index.tsx
new file mode 100644
index 0000000000..619951b453
--- /dev/null
+++ b/src/components/UserDigest/Concise/index.tsx
@@ -0,0 +1,102 @@
+import classNames from 'classnames'
+
+import { toPath } from '~/common/utils'
+import { LinkWrapper, Translate } from '~/components'
+import { Avatar, AvatarProps, AvatarSize } from '~/components/Avatar'
+import { UserDigestConciseUserFragment } from '~/gql/graphql'
+
+import { fragments } from './gql'
+import styles from './styles.css'
+
+/**
+ * UserDigest.Concise is a component for presenting user's:
+ *
+ * - avatar
+ * - userName
+ * - displayName
+ *
+ * Usage:
+ *
+ *   <UserDigest.Concise user={user} />
+ */
+
+export type UserDigestConciseProps = {
+  user: UserDigestConciseUserFragment
+  avatarSize?: Extract<AvatarSize, 'lg' | 'xl'>
+  nameStyle?: 'tight' | 'loose'
+
+  disabled?: boolean
+  onClick?: () => void
+} & AvatarProps
+
+export const toUserDigestConcisePlaceholder = (displayName: string) =>
+  ({
+    __typename: 'User',
+    id: '',
+    userName: '',
+    displayName,
+    status: null,
+    avatar: null,
+    liker: {
+      __typename: 'Liker',
+      civicLiker: false,
+    },
+  } as UserDigestConciseUserFragment)
+
+const Concise = ({
+  user,
+  avatarSize,
+  nameStyle = 'loose',
+  disabled,
+
+  onClick,
+}: UserDigestConciseProps) => {
+  const isArchived = user?.status?.state === 'archived'
+  const path = toPath({
+    page: 'userProfile',
+    userName: user.userName || '',
+  })
+  const containerClasses = classNames({
+    container: true,
+    disabled: disabled || isArchived,
+  })
+  const nameClasses = classNames({
+    name: true,
+    [`name-style-${nameStyle}`]: !!nameStyle,
+  })
+
+  if (isArchived) {
+    return (
+      <span className={containerClasses}>
+        <Avatar size={avatarSize} />
+
+        <span className={nameClasses}>
+          <span className="displayname">
+            <Translate id="accountArchived" />
+          </span>
+        </span>
+
+        <style jsx>{styles}</style>
+      </span>
+    )
+  }
+
+  return (
+    <LinkWrapper {...path} disabled={disabled} onClick={onClick}>
+      <section className={containerClasses}>
+        <Avatar size={avatarSize} user={user} />
+
+        <span className={nameClasses}>
+          <span className="displayname">{user.displayName}</span>
+          {user.userName && <span className="username">@{user.userName}</span>}
+        </span>
+
+        <style jsx>{styles}</style>
+      </section>
+    </LinkWrapper>
+  )
+}
+
+Concise.fragments = fragments
+
+export default Concise
diff --git a/src/components/UserDigest/Concise/styles.css b/src/components/UserDigest/Concise/styles.css
new file mode 100644
index 0000000000..1e6264a135
--- /dev/null
+++ b/src/components/UserDigest/Concise/styles.css
@@ -0,0 +1,46 @@
+.container {
+  @mixin flex-center-start;
+}
+
+.name {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: flex-start;
+  margin-left: var(--spacing-x-tight);
+}
+
+.displayname {
+  @mixin line-clamp;
+
+  font-weight: var(--font-weight-medium);
+}
+
+.username {
+  @mixin line-clamp;
+
+  color: var(--color-grey);
+}
+
+.name-style-loose {
+  & .displayname {
+    font-size: var(--font-size-md-s);
+    line-height: 1.5rem;
+  }
+
+  & .username {
+    font-size: var(--font-size-sm-s);
+    line-height: 1.5rem;
+  }
+}
+
+.name-style-tight {
+  & .displayname {
+    font-size: var(--font-size-sm);
+    line-height: 1rem;
+  }
+
+  & .username {
+    font-size: var(--font-size-xs);
+    line-height: 1rem;
+  }
+}
diff --git a/src/components/UserDigest/index.tsx b/src/components/UserDigest/index.tsx
index bb4b147434..470b797c1a 100644
--- a/src/components/UserDigest/index.tsx
+++ b/src/components/UserDigest/index.tsx
@@ -1,9 +1,11 @@
+import Concise from './Concise'
 import Mini from './Mini'
 import Plain from './Plain'
 import Rich from './Rich'
 import Verbose from './Verbose'
 
 export const UserDigest = {
+  Concise,
   Mini,
   Rich,
   Plain,
diff --git a/src/stories/components/TagDigest/Concise.stories.tsx b/src/stories/components/TagDigest/Concise.stories.tsx
new file mode 100644
index 0000000000..2f22e4eda7
--- /dev/null
+++ b/src/stories/components/TagDigest/Concise.stories.tsx
@@ -0,0 +1,24 @@
+import { MockedProvider } from '@apollo/react-testing'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+import { TagDigest } from '~/components'
+
+import { MOCK_TAG } from '../../mocks'
+
+export default {
+  title: 'Components/TagDigest/Concise',
+  component: TagDigest.Concise,
+} as ComponentMeta<typeof TagDigest.Concise>
+
+const Template: ComponentStory<typeof TagDigest.Concise> = (args) => (
+  <MockedProvider>
+    <TagDigest.Concise {...args} />
+  </MockedProvider>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  tag: MOCK_TAG as any,
+  showArticlesNum: true,
+}
diff --git a/src/stories/components/TagDigest/Rich.stories.tsx b/src/stories/components/TagDigest/Rich.stories.tsx
new file mode 100644
index 0000000000..ddeec8bef2
--- /dev/null
+++ b/src/stories/components/TagDigest/Rich.stories.tsx
@@ -0,0 +1,30 @@
+import { MockedProvider } from '@apollo/react-testing'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+import { TagDigest } from '~/components'
+
+import { MOCK_TAG } from '../../mocks'
+
+export default {
+  title: 'Components/TagDigest/Rich',
+  component: TagDigest.Rich,
+} as ComponentMeta<typeof TagDigest.Rich>
+
+const Template: ComponentStory<typeof TagDigest.Rich> = (args) => (
+  <MockedProvider>
+    <TagDigest.Rich {...args} />
+  </MockedProvider>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  tag: MOCK_TAG as any,
+}
+
+export const HasFollow = Template.bind({})
+HasFollow.args = {
+  tag: MOCK_TAG as any,
+  hasDesc: true,
+  hasFollow: true,
+}
diff --git a/src/stories/components/UserDigest/Concise.stories.tsx b/src/stories/components/UserDigest/Concise.stories.tsx
new file mode 100644
index 0000000000..40ad162085
--- /dev/null
+++ b/src/stories/components/UserDigest/Concise.stories.tsx
@@ -0,0 +1,31 @@
+import { MockedProvider } from '@apollo/react-testing'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+import { UserDigest } from '~/components'
+
+import { MOCK_USER } from '../../mocks'
+
+export default {
+  title: 'Components/UserDigest',
+  component: UserDigest.Concise,
+} as ComponentMeta<typeof UserDigest.Concise>
+
+const Template: ComponentStory<typeof UserDigest.Concise> = (args) => (
+  <MockedProvider>
+    <UserDigest.Concise {...args} />
+  </MockedProvider>
+)
+
+export const Concise = Template.bind({})
+Concise.args = {
+  user: MOCK_USER,
+  avatarSize: 'xl',
+}
+
+export const ConciseTight = Template.bind({})
+ConciseTight.args = {
+  user: MOCK_USER,
+  avatarSize: 'lg',
+  nameStyle: 'tight',
+}
diff --git a/src/stories/mocks/index.ts b/src/stories/mocks/index.ts
index ace48b1e61..66bf6adb2c 100644
--- a/src/stories/mocks/index.ts
+++ b/src/stories/mocks/index.ts
@@ -167,6 +167,8 @@ export const MOCK_TAG = {
   editors: [MOCK_USER],
   owner: MOCK_USER,
   content: '香港',
+  description:
+    '香港（英語：Hong Kong；縮寫：HK／HKG），全稱香港特別行政區（英語：Hong Kong Special Administrative Region；縮寫：HKSAR），簡稱「港」，雅稱「香江」',
   articles: {
     __typename: 'ArticleConnection' as any,
     totalCount: 8,
diff --git a/src/views/ArticleDetail/EditMode/Header/gql.ts b/src/views/ArticleDetail/EditMode/Header/gql.ts
index d3cd940516..6bc5a039fc 100644
--- a/src/views/ArticleDetail/EditMode/Header/gql.ts
+++ b/src/views/ArticleDetail/EditMode/Header/gql.ts
@@ -25,6 +25,7 @@ export const EDIT_ARTICLE = gql`
     $first: first_Int_min_0 = null
     $requestForDonation: requestForDonation_String_maxLength_140
     $replyToDonator: replyToDonator_String_maxLength_140
+    $canComment: Boolean
   ) {
     editArticle(
       input: {
@@ -39,6 +40,7 @@ export const EDIT_ARTICLE = gql`
         iscnPublish: $iscnPublish
         requestForDonation: $requestForDonation
         replyToDonator: $replyToDonator
+        canComment: $canComment
       }
     ) {
       id
@@ -49,6 +51,7 @@ export const EDIT_ARTICLE = gql`
       access {
         type
       }
+      canComment
       license
       requestForDonation
       replyToDonator
diff --git a/src/views/ArticleDetail/EditMode/Header/index.tsx b/src/views/ArticleDetail/EditMode/Header/index.tsx
index b5b2b504ac..eecf73b965 100644
--- a/src/views/ArticleDetail/EditMode/Header/index.tsx
+++ b/src/views/ArticleDetail/EditMode/Header/index.tsx
@@ -72,6 +72,7 @@ const EditModeHeader = ({
           ...(isContentRevised ? { content } : {}),
           first: null,
           iscnPublish: restProps.iscnPublish,
+          canComment: restProps.canComment,
         },
       })
 
diff --git a/src/views/ArticleDetail/EditMode/index.tsx b/src/views/ArticleDetail/EditMode/index.tsx
index a6c56b0c01..47c242a81c 100644
--- a/src/views/ArticleDetail/EditMode/index.tsx
+++ b/src/views/ArticleDetail/EditMode/index.tsx
@@ -15,6 +15,7 @@ import {
 import {
   SetCollectionProps,
   SetCoverProps,
+  SetResponseProps,
   SetTagsProps,
   ToggleAccessProps,
 } from '~/components/Editor'
@@ -161,6 +162,8 @@ const EditMode: React.FC<EditModeProps> = ({ article, onCancel, onSaved }) => {
 
   const [iscnPublish, setIscnPublish] = useState<boolean>(false) // always start false
 
+  const [canComment, setCanComment] = useState<boolean>(article.canComment)
+
   /**
    * Render
    */
@@ -218,6 +221,12 @@ const EditMode: React.FC<EditModeProps> = ({ article, onCancel, onSaved }) => {
     editCollection: async (c: ArticleDigestDropdownArticleFragment[]) =>
       editCollection(c),
   }
+
+  const setCommentProps: SetResponseProps = {
+    canComment,
+    toggleComment: setCanComment,
+  }
+
   const accessProps: ToggleAccessProps = {
     circle,
     accessType,
@@ -248,6 +257,11 @@ const EditMode: React.FC<EditModeProps> = ({ article, onCancel, onSaved }) => {
                 <Sidebar.Tags {...tagsProps} />
                 <Sidebar.Cover {...coverProps} />
                 <Sidebar.Collection {...collectionProps} />
+                <Sidebar.Response
+                  inSidebar
+                  disableChangeCanComment={article.canComment}
+                  {...setCommentProps}
+                />
 
                 <SupportSettingDialog
                   article={article}
@@ -281,6 +295,7 @@ const EditMode: React.FC<EditModeProps> = ({ article, onCancel, onSaved }) => {
                   {...tagsProps}
                   {...collectionProps}
                   {...accessProps}
+                  {...setCommentProps}
                   article={article}
                   editData={editData}
                   coverId={cover?.id}
@@ -325,6 +340,7 @@ const EditMode: React.FC<EditModeProps> = ({ article, onCancel, onSaved }) => {
                     {...tagsProps}
                     {...collectionProps}
                     {...accessProps}
+                    {...setCommentProps}
                     onOpenSupportSetting={openDialog}
                   />
                 )}
diff --git a/src/views/ArticleDetail/Responses/index.tsx b/src/views/ArticleDetail/Responses/index.tsx
index 2d4a23981e..80dd10a92d 100644
--- a/src/views/ArticleDetail/Responses/index.tsx
+++ b/src/views/ArticleDetail/Responses/index.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 
-import { Title, Translate } from '~/components'
+import { IconDisableComment24, TextIcon, Title, Translate } from '~/components'
 import {
   ArticleResponseQuery,
   ResponseCountArticleFragment,
@@ -10,6 +10,7 @@ import {
 import FeatureComments from './FeaturedComments'
 import LatestResponses from './LatestResponses'
 import ResponseCount from './ResponseCount'
+import styles from './styles.css'
 
 const ARTICLE_RESPONSE = gql`
   query ArticleResponse(
@@ -18,6 +19,7 @@ const ARTICLE_RESPONSE = gql`
     article: node(input: { id: $id }) {
       ... on Article {
         id
+        canComment
         author {
           id
           isBlocking
@@ -40,6 +42,27 @@ const Responses = ({ id, lock }: { id: string; lock: boolean }) => {
 
   const { article } = data
 
+  const canComment = article.__typename === 'Article' && article.canComment
+  if (!canComment) {
+    return (
+      <section className="disable-response">
+        <TextIcon
+          icon={<IconDisableComment24 size="md" />}
+          color="grey"
+          size="sm-s"
+          allowUserSelect
+        >
+          <Translate
+            zh_hans="作者已关闭所有回应"
+            zh_hant="作者已關閉所有回應"
+            en="The author has turned off all responses"
+          />
+        </TextIcon>
+        <style jsx>{styles}</style>
+      </section>
+    )
+  }
+
   return (
     <section className="responses">
       <header>
diff --git a/src/views/ArticleDetail/Responses/styles.css b/src/views/ArticleDetail/Responses/styles.css
index 532512de5c..2fad3b2899 100644
--- a/src/views/ArticleDetail/Responses/styles.css
+++ b/src/views/ArticleDetail/Responses/styles.css
@@ -23,3 +23,9 @@
     margin-left: var(--spacing-x-tight);
   }
 }
+
+.disable-response {
+  @mixin flex-center-all;
+
+  padding-top: var(--spacing-tight);
+}
diff --git a/src/views/ArticleDetail/SupportWidget/Donators/index.tsx b/src/views/ArticleDetail/SupportWidget/Donators/index.tsx
index f8c1eedf2c..f71ae996a6 100644
--- a/src/views/ArticleDetail/SupportWidget/Donators/index.tsx
+++ b/src/views/ArticleDetail/SupportWidget/Donators/index.tsx
@@ -98,19 +98,17 @@ const Donators = ({ article, showAvatarAnimation = false }: DonatorsProps) => {
                   {donatorsCount - (maxAvatarNum - 1)}
                 </span>
               )}
+
+              {donatorsCount === 1 && (
+                <span className="donator-name">
+                  <UserDigest.Plain user={donators[0]} hasUnderline />
+                </span>
+              )}
             </section>
           </button>
           <section className="avatar-list-footer">
             {donatorsCount === 1 && (
-              <section className="footer">
-                <span className="donator-name">
-                  <UserDigest.Plain
-                    user={donators[0]}
-                    hasUnderline
-                    displayNameLimit={7}
-                  />
-                </span>
-
+              <section>
                 <span>
                   <Translate id="theFirstSupporter" />
                 </span>
diff --git a/src/views/ArticleDetail/SupportWidget/Donators/styles.css b/src/views/ArticleDetail/SupportWidget/Donators/styles.css
index 93266f9614..0bcd997a9c 100644
--- a/src/views/ArticleDetail/SupportWidget/Donators/styles.css
+++ b/src/views/ArticleDetail/SupportWidget/Donators/styles.css
@@ -54,6 +54,14 @@
     background: var(--color-matters-gold);
     border-radius: 50%;
   }
+
+  & .donator-name {
+    margin-left: var(--spacing-x-tight);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.25rem;
+    color: var(--color-black);
+  }
 }
 
 .avatar-list-footer {
@@ -67,15 +75,4 @@
     font-weight: var(--font-weight-bold);
     color: var(--color-black);
   }
-
-  & .footer {
-    @mixin flex-center-start;
-  }
-
-  & .donator-name {
-    margin-right: var(--spacing-xx-tight);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-black);
-  }
 }
diff --git a/src/views/ArticleDetail/Toolbar/CommentBar/index.tsx b/src/views/ArticleDetail/Toolbar/CommentBar/index.tsx
index cfa86baf57..1f6a47bf10 100644
--- a/src/views/ArticleDetail/Toolbar/CommentBar/index.tsx
+++ b/src/views/ArticleDetail/Toolbar/CommentBar/index.tsx
@@ -45,6 +45,7 @@ const fragments = {
       fragment CommentBarArticlePublic on Article {
         id
         responseCount
+        canComment
       }
     `,
     private: gql`
diff --git a/src/views/ArticleDetail/Toolbar/index.tsx b/src/views/ArticleDetail/Toolbar/index.tsx
index 87cfde9e44..3287c5b172 100644
--- a/src/views/ArticleDetail/Toolbar/index.tsx
+++ b/src/views/ArticleDetail/Toolbar/index.tsx
@@ -105,7 +105,10 @@ const Toolbar = ({
         />
 
         <section className="comment-bar">
-          <CommentBar article={article} disabled={lock} />
+          <CommentBar
+            article={article}
+            disabled={lock || !article.canComment}
+          />
         </section>
 
         <BookmarkButton article={article} size="md-s" inCard={false} />
diff --git a/src/views/ArticleDetail/gql.ts b/src/views/ArticleDetail/gql.ts
index 9b7c71174e..e65fd56bdb 100644
--- a/src/views/ArticleDetail/gql.ts
+++ b/src/views/ArticleDetail/gql.ts
@@ -41,6 +41,7 @@ const articlePublicFragment = gql`
         ...CircleWallCirclePrivate
       }
     }
+    canComment
     license
     requestForDonation
     replyToDonator
diff --git a/src/views/Circle/Analytics/ContentAnalytics/ContentDigest/index.tsx b/src/views/Circle/Analytics/ContentAnalytics/ContentDigest/index.tsx
index eb85c37b10..574566a7ee 100644
--- a/src/views/Circle/Analytics/ContentAnalytics/ContentDigest/index.tsx
+++ b/src/views/Circle/Analytics/ContentAnalytics/ContentDigest/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { toPath } from '~/common/utils'
 import {
@@ -8,7 +9,6 @@ import {
   LinkWrapper,
   TextIcon,
   Tooltip,
-  Translate,
 } from '~/components'
 import { CircleContentAnalyticsArticleFragment } from '~/gql/graphql'
 
@@ -23,7 +23,10 @@ interface CircleAnalyticsContentProps {
 
 const Count = ({ count }: { count: number }) => {
   return (
-    <Tooltip content={<Translate id="readCount" />} trigger="click">
+    <Tooltip
+      content={<FormattedMessage defaultMessage="Read Counts" description="" />}
+      trigger="click"
+    >
       <button type="button" className="count">
         <TextIcon icon={<IconRead16 />} size="xs" color="grey-dark">
           {count}
diff --git a/src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx b/src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx
index 5fffa313eb..bd4b81d092 100644
--- a/src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx
+++ b/src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx
@@ -1,4 +1,6 @@
-import { Help, Tabs, Translate } from '~/components'
+import { FormattedMessage } from 'react-intl'
+
+import { Help, Tabs } from '~/components'
 
 export type CircleContentAnalyticsType = 'public' | 'paywall'
 
@@ -14,11 +16,17 @@ const ContentTabs: React.FC<Props> = ({ type, setType }) => {
   return (
     <Tabs side={<Help hasCount />}>
       <Tabs.Tab onClick={() => setType('paywall')} selected={isPaywall}>
-        <Translate zh_hant="上鎖" zh_hans="上锁" en="Paywalled" />
+        <FormattedMessage
+          defaultMessage="Paywalled"
+          description="src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+        />
       </Tabs.Tab>
 
       <Tabs.Tab onClick={() => setType('public')} selected={isPublic}>
-        <Translate zh_hant="公開" zh_hans="公开" en="Public" />
+        <FormattedMessage
+          defaultMessage="Public"
+          description="src/views/Circle/Analytics/ContentAnalytics/ContentTabs/index.tsx"
+        />
       </Tabs.Tab>
     </Tabs>
   )
diff --git a/src/views/Circle/Analytics/ContentAnalytics/index.tsx b/src/views/Circle/Analytics/ContentAnalytics/index.tsx
index 383558d236..559c6f098b 100644
--- a/src/views/Circle/Analytics/ContentAnalytics/index.tsx
+++ b/src/views/Circle/Analytics/ContentAnalytics/index.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from '@apollo/react-hooks'
 import _get from 'lodash/get'
 import { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconAnalyticsContent24 } from '@/public/static/icons/24px/analytics-content.svg'
 import {
@@ -8,7 +9,6 @@ import {
   List,
   QueryError,
   Spinner,
-  Translate,
   useRoute,
 } from '~/components'
 import {
@@ -95,10 +95,9 @@ const CircleContentAnalytics = () => {
       <SectionHead
         icon={IconAnalyticsContent24}
         title={
-          <Translate
-            zh_hant="站內閱讀熱門排行"
-            zh_hans="站内阅读热门排行"
-            en="Hottest"
+          <FormattedMessage
+            defaultMessage="Hottest"
+            description="src/views/Circle/Analytics/ContentAnalytics/index.tsx"
           />
         }
       />
diff --git a/src/views/Circle/Analytics/FollowerAnalytics/index.tsx b/src/views/Circle/Analytics/FollowerAnalytics/index.tsx
index 21dd594b2f..dc0b28f6eb 100644
--- a/src/views/Circle/Analytics/FollowerAnalytics/index.tsx
+++ b/src/views/Circle/Analytics/FollowerAnalytics/index.tsx
@@ -1,16 +1,10 @@
 import { useQuery } from '@apollo/react-hooks'
 import _get from 'lodash/get'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 import { ReactComponent as IconAnalyticsFollower24 } from '@/public/static/icons/24px/analytics-follower.svg'
 import { CHART_COLOR } from '~/common/enums'
-import { translate } from '~/common/utils'
-import {
-  QueryError,
-  Spinner,
-  StackedAreaChart,
-  Translate,
-  useRoute,
-} from '~/components'
+import { QueryError, Spinner, StackedAreaChart, useRoute } from '~/components'
 import { CircleFollowerAnalyticsQuery } from '~/gql/graphql'
 
 import InfoTiles from '../InfoTiles'
@@ -22,6 +16,8 @@ const Content = () => {
   const { getQuery } = useRoute()
   const name = getQuery('name')
 
+  const intl = useIntl()
+
   const { data, error, loading } = useQuery<CircleFollowerAnalyticsQuery>(
     CIRCLE_FOLLOWER_ANALYTICS,
     {
@@ -61,35 +57,46 @@ const Content = () => {
         <InfoTiles.Group primary>
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="目前總追蹤人數"
-                zh_hans="目前总追踪人数"
-                en=""
+              <FormattedMessage
+                defaultMessage="followers_empty
+              "
+                description="src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
               />
             }
             value={follower.current}
-            unit={<Translate zh_hant="人" zh_hans="人" en="followers" />}
+            unit={
+              <FormattedMessage
+                defaultMessage={`{follower, plural, =1 {follower} other {followers}}`}
+                description="src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+                values={{
+                  follower: follower.current,
+                }}
+              />
+            }
           />
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="本月新增追蹤人數"
-                zh_hans="本月新增追踪人数"
-                en="New Followers This Month"
+              <FormattedMessage
+                defaultMessage="New Followers This Month"
+                description="src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
               />
             }
             value={newFollowersThisMonth}
-            unit={<Translate zh_hant="人" zh_hans="人" en="" />}
+            unit={
+              <FormattedMessage
+                defaultMessage="followers"
+                description="src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+              />
+            }
             percentageChange={percentageChangeThisMonth}
           />
         </InfoTiles.Group>
         <InfoTiles.Group>
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="已追蹤用戶佔總觀看人數比例"
-                zh_hans="已追踪用户占总观看人数比例"
-                en="Conversion Rate of Followers"
+              <FormattedMessage
+                defaultMessage="Conversion Rate of Followers"
+                description="src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
               />
             }
             value={`${follower.followerPercentage}%`}
@@ -112,10 +119,10 @@ const Content = () => {
                 <StackedAreaChart.Tooltip
                   {...props}
                   formatter={(datum: any) =>
-                    `<span>&nbsp;${datum.value}${translate({
-                      zh_hant: ' 人',
-                      zh_hans: ' 人',
-                      en: '',
+                    `<span>&nbsp;${datum.value}${intl.formatMessage({
+                      defaultMessage: 'followers',
+                      description:
+                        'src/views/Circle/Analytics/FollowerAnalytics/index.tsx',
                     })}&nbsp;</span>`
                   }
                 />
@@ -135,7 +142,12 @@ const FollowerAnalytics = () => {
     <section className="container">
       <SectionHead
         icon={IconAnalyticsFollower24}
-        title={<Translate zh_hant="追蹤" zh_hans="追踪" en="Followers" />}
+        title={
+          <FormattedMessage
+            description="src/views/Circle/Analytics/FollowerAnalytics/index.tsx"
+            defaultMessage="Followers"
+          />
+        }
       />
 
       <Content />
diff --git a/src/views/Circle/Analytics/IncomeAnalytics/index.tsx b/src/views/Circle/Analytics/IncomeAnalytics/index.tsx
index 1727296f04..41ed75ea6a 100644
--- a/src/views/Circle/Analytics/IncomeAnalytics/index.tsx
+++ b/src/views/Circle/Analytics/IncomeAnalytics/index.tsx
@@ -1,16 +1,11 @@
 import { useQuery } from '@apollo/react-hooks'
 import _get from 'lodash/get'
+import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconAnalyticsIncome24 } from '@/public/static/icons/24px/analytics-income.svg'
 import { CHART_COLOR } from '~/common/enums'
 import { formatAmount } from '~/common/utils'
-import {
-  QueryError,
-  Spinner,
-  StackedAreaChart,
-  Translate,
-  useRoute,
-} from '~/components'
+import { QueryError, Spinner, StackedAreaChart, useRoute } from '~/components'
 import { CircleIncomeAnalyticsQuery } from '~/gql/graphql'
 
 import InfoTiles from '../InfoTiles'
@@ -67,10 +62,9 @@ const Content = () => {
         <InfoTiles.Group primary>
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="本月營收"
-                zh_hans="本月营收"
-                en="This Month"
+              <FormattedMessage
+                defaultMessage="This Month"
+                description="src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
               />
             }
             value={formatAmount(income.thisMonth, 0)}
@@ -79,10 +73,9 @@ const Content = () => {
           />
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="下月預期營收"
-                zh_hans="下月预期营收"
-                en="Next Month (Estimation)"
+              <FormattedMessage
+                defaultMessage="Next Month (Estimation)"
+                description="src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
               />
             }
             value={formatAmount(income.nextMonth, 0)}
@@ -93,7 +86,10 @@ const Content = () => {
         <InfoTiles.Group>
           <InfoTiles.Tile
             title={
-              <Translate zh_hant="目前總營收" zh_hans="目前总营收" en="Total" />
+              <FormattedMessage
+                defaultMessage="Total"
+                description="src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+              />
             }
             value={formatAmount(income.total, 0)}
             unit="HKD"
@@ -135,7 +131,12 @@ const IncomeAnalytics = () => {
     <section className="container">
       <SectionHead
         icon={IconAnalyticsIncome24}
-        title={<Translate zh_hant="營收" zh_hans="营收" en="Income" />}
+        title={
+          <FormattedMessage
+            defaultMessage="Income"
+            description="src/views/Circle/Analytics/IncomeAnalytics/index.tsx"
+          />
+        }
       />
 
       <Content />
diff --git a/src/views/Circle/Analytics/SubscriberAnalytics/index.tsx b/src/views/Circle/Analytics/SubscriberAnalytics/index.tsx
index c7cace3491..948a31f323 100644
--- a/src/views/Circle/Analytics/SubscriberAnalytics/index.tsx
+++ b/src/views/Circle/Analytics/SubscriberAnalytics/index.tsx
@@ -1,17 +1,16 @@
 import { useQuery } from '@apollo/react-hooks'
 import { sum as d3Sum } from 'd3-array'
 import _get from 'lodash/get'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 import { ReactComponent as IconAnalyticsSubscriber24 } from '@/public/static/icons/24px/analytics-subscriber.svg'
 import { CHART_COLOR } from '~/common/enums'
-import { translate } from '~/common/utils'
 import {
   Button,
   QueryError,
   Spinner,
   StackedAreaChart,
   TextIcon,
-  Translate,
   useRoute,
 } from '~/components'
 import { CircleSubscriberAnalyticsQuery } from '~/gql/graphql'
@@ -32,6 +31,7 @@ const Content = () => {
   const { getQuery } = useRoute()
   const name = getQuery('name')
 
+  const intl = useIntl()
   const { data, error, loading } = useQuery<CircleSubscriberAnalyticsQuery>(
     CIRCLE_SUBSCRIBER_ANALYTICS,
     {
@@ -83,23 +83,23 @@ const Content = () => {
     return [
       `<span class="subscriber-tooltip-item">
         <span class="indicator rect" style="color: #EDEDED"></span>
-        ${translate({
-          zh_hant: '總數',
-          zh_hans: '总数',
-          en: 'Total',
+        ${intl.formatMessage({
+          defaultMessage: 'Total',
+          description:
+            'src/views/Circle/Analytics/SubscriberAnalytics/index.tsx',
         })}: ${d3Sum(Object.values(values))}
       </span>`,
       ...[DatumKey.subscriber, DatumKey.invitee].map((key) => {
         const keyName = {
-          [DatumKey.subscriber]: translate({
-            zh_hant: '付費',
-            zh_hans: '付费',
-            en: 'Subscribers',
+          [DatumKey.subscriber]: intl.formatMessage({
+            defaultMessage: 'Pay',
+            description:
+              'src/views/Circle/Analytics/SubscriberAnalytics/index.tsx',
           }),
-          [DatumKey.invitee]: translate({
-            zh_hant: '免費',
-            zh_hans: '免费',
-            en: ' Invitees',
+          [DatumKey.invitee]: intl.formatMessage({
+            defaultMessage: 'Free',
+            description:
+              'src/views/Circle/Analytics/SubscriberAnalytics/index.tsx',
           }),
         }[key]
         return `
@@ -117,35 +117,56 @@ const Content = () => {
         <InfoTiles.Group primary>
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="目前總訂閱人數"
-                zh_hans="目前总订阅人数"
-                en=""
+              <FormattedMessage
+                defaultMessage="subscribers_empty"
+                description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
               />
             }
             value={subscriber.currentSubscriber + subscriber.currentInvitee}
-            unit={<Translate zh_hant="人" zh_hans="人" en="subscribers" />}
+            unit={
+              // <Translate zh_hant="人" zh_hans="人" en="subscribers" />
+              <FormattedMessage
+                defaultMessage={`{subscriber, plural, =1 {subscriber} other {subscribers}}`}
+                description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+                values={{
+                  subscriber:
+                    subscriber.currentSubscriber + subscriber.currentInvitee,
+                }}
+              />
+            }
           />
         </InfoTiles.Group>
         <InfoTiles.Group>
           <InfoTiles.Tile
             title={
-              <Translate
-                zh_hant="付費人數"
-                zh_hans="付费人数"
-                en="Subscribers"
+              <FormattedMessage
+                defaultMessage="Subscribers"
+                description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
               />
             }
             value={subscriber.currentSubscriber}
-            unit={<Translate zh_hant="人" zh_hans="人" en="" />}
+            unit={
+              <FormattedMessage
+                defaultMessage="subscribers"
+                description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+              />
+            }
             indicatorColor={colors[DatumKey.subscriber].line}
           />
           <InfoTiles.Tile
             title={
-              <Translate zh_hant="免費邀請" zh_hans="免费邀请" en="Invitees" />
+              <FormattedMessage
+                defaultMessage="Invitees"
+                description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+              />
             }
             value={subscriber.currentInvitee}
-            unit={<Translate zh_hant="人" zh_hans="人" en="" />}
+            unit={
+              <FormattedMessage
+                defaultMessage="subscribers"
+                description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+              />
+            }
             indicatorColor={colors[DatumKey.invitee].line}
           />
         </InfoTiles.Group>
@@ -178,7 +199,12 @@ const SubscriberAnalytics = () => {
     <section className="container">
       <SectionHead
         icon={IconAnalyticsSubscriber24}
-        title={<Translate zh_hant="訂閱" zh_hans="订阅" en="Subscribers" />}
+        title={
+          <FormattedMessage
+            defaultMessage="Subscribe"
+            description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
+          />
+        }
       >
         <MembersDialog>
           {({ openDialog: openMembersDialog }) => (
@@ -190,10 +216,9 @@ const SubscriberAnalytics = () => {
               aria-haspopup="dialog"
             >
               <TextIcon color="grey-darker" size="xs">
-                <Translate
-                  zh_hant="查看名單"
-                  zh_hans="查看名单"
-                  en="View Members"
+                <FormattedMessage
+                  defaultMessage="View Members"
+                  description="src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
                 />
               </TextIcon>
             </Button>
diff --git a/src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx b/src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx
index ab8fc206e3..f4c168dd96 100644
--- a/src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx
@@ -1,4 +1,6 @@
-import { Button, TextIcon, Translate } from '~/components'
+import { FormattedMessage } from 'react-intl'
+
+import { Button, TextIcon } from '~/components'
 
 import AddInvitationDialog from '../AddInvitationDialog'
 
@@ -22,7 +24,10 @@ const CircleInvitationAddButton = () => {
           aria-haspopup="dialog"
         >
           <TextIcon color="green" size="md" weight="md">
-            <Translate id="addCircleInvitation" />
+            <FormattedMessage
+              defaultMessage="Add Invitation"
+              description="src/views/Circle/Settings/ManageInvitation/AddButton/index.tsx"
+            />
           </TextIcon>
         </Button>
       )}
diff --git a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx
index a3841649f9..7e4b7ddfc4 100644
--- a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { REFETCH_CIRCLE_PENDING_INVITES } from '~/common/enums'
 import {
@@ -9,7 +10,6 @@ import {
   QueryError,
   Spinner,
   Throw404,
-  Translate,
   useMutation,
   UserDigest,
   useRoute,
@@ -101,10 +101,9 @@ const BaseInviteePreSend = ({ closeDialog, confirm, invitees }: Props) => {
     <>
       <Dialog.Message align="left">
         <p>
-          <Translate
-            zh_hant="用戶將收到你的圍爐免費資格邀請函，設置免費的時限，邀請他們一起加入吧！"
-            zh_hans="用户将收到你的围炉免费资格邀请函，设置免费的时限，邀请他们一起加入吧！"
-            en="Friends will receive free trial invitations to Circle. Set up your invitations now!"
+          <FormattedMessage
+            defaultMessage="Friends will receive free trial invitations to Circle. Set up your invitations now!"
+            description="src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
           />
         </p>
       </Dialog.Message>
@@ -135,11 +134,7 @@ const BaseInviteePreSend = ({ closeDialog, confirm, invitees }: Props) => {
 
       <Dialog.Footer>
         <Dialog.Footer.Button onClick={() => send()} loading={inviteLoading}>
-          <Translate
-            zh_hant="確認發送"
-            zh_hans="确认发送"
-            en="Confirm and Send"
-          />
+          <FormattedMessage defaultMessage="Confirm and Send" description="" />
         </Dialog.Footer.Button>
 
         <Dialog.Footer.Button
@@ -147,7 +142,10 @@ const BaseInviteePreSend = ({ closeDialog, confirm, invitees }: Props) => {
           textColor="black"
           onClick={closeDialog}
         >
-          <Translate zh_hant="暫時不要" zh_hans="暂时不要" en="Not Now" />
+          <FormattedMessage
+            defaultMessage="Not Now"
+            description="src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+          />
         </Dialog.Footer.Button>
       </Dialog.Footer>
     </>
@@ -166,7 +164,12 @@ const BaseInviteePreSend = ({ closeDialog, confirm, invitees }: Props) => {
 const InviteePreSend = (props: Props) => (
   <>
     <Dialog.Header
-      title={<Translate zh_hant="寄出邀請" zh_hans="寄出邀请" en="Send" />}
+      title={
+        <FormattedMessage
+          defaultMessage="Send"
+          description="src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
+        />
+      }
       closeDialog={props.closeDialog}
       closeTextId="cancel"
     />
diff --git a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Search.tsx b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Search.tsx
index 2181c528fc..4a04677bb3 100644
--- a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Search.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Search.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
-import { Dialog, Translate } from '~/components'
+import { Dialog } from '~/components'
 import SearchingArea, {
   SelectNode,
 } from '~/components/SearchSelect/SearchingArea'
@@ -54,7 +55,7 @@ const InviteeSearchEditor = ({ closeDialog, save }: Props) => {
           <Dialog.Header.RightButton
             disabled={disabled}
             onClick={() => save({ nodes: selectedNodes })}
-            text={<Translate id="confirm" />}
+            text={<FormattedMessage defaultMessage="Confirm" description="" />}
           />
         }
       />
diff --git a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/SelectPeriod/index.tsx b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/SelectPeriod/index.tsx
index a55ae44771..f786ded92f 100644
--- a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/SelectPeriod/index.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/SelectPeriod/index.tsx
@@ -1,4 +1,6 @@
-import { Form, Translate } from '~/components'
+import { FormattedMessage } from 'react-intl'
+
+import { Form } from '~/components'
 
 interface Props {
   period: number
@@ -12,17 +14,14 @@ const SelectPeriod = ({ period, onChange }: Props) => {
     <Form.Select
       name="select-period"
       label={
-        <Translate
-          zh_hant="免費資格時長"
-          zh_hans="免费资格时长"
-          en="Free trial period"
-        />
+        <FormattedMessage defaultMessage="Free trial period" description="" />
       }
       onChange={(option) => onChange(option.value)}
       options={options.map((value) => ({
         name: (
           <>
-            {value} <Translate id="days" />
+            {value}
+            <FormattedMessage defaultMessage="days" description="" />
           </>
         ),
         value,
diff --git a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx
index fc8bfb0c4d..099f1a1559 100644
--- a/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx
@@ -1,14 +1,15 @@
-import { Dialog, Translate } from '~/components'
+import { FormattedMessage } from 'react-intl'
+
+import { Dialog } from '~/components'
 
 interface Props {
   closeDialog: () => void
 }
 
 const InvitationSentTitle = (
-  <Translate
-    zh_hant="成功發送邀請"
-    zh_hans="成功发送邀请"
-    en="Invitation Sent"
+  <FormattedMessage
+    defaultMessage="Invitation Sent"
+    description="src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
   />
 )
 
@@ -33,10 +34,9 @@ const InvitationSent = ({ closeDialog }: Props) => (
     <Dialog.Message>
       <h3>{InvitationSentTitle}</h3>
       <p>
-        <Translate
-          zh_hant="你已寄出邀請給朋友們快去已邀請管理查看他們加入的進度吧！"
-          zh_hans="你已寄出邀请给朋友们快去已邀请管理查看他们加入的进度吧！"
-          en="Invitations have been sent. You can check invitation status on the invitation management page."
+        <FormattedMessage
+          defaultMessage="Invitations have been sent. You can check invitation status on the invitation management page."
+          description="src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/Sent.tsx"
         />
       </p>
     </Dialog.Message>
@@ -47,7 +47,7 @@ const InvitationSent = ({ closeDialog }: Props) => (
         textColor="black"
         onClick={closeDialog}
       >
-        <Translate id="understood" />
+        <FormattedMessage defaultMessage="I see" description="" />
       </Dialog.Footer.Button>
     </Dialog.Footer>
   </>
diff --git a/src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx b/src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx
index c0fed199f1..189addcd53 100644
--- a/src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import { useContext } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { mergeConnections } from '~/common/utils'
 import {
@@ -10,7 +11,6 @@ import {
   QueryError,
   Spinner,
   Throw404,
-  Translate,
   useRoute,
   ViewerContext,
 } from '~/components'
@@ -79,10 +79,9 @@ const AcceptedInvites = () => {
     return (
       <EmptyWarning
         description={
-          <Translate
-            zh_hant="還沒有任何用戶回覆你的邀請喔！"
-            zh_hans="还没有任何用户回覆你的邀请喔！"
-            en="friends have not accepted your inivtations."
+          <FormattedMessage
+            defaultMessage="friends have not accepted your invitations."
+            description="src/views/Circle/Settings/ManageInvitation/Invites/Accepted/index.tsx"
           />
         }
       />
diff --git a/src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx b/src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx
index 63f83de7f4..54783bccf8 100644
--- a/src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import { useContext } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { REFETCH_CIRCLE_PENDING_INVITES } from '~/common/enums'
 import { mergeConnections } from '~/common/utils'
@@ -11,7 +12,6 @@ import {
   QueryError,
   Spinner,
   Throw404,
-  Translate,
   useEventListener,
   useRoute,
   ViewerContext,
@@ -83,10 +83,9 @@ const PendingInvites = () => {
     return (
       <EmptyWarning
         description={
-          <Translate
-            zh_hant="你還沒有邀請任何用戶喔！點擊新增邀請，添加站內或站外朋友加入圍爐贈與對方免費資格的固定時長"
-            zh_hans="你还没有邀请任何用户喔！点击新增邀请，添加站内或站外朋友加入围炉赠与对方免费资格的固定时长"
-            en='You have not invited anyone yet! Invite friends to join your circle by clicking "invite friends".'
+          <FormattedMessage
+            defaultMessage="You have not invited anyone yet! Invite friends to join your circle by clicking 'invite friends'."
+            description="src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx"
           />
         }
       />
diff --git a/src/views/Circle/Settings/ManageInvitation/Invites/index.tsx b/src/views/Circle/Settings/ManageInvitation/Invites/index.tsx
index e0fe715ab4..d40bdb24ac 100644
--- a/src/views/Circle/Settings/ManageInvitation/Invites/index.tsx
+++ b/src/views/Circle/Settings/ManageInvitation/Invites/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
-import { Spacer, Tabs, Translate } from '~/components'
+import { Spacer, Tabs } from '~/components'
 
 import AcceptedInvites from './Accepted'
 import PendingInvites from './Pending'
@@ -19,11 +20,17 @@ const InvitesFeed: React.FC = () => {
 
       <Tabs sticky>
         <Tabs.Tab onClick={() => setType('pending')} selected={isPending}>
-          <Translate zh_hant="邀請中" zh_hans="邀请中" en="Pending" />
+          <FormattedMessage
+            defaultMessage="Pending"
+            description="src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+          />
         </Tabs.Tab>
 
         <Tabs.Tab onClick={() => setType('accepted')} selected={isAccepted}>
-          <Translate zh_hant="已接受" zh_hans="已接受" en="Accepted" />
+          <FormattedMessage
+            defaultMessage="Accepted"
+            description="src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"
+          />
         </Tabs.Tab>
       </Tabs>
 
diff --git a/src/views/Circle/Settings/index.tsx b/src/views/Circle/Settings/index.tsx
index 4f0247561e..a2fa025595 100644
--- a/src/views/Circle/Settings/index.tsx
+++ b/src/views/Circle/Settings/index.tsx
@@ -1,5 +1,7 @@
+import { FormattedMessage } from 'react-intl'
+
 import { toPath } from '~/common/utils'
-import { Form, Head, Layout, Spacer, Translate, useRoute } from '~/components'
+import { Form, Head, Layout, Spacer, useRoute } from '~/components'
 
 const Settings = () => {
   const { getQuery } = useRoute()
@@ -14,9 +16,18 @@ const Settings = () => {
 
       <Head title={{ id: 'manageCircle' }} />
 
-      <Form.List groupName={<Translate id="settings" />}>
+      <Form.List
+        groupName={
+          <FormattedMessage defaultMessage="Settings" description="" />
+        }
+      >
         <Form.List.Item
-          title={<Translate id="basicProfile" />}
+          title={
+            <FormattedMessage
+              defaultMessage="Profile"
+              description="src/views/Circle/Settings/index.tsx"
+            />
+          }
           {...toPath({ page: 'circleEditProfile', circle: { name } })}
           role="link"
         />
@@ -24,11 +35,19 @@ const Settings = () => {
 
       <Form.List
         groupName={
-          <Translate zh_hant="免費資格" zh_hans="免费资格" en="Free Trial" />
+          <FormattedMessage
+            defaultMessage="Free Trial"
+            description="src/views/Circle/Settings/index.tsx"
+          />
         }
       >
         <Form.List.Item
-          title={<Translate id="manageCircleInvitation" />}
+          title={
+            <FormattedMessage
+              defaultMessage="Manage Invitation"
+              description="src/views/Circle/Settings/index.tsx"
+            />
+          }
           {...toPath({ page: 'circleManageInvitation', circle: { name } })}
           role="link"
         />
diff --git a/src/views/Follow/Feed/FollowingFeedComment/index.tsx b/src/views/Follow/Feed/FollowingFeedComment/index.tsx
index 0c2b08c942..7c6579d626 100644
--- a/src/views/Follow/Feed/FollowingFeedComment/index.tsx
+++ b/src/views/Follow/Feed/FollowingFeedComment/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Comment, DateTime, Expandable } from '~/components'
+import { Comment, DateTime } from '~/components'
 import {
   FollowingFeedCommentPrivateFragment,
   FollowingFeedCommentPublicFragment,
@@ -25,13 +25,7 @@ const FollowingFeedComment: React.FC<FollowingFeedCommentProps> & {
       {header}
 
       <section className="content">
-        <Expandable content={comment.content} limit={3} size="md-s">
-          <Comment.Content
-            comment={comment}
-            type="circleBroadcast"
-            size="md-s"
-          />
-        </Expandable>
+        <Comment.Content comment={comment} type="circleBroadcast" size="md-s" />
       </section>
 
       <footer>
diff --git a/src/views/Me/DraftDetail/BottomBar.tsx b/src/views/Me/DraftDetail/BottomBar.tsx
index e1b2d4efd2..2a53d780ad 100644
--- a/src/views/Me/DraftDetail/BottomBar.tsx
+++ b/src/views/Me/DraftDetail/BottomBar.tsx
@@ -3,6 +3,7 @@ import { toDigestTagPlaceholder } from '~/components'
 import {
   SetCollectionProps,
   SetCoverProps,
+  SetResponseProps,
   SetTagsProps,
   ToggleAccessProps,
 } from '~/components/Editor'
@@ -15,6 +16,7 @@ import {
 
 import {
   useEditDraftAccess,
+  useEditDraftCanComment,
   useEditDraftCollection,
   useEditDraftCover,
   useEditDraftPublishISCN,
@@ -38,6 +40,11 @@ const EditDraftBottomBar = ({ draft, ownCircles }: BottomBarProps) => {
   const { edit: editTags, saving: tagsSaving } = useEditDraftTags(draft)
   const { edit: togglePublishISCN, saving: iscnPublishSaving } =
     useEditDraftPublishISCN(draft)
+
+  const { edit: toggleComment, saving: toggleCommentSaving } =
+    useEditDraftCanComment(draft)
+  const canComment = draft.canComment
+
   const { edit: editAccess, saving: accessSaving } = useEditDraftAccess(
     draft,
     ownCircles && ownCircles[0]
@@ -68,7 +75,7 @@ const EditDraftBottomBar = ({ draft, ownCircles }: BottomBarProps) => {
     editCollection,
     collectionSaving,
   }
-  const accessProps: ToggleAccessProps = {
+  const accessProps: ToggleAccessProps & SetResponseProps = {
     circle: draft?.access.circle,
     accessType: draft.access.type,
     license: draft.license,
@@ -82,6 +89,9 @@ const EditDraftBottomBar = ({ draft, ownCircles }: BottomBarProps) => {
     togglePublishISCN,
     iscnPublishSaving,
     onOpenSupportSetting: () => undefined,
+
+    canComment,
+    toggleComment,
   }
 
   return (
@@ -94,7 +104,11 @@ const EditDraftBottomBar = ({ draft, ownCircles }: BottomBarProps) => {
         <BottomBar
           saving={false}
           disabled={
-            collectionSaving || coverSaving || tagsSaving || accessSaving
+            collectionSaving ||
+            coverSaving ||
+            tagsSaving ||
+            accessSaving ||
+            toggleCommentSaving
           }
           {...coverProps}
           {...tagsProps}
diff --git a/src/views/Me/DraftDetail/SettingsButton/index.tsx b/src/views/Me/DraftDetail/SettingsButton/index.tsx
index 93eba5cef4..e4ff0450a2 100644
--- a/src/views/Me/DraftDetail/SettingsButton/index.tsx
+++ b/src/views/Me/DraftDetail/SettingsButton/index.tsx
@@ -11,6 +11,7 @@ import {
 import {
   SetCollectionProps,
   SetCoverProps,
+  SetResponseProps,
   SetTagsProps,
   ToggleAccessProps,
 } from '~/components/Editor'
@@ -22,6 +23,7 @@ import {
 
 import {
   useEditDraftAccess,
+  useEditDraftCanComment,
   useEditDraftCollection,
   useEditDraftCover,
   useEditDraftPublishISCN,
@@ -82,6 +84,10 @@ const SettingsButton = ({
   const { edit: editSupport, saving: supportSaving } =
     useEditSupportSetting(draft)
 
+  const { edit: toggleComment, saving: canCommentSaving } =
+    useEditDraftCanComment(draft)
+  const canComment = draft.canComment
+
   const hasOwnCircle = ownCircles && ownCircles.length >= 1
   const tags = (draft.tags || []).map(toDigestTagPlaceholder)
   const isPending = draft.publishState === 'pending'
@@ -123,11 +129,22 @@ const SettingsButton = ({
     iscnPublishSaving,
   }
 
+  const responseProps: SetResponseProps = {
+    canComment,
+    toggleComment,
+  }
+
   if (!viewer.shouldSetupLikerID) {
     return (
       <EditorSettingsDialog
         saving={false}
-        disabled={collectionSaving || coverSaving || tagsSaving || accessSaving}
+        disabled={
+          collectionSaving ||
+          coverSaving ||
+          tagsSaving ||
+          accessSaving ||
+          canCommentSaving
+        }
         confirmButtonText={<Translate id="publishNow" />}
         cancelButtonText={<Translate id="publishAbort" />}
         ConfirmStepContent={ConfirmPublishDialogContent}
@@ -135,6 +152,7 @@ const SettingsButton = ({
         {...tagsProps}
         {...collectionProps}
         {...accessProps}
+        {...responseProps}
       >
         {({ openDialog: openEditorSettingsDialog }) => (
           <ConfirmButton
diff --git a/src/views/Me/DraftDetail/Sidebar/index.tsx b/src/views/Me/DraftDetail/Sidebar/index.tsx
index a1772d7402..cd217c34c6 100644
--- a/src/views/Me/DraftDetail/Sidebar/index.tsx
+++ b/src/views/Me/DraftDetail/Sidebar/index.tsx
@@ -9,6 +9,7 @@ import {
 
 import {
   useEditDraftAccess,
+  useEditDraftCanComment,
   useEditDraftCollection,
   useEditDraftCover,
   useEditDraftPublishISCN,
@@ -109,6 +110,15 @@ const EditDraftCircle = ({ draft, ownCircles }: SidebarProps) => {
   )
 }
 
+const EditDraftResponse = ({ draft }: SidebarProps) => {
+  const { edit: toggleComment } = useEditDraftCanComment(draft)
+  const canComment = draft.canComment
+
+  return (
+    <Sidebar.Response canComment={canComment} toggleComment={toggleComment} />
+  )
+}
+
 const EditDraftSidebar = (props: BaseSidebarProps) => {
   const isPending = props.draft.publishState === 'pending'
   const isPublished = props.draft.publishState === 'published'
@@ -119,6 +129,7 @@ const EditDraftSidebar = (props: BaseSidebarProps) => {
       <EditDraftTags {...props} disabled={disabled} />
       <EditDraftCover {...props} disabled={disabled} />
       <EditDraftCollection {...props} disabled={disabled} />
+      <EditDraftResponse {...props} disabled={disabled} />
       <EditDraftCircle {...props} disabled={disabled} />
 
       <style jsx>{styles}</style>
diff --git a/src/views/Me/DraftDetail/gql.ts b/src/views/Me/DraftDetail/gql.ts
index 878e213caa..c94feeae3b 100644
--- a/src/views/Me/DraftDetail/gql.ts
+++ b/src/views/Me/DraftDetail/gql.ts
@@ -35,6 +35,7 @@ export const editMetaFragment = gql`
     requestForDonation
     replyToDonator
     iscnPublish
+    canComment
   }
   ${ArticleDigestDropdown.fragments.article}
   ${assetFragment}
@@ -175,6 +176,16 @@ export const SET_PUBLISH_ISCN = gql`
   ${editMetaFragment}
 `
 
+export const SET_CAN_COMMENT = gql`
+  mutation SetDraftCanComment($id: ID!, $canComment: Boolean) {
+    putDraft(input: { id: $id, canComment: $canComment }) {
+      id
+      ...EditMetaDraft
+    }
+  }
+  ${editMetaFragment}
+`
+
 export const SET_ACCESS = gql`
   mutation SetDraftAccess(
     $id: ID!
diff --git a/src/views/Me/DraftDetail/hooks.ts b/src/views/Me/DraftDetail/hooks.ts
index 2ed86e08fa..d50a49a8a1 100644
--- a/src/views/Me/DraftDetail/hooks.ts
+++ b/src/views/Me/DraftDetail/hooks.ts
@@ -10,6 +10,7 @@ import {
   DraftAssetsQuery,
   EditMetaDraftFragment,
   SetDraftAccessMutation,
+  SetDraftCanCommentMutation,
   SetDraftCollectionMutation,
   SetDraftCoverMutation,
   SetDraftPublishIscnMutation,
@@ -20,6 +21,7 @@ import {
 import {
   DRAFT_ASSETS,
   SET_ACCESS,
+  SET_CAN_COMMENT,
   SET_COLLECTION,
   SET_COVER,
   SET_PUBLISH_ISCN,
@@ -140,3 +142,19 @@ export const useEditDraftPublishISCN = (draft: EditMetaDraftFragment) => {
 
   return { edit, saving }
 }
+
+export const useEditDraftCanComment = (draft: EditMetaDraftFragment) => {
+  const draftId = draft.id
+  const [update, { loading: saving }] =
+    useMutation<SetDraftCanCommentMutation>(SET_CAN_COMMENT)
+
+  const edit = (canComment: boolean) =>
+    update({
+      variables: {
+        id: draftId,
+        canComment,
+      },
+    })
+
+  return { edit, saving }
+}
diff --git a/src/views/Search/AggregateResults/Articles.tsx b/src/views/Search/AggregateResults/Articles.tsx
index 9f4d9883ac..a2db89226c 100644
--- a/src/views/Search/AggregateResults/Articles.tsx
+++ b/src/views/Search/AggregateResults/Articles.tsx
@@ -1,31 +1,59 @@
-import { analytics, toPath } from '~/common/utils'
+import { useEffect } from 'react'
+
+import {
+  LATER_SEARCH_RESULTS_LENGTH,
+  MAX_SEARCH_RESULTS_LENGTH,
+} from '~/common/enums'
+import { analytics, mergeConnections } from '~/common/utils'
 import {
-  ArticleDigestTitle,
-  Card,
+  ArticleDigestFeed,
+  EmptySearch,
+  InfiniteScroll,
   List,
   Spinner,
+  Translate,
   usePublicQuery,
   useRoute,
 } from '~/components'
 import { SearchAggregateArticlesPublicQuery } from '~/gql/graphql'
 
+import EndOfResults from './EndOfResults'
 import { SEARCH_AGGREGATE_ARTICLES_PUBLIC } from './gql'
 import styles from './styles.css'
-import ViewMoreButton from './ViewMoreButton'
 
 const AggregateArticleResults = () => {
   const { getQuery } = useRoute()
   const q = getQuery('q')
+  // TODO: Just test for team, will be removed when release
+  const version = getQuery('version')
+  const coefficients = getQuery('coefficients')
 
   /**
    * Data Fetching
    */
   // public data
-  const { data, loading } = usePublicQuery<SearchAggregateArticlesPublicQuery>(
-    SEARCH_AGGREGATE_ARTICLES_PUBLIC,
-    { variables: { key: q } }
-  )
+  const { data, loading, fetchMore } =
+    usePublicQuery<SearchAggregateArticlesPublicQuery>(
+      SEARCH_AGGREGATE_ARTICLES_PUBLIC,
+      {
+        variables: {
+          key: q,
+          version: version === '' ? undefined : version,
+          coefficients: coefficients === '' ? undefined : coefficients,
+        },
+      }
+    )
 
+  useEffect(() => {
+    analytics.trackEvent('load_more', {
+      type: 'search_article',
+      location: 0,
+      searchKey: q,
+    })
+  }, [])
+
+  // pagination
+  const connectionPath = 'search'
   const { edges, pageInfo } = data?.search || {}
 
   /**
@@ -36,45 +64,90 @@ const AggregateArticleResults = () => {
   }
 
   if (!edges || edges.length <= 0 || !pageInfo) {
-    return null
+    return (
+      <EmptySearch
+        description={
+          <Translate
+            zh_hant="沒有找到相關文章，換個關鍵詞試試？"
+            zh_hans="没有找到相关文章，换个关键词试试？"
+            en="No articles found. Try a different keyword?"
+          />
+        }
+      />
+    )
+  }
+
+  // load next page
+  const loadMore = () => {
+    analytics.trackEvent('load_more', {
+      type: 'search_article',
+      location: edges?.length || 0,
+      searchKey: q,
+    })
+
+    return fetchMore({
+      variables: {
+        first:
+          edges.length === MAX_SEARCH_RESULTS_LENGTH - 10
+            ? 10
+            : LATER_SEARCH_RESULTS_LENGTH,
+        after: pageInfo?.endCursor,
+      },
+      updateQuery: (previousResult, { fetchMoreResult }) =>
+        mergeConnections({
+          oldData: previousResult,
+          newData: fetchMoreResult,
+          path: connectionPath,
+        }),
+    })
   }
 
   return (
     <section className="aggregate-section">
-      <List>
-        {edges.map(
-          ({ node, cursor }, i) =>
-            node.__typename === 'Article' && (
-              <List.Item key={cursor}>
-                <Card
-                  spacing={['base', 'base']}
-                  {...toPath({
-                    page: 'articleDetail',
-                    article: node,
-                  })}
-                  onClick={() =>
-                    analytics.trackEvent('click_feed', {
-                      type: 'search',
-                      contentType: 'article',
-                      location: i,
-                      id: node.id,
-                    })
-                  }
-                >
-                  <ArticleDigestTitle
+      <InfiniteScroll
+        hasNextPage={
+          pageInfo.hasNextPage && edges.length < MAX_SEARCH_RESULTS_LENGTH
+        }
+        loadMore={loadMore}
+      >
+        <List>
+          {edges.map(
+            ({ node, cursor }, i) =>
+              node.__typename === 'Article' && (
+                <List.Item key={cursor + node.id}>
+                  <ArticleDigestFeed
                     article={node}
-                    is="h3"
-                    textWeight="normal"
-                    textSize="md"
+                    is="link"
+                    isConciseFooter={true}
+                    hasCircle={false}
+                    hasFollow={false}
+                    onClick={() =>
+                      analytics.trackEvent('click_feed', {
+                        type: 'search_article',
+                        contentType: 'article',
+                        location: i,
+                        id: node.id,
+                        searchKey: q,
+                      })
+                    }
+                    onClickAuthor={() => {
+                      analytics.trackEvent('click_feed', {
+                        type: 'search_article',
+                        contentType: 'user',
+                        location: i,
+                        id: node.author.id,
+                        searchKey: q,
+                      })
+                    }}
                   />
-                </Card>
-              </List.Item>
-            )
-        )}
-      </List>
-
-      <ViewMoreButton q={q} type="article" />
-
+                </List.Item>
+              )
+          )}
+        </List>
+      </InfiniteScroll>
+      {(!pageInfo.hasNextPage || edges.length >= MAX_SEARCH_RESULTS_LENGTH) && (
+        <EndOfResults />
+      )}
       <style jsx>{styles}</style>
     </section>
   )
diff --git a/src/views/Search/AggregateResults/EndOfResults.tsx b/src/views/Search/AggregateResults/EndOfResults.tsx
new file mode 100644
index 0000000000..e9d4af7f3f
--- /dev/null
+++ b/src/views/Search/AggregateResults/EndOfResults.tsx
@@ -0,0 +1,18 @@
+import { Translate } from '~/components'
+
+import styles from './styles.css'
+
+const EndOfResults = () => {
+  return (
+    <section className="endOfResults">
+      <Translate
+        zh_hans="已显示所有结果"
+        zh_hant="已顯示所有結果"
+        en="End of the results"
+      />
+      <style jsx>{styles}</style>
+    </section>
+  )
+}
+
+export default EndOfResults
diff --git a/src/views/Search/AggregateResults/Tags.tsx b/src/views/Search/AggregateResults/Tags.tsx
index c0353fc500..a68d9cdb92 100644
--- a/src/views/Search/AggregateResults/Tags.tsx
+++ b/src/views/Search/AggregateResults/Tags.tsx
@@ -1,31 +1,59 @@
-import { analytics, toPath } from '~/common/utils'
+import { Fragment, useEffect } from 'react'
+
+import {
+  LATER_SEARCH_RESULTS_LENGTH,
+  MAX_SEARCH_RESULTS_LENGTH,
+} from '~/common/enums'
+import { analytics, mergeConnections, toPath } from '~/common/utils'
 import {
-  Card,
-  List,
+  EmptySearch,
+  InfiniteScroll,
+  Menu,
   Spinner,
-  Tag,
+  TagDigest,
+  Translate,
   usePublicQuery,
   useRoute,
 } from '~/components'
 import { SearchAggregateTagsPublicQuery } from '~/gql/graphql'
 
+import EndOfResults from './EndOfResults'
 import { SEARCH_AGGREGATE_TAGS_PUBLIC } from './gql'
 import styles from './styles.css'
-import ViewMoreButton from './ViewMoreButton'
 
 const AggregateTagResults = () => {
   const { getQuery } = useRoute()
   const q = getQuery('q')
+  // TODO: Just test for team, will be removed when release
+  const version = getQuery('version')
+  const coefficients = getQuery('coefficients')
 
   /**
    * Data Fetching
    */
   // public data
-  const { data, loading } = usePublicQuery<SearchAggregateTagsPublicQuery>(
-    SEARCH_AGGREGATE_TAGS_PUBLIC,
-    { variables: { key: q } }
-  )
+  const { data, loading, fetchMore } =
+    usePublicQuery<SearchAggregateTagsPublicQuery>(
+      SEARCH_AGGREGATE_TAGS_PUBLIC,
+      {
+        variables: {
+          key: q,
+          version: version === '' ? undefined : version,
+          coefficients: coefficients === '' ? undefined : coefficients,
+        },
+      }
+    )
 
+  useEffect(() => {
+    analytics.trackEvent('load_more', {
+      type: 'search_tag',
+      location: 0,
+      searchKey: q,
+    })
+  }, [])
+
+  // pagination
+  const connectionPath = 'search'
   const { edges, pageInfo } = data?.search || {}
 
   /**
@@ -36,40 +64,83 @@ const AggregateTagResults = () => {
   }
 
   if (!edges || edges.length <= 0 || !pageInfo) {
-    return null
+    return (
+      <EmptySearch
+        description={
+          <Translate
+            zh_hant="沒有找到相關標籤，換個關鍵詞試試？"
+            zh_hans="没有找到相关标签，换个关键词试试？"
+            en="No tags found. Try a different keyword?"
+          />
+        }
+      />
+    )
   }
 
-  return (
-    <section className="aggregate-section">
-      <List>
-        {edges.map(
-          ({ node, cursor }, i) =>
-            node.__typename === 'Tag' && (
-              <List.Item key={cursor}>
-                <Card
-                  spacing={['base', 'base']}
-                  {...toPath({
-                    page: 'tagDetail',
-                    tag: node,
-                  })}
-                  onClick={() =>
-                    analytics.trackEvent('click_feed', {
-                      type: 'search',
-                      contentType: 'tag',
-                      location: i,
-                      id: node.id,
-                    })
-                  }
-                >
-                  <Tag tag={node} type="list" />
-                </Card>
-              </List.Item>
-            )
-        )}
-      </List>
+  // load next page
+  const loadMore = () => {
+    analytics.trackEvent('load_more', {
+      type: 'search_tag',
+      location: edges.length || 0,
+      searchKey: q,
+    })
 
-      <ViewMoreButton q={q} type="tag" />
+    return fetchMore({
+      variables: {
+        first:
+          edges.length === MAX_SEARCH_RESULTS_LENGTH - 10
+            ? 10
+            : LATER_SEARCH_RESULTS_LENGTH,
+        after: pageInfo.endCursor,
+      },
+      updateQuery: (previousResult, { fetchMoreResult }) =>
+        mergeConnections({
+          oldData: previousResult,
+          newData: fetchMoreResult,
+          path: connectionPath,
+        }),
+    })
+  }
 
+  return (
+    <section className="aggregate-section">
+      <InfiniteScroll
+        hasNextPage={
+          pageInfo.hasNextPage && edges.length < MAX_SEARCH_RESULTS_LENGTH
+        }
+        loadMore={loadMore}
+      >
+        <Menu>
+          {edges.map(
+            ({ node, cursor }, i) =>
+              node.__typename === 'Tag' && (
+                <Fragment key={cursor + node.id}>
+                  <Menu.Item
+                    spacing={['base', 'base']}
+                    {...toPath({
+                      page: 'tagDetail',
+                      tag: node,
+                    })}
+                    onClick={() =>
+                      analytics.trackEvent('click_feed', {
+                        type: 'search_tag',
+                        contentType: 'tag',
+                        location: i,
+                        id: node.id,
+                        searchKey: q,
+                      })
+                    }
+                  >
+                    <TagDigest.Concise tag={node} showArticlesNum />
+                  </Menu.Item>
+                </Fragment>
+              )
+          )}
+        </Menu>
+      </InfiniteScroll>
+      {(!pageInfo.hasNextPage || edges.length >= MAX_SEARCH_RESULTS_LENGTH) && (
+        <EndOfResults />
+      )}
       <style jsx>{styles}</style>
     </section>
   )
diff --git a/src/views/Search/AggregateResults/Users.tsx b/src/views/Search/AggregateResults/Users.tsx
index c4187f0e91..5bebd22b4a 100644
--- a/src/views/Search/AggregateResults/Users.tsx
+++ b/src/views/Search/AggregateResults/Users.tsx
@@ -1,31 +1,59 @@
-import { analytics, toPath } from '~/common/utils'
+import { useEffect } from 'react'
+
+import {
+  LATER_SEARCH_RESULTS_LENGTH,
+  MAX_SEARCH_RESULTS_LENGTH,
+} from '~/common/enums'
+import { analytics, mergeConnections, toPath } from '~/common/utils'
 import {
-  Card,
-  List,
+  EmptySearch,
+  InfiniteScroll,
+  Menu,
   Spinner,
+  Translate,
   usePublicQuery,
   UserDigest,
   useRoute,
 } from '~/components'
 import { SearchAggregateUsersPublicQuery } from '~/gql/graphql'
 
+import EndOfResults from './EndOfResults'
 import { SEARCH_AGGREGATE_USERS_PUBLIC } from './gql'
 import styles from './styles.css'
-import ViewMoreButton from './ViewMoreButton'
 
 const AggregateUserResults = () => {
   const { getQuery } = useRoute()
   const q = getQuery('q')
+  // TODO: Just test for team, will be removed when release
+  const version = getQuery('version')
+  const coefficients = getQuery('coefficients')
 
   /**
    * Data Fetching
    */
   // public data
-  const { data, loading } = usePublicQuery<SearchAggregateUsersPublicQuery>(
-    SEARCH_AGGREGATE_USERS_PUBLIC,
-    { variables: { key: q } }
-  )
+  const { data, loading, fetchMore } =
+    usePublicQuery<SearchAggregateUsersPublicQuery>(
+      SEARCH_AGGREGATE_USERS_PUBLIC,
+      {
+        variables: {
+          key: q,
+          version: version === '' ? undefined : version,
+          coefficients: coefficients === '' ? undefined : coefficients,
+        },
+      }
+    )
 
+  useEffect(() => {
+    analytics.trackEvent('load_more', {
+      type: 'search_user',
+      location: 0,
+      searchKey: q,
+    })
+  }, [])
+
+  // pagination
+  const connectionPath = 'search'
   const { edges, pageInfo } = data?.search || {}
 
   /**
@@ -36,45 +64,82 @@ const AggregateUserResults = () => {
   }
 
   if (!edges || edges.length <= 0 || !pageInfo) {
-    return null
+    return (
+      <EmptySearch
+        description={
+          <Translate
+            zh_hant="沒有找到相關用戶，換個關鍵詞試試？"
+            zh_hans="没有找到相关用户，换个关键词试试？"
+            en="No users found. Try a different keyword?"
+          />
+        }
+      />
+    )
+  }
+
+  // load next page
+  const loadMore = () => {
+    analytics.trackEvent('load_more', {
+      type: 'search_user',
+      location: edges.length || 0,
+      searchKey: q,
+    })
+
+    return fetchMore({
+      variables: {
+        first:
+          edges.length === MAX_SEARCH_RESULTS_LENGTH - 10
+            ? 10
+            : LATER_SEARCH_RESULTS_LENGTH,
+        after: pageInfo.endCursor,
+      },
+      updateQuery: (previousResult, { fetchMoreResult }) =>
+        mergeConnections({
+          oldData: previousResult,
+          newData: fetchMoreResult,
+          path: connectionPath,
+        }),
+    })
   }
 
   return (
     <section className="aggregate-section">
-      <List>
-        {edges.map(
-          ({ node, cursor }, i) =>
-            node.__typename === 'User' && (
-              <List.Item key={cursor}>
-                <Card
-                  spacing={['xtight', 'base']}
+      <InfiniteScroll
+        hasNextPage={
+          pageInfo.hasNextPage && edges.length < MAX_SEARCH_RESULTS_LENGTH
+        }
+        loadMore={loadMore}
+      >
+        <Menu>
+          {edges.map(
+            ({ node, cursor }, i) =>
+              node.__typename === 'User' && (
+                <Menu.Item
+                  key={cursor + node.id}
+                  spacing={['base', 'base']}
                   {...toPath({
                     page: 'userProfile',
                     userName: node.userName || '',
                   })}
                   onClick={() =>
                     analytics.trackEvent('click_feed', {
-                      type: 'search',
+                      type: 'search_user',
                       contentType: 'user',
                       location: i,
                       id: node.id,
+                      searchKey: q,
                     })
                   }
                 >
-                  <UserDigest.Mini
-                    user={node}
-                    hasAvatar
-                    hasUserName
-                    hasDisplayName
-                  />
-                </Card>
-              </List.Item>
-            )
-        )}
-      </List>
-
-      <ViewMoreButton q={q} type="user" />
-
+                  <UserDigest.Concise user={node} avatarSize="xl" />
+                </Menu.Item>
+              )
+          )}
+        </Menu>
+      </InfiniteScroll>
+      {(!pageInfo.hasNextPage || edges.length >= MAX_SEARCH_RESULTS_LENGTH) && (
+        <EndOfResults />
+      )}
       <style jsx>{styles}</style>
     </section>
   )
diff --git a/src/views/Search/AggregateResults/gql.ts b/src/views/Search/AggregateResults/gql.ts
index b968c7663b..59650c3bb8 100644
--- a/src/views/Search/AggregateResults/gql.ts
+++ b/src/views/Search/AggregateResults/gql.ts
@@ -1,10 +1,25 @@
 import gql from 'graphql-tag'
 
-import { ArticleDigestTitle, Tag, UserDigest } from '~/components'
+import { ArticleDigestFeed, TagDigest, UserDigest } from '~/components'
 
 export const SEARCH_AGGREGATE_ARTICLES_PUBLIC = gql`
-  query SearchAggregateArticlesPublic($key: String!) {
-    search(input: { key: $key, type: Article, first: 4, record: true }) {
+  query SearchAggregateArticlesPublic(
+    $key: String!
+    $first: first_Int_min_0 = 30
+    $after: String
+    $version: SearchAPIVersion = v20230301
+    $coefficients: String
+  ) {
+    search(
+      input: {
+        type: Article
+        first: $first
+        version: $version
+        key: $key
+        after: $after
+        coefficients: $coefficients
+      }
+    ) {
       pageInfo {
         startCursor
         endCursor
@@ -14,18 +29,35 @@ export const SEARCH_AGGREGATE_ARTICLES_PUBLIC = gql`
         cursor
         node {
           ... on Article {
-            ...ArticleDigestTitleArticle
+            ...ArticleDigestFeedArticlePublic
+            ...ArticleDigestFeedArticlePrivate
           }
         }
       }
     }
   }
-  ${ArticleDigestTitle.fragments.article}
+  ${ArticleDigestFeed.fragments.article.public}
+  ${ArticleDigestFeed.fragments.article.private}
 `
 
 export const SEARCH_AGGREGATE_TAGS_PUBLIC = gql`
-  query SearchAggregateTagsPublic($key: String!) {
-    search(input: { key: $key, type: Tag, first: 3, record: true }) {
+  query SearchAggregateTagsPublic(
+    $key: String!
+    $first: first_Int_min_0 = 30
+    $after: String
+    $version: SearchAPIVersion = v20230301
+    $coefficients: String
+  ) {
+    search(
+      input: {
+        type: Tag
+        version: $version
+        first: $first
+        key: $key
+        after: $after
+        coefficients: $coefficients
+      }
+    ) {
       pageInfo {
         startCursor
         endCursor
@@ -35,18 +67,33 @@ export const SEARCH_AGGREGATE_TAGS_PUBLIC = gql`
         cursor
         node {
           ... on Tag {
-            ...DigestTag
+            ...TagDigestConciseTag
           }
         }
       }
     }
   }
-  ${Tag.fragments.tag}
+  ${TagDigest.Concise.fragments.tag}
 `
 
 export const SEARCH_AGGREGATE_USERS_PUBLIC = gql`
-  query SearchAggregateUsersPublic($key: String!) {
-    search(input: { key: $key, type: User, first: 3, record: true }) {
+  query SearchAggregateUsersPublic(
+    $key: String!
+    $first: first_Int_min_0 = 30
+    $after: String
+    $version: SearchAPIVersion = v20230301
+    $coefficients: String
+  ) {
+    search(
+      input: {
+        type: User
+        version: $version
+        first: $first
+        key: $key
+        after: $after
+        coefficients: $coefficients
+      }
+    ) {
       pageInfo {
         startCursor
         endCursor
@@ -56,11 +103,11 @@ export const SEARCH_AGGREGATE_USERS_PUBLIC = gql`
         cursor
         node {
           ... on User {
-            ...UserDigestMiniUser
+            ...UserDigestConciseUser
           }
         }
       }
     }
   }
-  ${UserDigest.Mini.fragments.user}
+  ${UserDigest.Concise.fragments.user}
 `
diff --git a/src/views/Search/AggregateResults/index.tsx b/src/views/Search/AggregateResults/index.tsx
index 781d3e5071..9d55630b1d 100644
--- a/src/views/Search/AggregateResults/index.tsx
+++ b/src/views/Search/AggregateResults/index.tsx
@@ -1,13 +1,100 @@
+import { useApolloClient } from '@apollo/react-hooks'
+import { useEffect, useState } from 'react'
+
+import { getSearchType } from '~/common/utils'
+import { Tabs, Translate, useRoute } from '~/components'
+
 import Articles from './Articles'
+import {
+  SEARCH_AGGREGATE_ARTICLES_PUBLIC,
+  SEARCH_AGGREGATE_TAGS_PUBLIC,
+  SEARCH_AGGREGATE_USERS_PUBLIC,
+} from './gql'
+import styles from './styles.css'
 import Tags from './Tags'
 import Users from './Users'
 
+enum Type {
+  ARTICLE = 'article',
+  USER = 'user',
+  TAG = 'tag',
+}
+
 const AggregateResults = () => {
+  const { getQuery, replaceQuery } = useRoute()
+  const client = useApolloClient()
+  const [type, setType] = useState(
+    getSearchType(getQuery('type')) || Type.ARTICLE
+  )
+  const q = getQuery('q')
+  const version = getQuery('version')
+
+  const isArticle = type === Type.ARTICLE
+  const isUser = type === Type.USER
+  const isTag = type === Type.TAG
+
+  const updateType = (t: Type) => {
+    setType(t)
+    replaceQuery('type', t)
+  }
+
+  // Prefetch first search results
+  useEffect(() => {
+    client.query({
+      query: SEARCH_AGGREGATE_ARTICLES_PUBLIC,
+      variables: {
+        key: q,
+        version: version === '' ? undefined : version,
+      },
+      fetchPolicy: 'network-only',
+    })
+    client.query({
+      query: SEARCH_AGGREGATE_USERS_PUBLIC,
+      variables: {
+        key: q,
+        version: version === '' ? undefined : version,
+      },
+      fetchPolicy: 'network-only',
+    })
+    client.query({
+      query: SEARCH_AGGREGATE_TAGS_PUBLIC,
+      variables: {
+        key: q,
+        version: version === '' ? undefined : version,
+      },
+      fetchPolicy: 'network-only',
+    })
+  }, [q])
+
   return (
     <>
-      <Tags />
-      <Users />
-      <Articles />
+      <section className="title">
+        <span className="titleLeft">
+          <Translate zh_hans="有关" zh_hant="有關" en="All results for" />
+        </span>
+        <span>
+          <span className="titleMiddle">&nbsp;{q}</span>
+        </span>
+        <span className="titleRight">
+          &nbsp;
+          <Translate zh_hans="的搜索結果" zh_hant="的檢索結果" en="" />
+        </span>
+      </section>
+      <Tabs>
+        <Tabs.Tab selected={isArticle} onClick={() => updateType(Type.ARTICLE)}>
+          <Translate zh_hans="作品" zh_hant="作品" en="Articles" />
+        </Tabs.Tab>
+        <Tabs.Tab selected={isUser} onClick={() => updateType(Type.USER)}>
+          <Translate zh_hans="用户" zh_hant="用戶" en="Users" />
+        </Tabs.Tab>
+        <Tabs.Tab selected={isTag} onClick={() => updateType(Type.TAG)}>
+          <Translate zh_hans="标签" zh_hant="標籤" en="Tags" />
+        </Tabs.Tab>
+      </Tabs>
+      {isArticle && <Articles />}
+      {isTag && <Tags />}
+      {isUser && <Users />}
+      <style jsx>{styles}</style>
     </>
   )
 }
diff --git a/src/views/Search/AggregateResults/styles.css b/src/views/Search/AggregateResults/styles.css
index 4d43e58773..5cc4a02928 100644
--- a/src/views/Search/AggregateResults/styles.css
+++ b/src/views/Search/AggregateResults/styles.css
@@ -1,8 +1,46 @@
+.title {
+  @mixin flex-center-start;
+
+  padding: var(--spacing-loose) var(--spacing-base) var(--spacing-base);
+  font-size: var(--font-size-xm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-grey);
+
+  & .titleLeft {
+    white-space: nowrap;
+  }
+
+  & .titleMiddle {
+    @mixin line-clamp;
+
+    color: var(--color-black);
+    word-break: break-all;
+  }
+
+  & .titleRight {
+    white-space: nowrap;
+  }
+
+  @media (--sm-up) {
+    padding-bottom: var(--spacing-x-tight);
+  }
+}
+
 .aggregate-section {
-  padding-bottom: var(--spacing-x-tight);
-  background: var(--color-grey-lighter);
+  /* padding-bottom: var(--spacing-x-tight); */
+
+  /* background: var(--color-grey-lighter); */
 }
 
 .result-item {
   padding: var(--spacing-base);
 }
+
+.endOfResults {
+  @mixin flex-center-all;
+
+  padding-top: var(--spacing-base);
+  padding-bottom: var(--spacing-base);
+  font-size: var(--font-size-sm);
+  color: var(--color-grey);
+}
diff --git a/src/views/Search/index.tsx b/src/views/Search/index.tsx
index 0a9a473978..68bd432acb 100644
--- a/src/views/Search/index.tsx
+++ b/src/views/Search/index.tsx
@@ -1,87 +1,114 @@
-import { useEffect, useState } from 'react'
+import _uniq from 'lodash/uniq'
+import _without from 'lodash/without'
+import { useContext, useEffect, useState } from 'react'
 
-import { toPath } from '~/common/utils'
+import {
+  SEARCH_HISTORY_DISPLAY_LENGTH,
+  SEARCH_HISTORY_LENGTH,
+  STORAGE_KEY_SEARCH_HISTORY,
+} from '~/common/enums'
+import { storage, toPath } from '~/common/utils'
 import {
   Head,
   Layout,
   Media,
-  SearchAutoComplete,
   SearchBar,
-  SearchOverview,
+  SearchHistory,
   useRoute,
+  ViewerContext,
 } from '~/components'
 
 import AggregateResults from './AggregateResults'
-import SearchArticles from './SearchArticles'
-import SearchTags from './SearchTags'
-import SearchUsers from './SearchUsers'
-
+// import EmptySearch from './EmptySearch'
+import styles from './styles.css'
 const Search = () => {
+  const viewer = useContext(ViewerContext)
+  const storageKey = STORAGE_KEY_SEARCH_HISTORY + '_' + viewer.id
+
+  const [searchHistory, setSearchHistory] = useState<string[]>([])
+
+  const updateSearchHistory = (value: string[]) => {
+    storage.set(storageKey, value)
+    setSearchHistory(value)
+  }
+
+  const addSearchHistory = (searchKey: string) => {
+    const nsh = _uniq([searchKey, ...(storage.get(storageKey) || [])]).slice(
+      0,
+      SEARCH_HISTORY_LENGTH
+    )
+    updateSearchHistory(nsh)
+  }
+
+  const removeSearchHistory = (searchKey: string) => {
+    const nsh = _without(searchHistory, searchKey)
+    updateSearchHistory(nsh)
+  }
+
   const { getQuery, router } = useRoute()
-  const type = getQuery('type')
   const q = getQuery('q')
-  const [typingKey, setTypingKey] = useState('')
-  const resetAutoComplete = () => setTypingKey('')
+  // TODO: Just test for product team, will be removed when release
+  const cancelable = getQuery('cancelable')
+
   const onCancel = () => {
     const path = toPath({ page: 'search' })
-    router.push(path.href)
+    router.replace(path.href)
   }
 
-  const isOverview = !q && !typingKey
-  const isAutoComplete = typingKey
-  const isTagOnly = !isAutoComplete && type === 'tag'
-  const isUserOnly = !isAutoComplete && type === 'user'
-  const isArticleOnly = !isAutoComplete && type === 'article'
-  const isAggregate =
-    !isOverview &&
-    !isAutoComplete &&
-    !isTagOnly &&
-    !isUserOnly &&
-    !isArticleOnly
-  const showCancelButton = !isOverview
+  const isHistory = !q
+  const isAggregate = !isHistory
+
+  // const showBackButton = isSmallUp && isOverview
+  // const showMeButton = !isSmallUp && isOverview
+
+  const showCancelButton = !isHistory && cancelable
 
   useEffect(() => {
-    router.events.on('routeChangeStart', resetAutoComplete)
-    return () => router.events.off('routeChangeStart', resetAutoComplete)
-  }, [])
+    if (!isHistory) return
 
-  return (
-    <Layout.Main smBgColor={isAggregate ? 'grey-lighter' : undefined}>
-      <Layout.Header
-        left={
-          isOverview ? (
-            <>
-              <Media at="sm">
-                <Layout.Header.MeButton />
-              </Media>
-              <Media greaterThan="sm">
-                <Layout.Header.BackButton />
-              </Media>
-            </>
-          ) : null
-        }
-        right={
-          <>
-            <SearchBar hasDropdown={false} onChange={setTypingKey} />
-
-            {showCancelButton && (
-              <span style={{ marginLeft: '1rem' }}>
-                <Layout.Header.CancelButton onClick={onCancel} />
-              </span>
-            )}
-          </>
-        }
-      />
+    setSearchHistory(storage.get(storageKey))
+  }, [storageKey])
 
-      <Head title={{ id: 'search' }} />
+  useEffect(() => {
+    if (!isAggregate) return
+
+    addSearchHistory(q)
+  }, [isAggregate, q, storageKey])
 
-      {isOverview && <SearchOverview inPage />}
-      {isAutoComplete && <SearchAutoComplete searchKey={typingKey} inPage />}
+  return (
+    <Layout.Main>
+      <Media greaterThanOrEqual="xl">
+        <Layout.Header
+          left={<Layout.Header.BackButton />}
+          right={<Layout.Header.Title id="search" />}
+        />
+      </Media>
+      <Media lessThan="xl">
+        <Layout.Header
+          right={
+            <section className="layoutHeaderRight">
+              <SearchBar hasDropdown={false} />
+              {showCancelButton && (
+                <span style={{ marginLeft: '1rem' }}>
+                  <Layout.Header.CancelButton onClick={onCancel} />
+                </span>
+              )}
+            </section>
+          }
+        />
+      </Media>
 
-      {isTagOnly && <SearchTags />}
-      {isUserOnly && <SearchUsers />}
-      {isArticleOnly && <SearchArticles />}
+      <Head title={{ id: 'search' }} />
+      {isHistory && (
+        <Media lessThan="xl">
+          <SearchHistory
+            data={searchHistory?.slice(0, SEARCH_HISTORY_DISPLAY_LENGTH)}
+            removeSearchHistoryItem={removeSearchHistory}
+          />
+        </Media>
+      )}
       {isAggregate && <AggregateResults />}
+      <style jsx>{styles}</style>
     </Layout.Main>
   )
 }
diff --git a/src/views/Search/styles.css b/src/views/Search/styles.css
new file mode 100644
index 0000000000..5927acea8e
--- /dev/null
+++ b/src/views/Search/styles.css
@@ -0,0 +1,3 @@
+.layoutHeaderRight {
+  width: 100%;
+}
diff --git a/src/views/TagDetail/ArticlesCount/index.tsx b/src/views/TagDetail/ArticlesCount/index.tsx
index fb6e22fd3e..fe78a01373 100644
--- a/src/views/TagDetail/ArticlesCount/index.tsx
+++ b/src/views/TagDetail/ArticlesCount/index.tsx
@@ -18,9 +18,13 @@ const ArticlesCount = ({ tag }: ArticlesCountProps) => {
       <b>{numAbbr(totalCount)}</b>
       <span>
         &nbsp;
-        <FormattedMessage defaultMessage={`{totalCount, plural, =1 {article} other {articles}}`} description="" values={{
-          totalCount: numAbbr(totalCount)
-        }}/>
+        <FormattedMessage
+          defaultMessage={`{totalCount, plural, =1 {article} other {articles}}`}
+          description=""
+          values={{
+            totalCount: numAbbr(totalCount),
+          }}
+        />
       </span>
 
       <style jsx>{styles}</style>