diff --git a/lang/default.json b/lang/default.json
index 08808ef24b..fc6c02df33 100644
--- a/lang/default.json
+++ b/lang/default.json
@@ -730,10 +730,6 @@
     "defaultMessage": "Please set your transcation password.",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "Remove",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "That's all",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"
diff --git a/lang/en.json b/lang/en.json
index d93acb0fed..ac4e5ad537 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -730,10 +730,6 @@
     "defaultMessage": "Please set your transcation password.",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "Remove",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "That's all",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"
diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
index 0ef1f49ef7..749e749aeb 100644
--- a/lang/zh-Hans.json
+++ b/lang/zh-Hans.json
@@ -730,10 +730,6 @@
     "defaultMessage": "请先设定交易密码",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "移除",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "没有更多",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index 038952628f..0c11411be7 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -730,10 +730,6 @@
     "defaultMessage": "請先設定交易密碼",
     "description": "PAYMENT_PASSWORD_NOT_SET"
   },
-  "Ayepqz": {
-    "defaultMessage": "移除",
-    "description": "src/components/Tag/index.tsx"
-  },
   "B2As08": {
     "defaultMessage": "沒有更多",
     "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx"
diff --git a/package.json b/package.json
index 10215b5ebb..dd3d4ec57e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "codebase of Matters' website",
   "author": "Matters <hi@matters.town>",
   "engines": {
diff --git a/src/components/Context/ArticleAppreciation/index.tsx b/src/components/Context/ArticleAppreciation/index.tsx
deleted file mode 100644
index 735c32b981..0000000000
--- a/src/components/Context/ArticleAppreciation/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { createContext, ReactNode, useState } from 'react'
-
-export const ArticleAppreciationContext = createContext(
-  {} as {
-    likesReceivedTotal: number
-    appreciateLeft: number
-    incrementLikesReceivedTotal: () => void
-    initArticleAppreciationContext: (
-      likesReceivedTotal: number,
-      appreciateLeft: number
-    ) => void
-  }
-)
-
-export const ArticleAppreciationProvider = ({
-  children,
-}: {
-  children: ReactNode
-}) => {
-  const [likesReceivedTotal, setLikesReceivedTotal] = useState(0)
-  const [appreciateLeft, setAppreciateLeft] = useState(0)
-
-  const initArticleAppreciationContext = (
-    likesReceivedTotal: number,
-    appreciateLeft: number
-  ) => {
-    setLikesReceivedTotal(likesReceivedTotal)
-    setAppreciateLeft(appreciateLeft)
-  }
-
-  const incrementLikesReceivedTotal = () => {
-    setLikesReceivedTotal((prev) => prev + 1)
-    setAppreciateLeft((prev) => prev - 1)
-  }
-
-  return (
-    <ArticleAppreciationContext.Provider
-      value={{
-        likesReceivedTotal,
-        appreciateLeft,
-        initArticleAppreciationContext,
-        incrementLikesReceivedTotal,
-      }}
-    >
-      {children}
-    </ArticleAppreciationContext.Provider>
-  )
-}
diff --git a/src/components/Context/index.ts b/src/components/Context/index.ts
index a67da27b5b..124a5e5232 100644
--- a/src/components/Context/index.ts
+++ b/src/components/Context/index.ts
@@ -1,5 +1,4 @@
 export * from './ActiveCommentEditor'
-export * from './ArticleAppreciation'
 export * from './CommentDrafts'
 export * from './DraftDetailState'
 export * from './Features'
diff --git a/src/components/Dialogs/TagListDialog/index.tsx b/src/components/Dialogs/TagListDialog/index.tsx
index b6983ce1d3..379952f058 100644
--- a/src/components/Dialogs/TagListDialog/index.tsx
+++ b/src/components/Dialogs/TagListDialog/index.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl'
 
-import { Dialog, Tag, useDialogSwitch } from '~/components'
+import { Dialog, ListTag, useDialogSwitch } from '~/components'
 import { DigestTagFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -41,9 +41,8 @@ const BaseDialog = ({ tags, children }: TagListDialogProps) => {
           <ul className={styles.tags}>
             {tags.map((tag) => (
               <li key={tag.id}>
-                <Tag
+                <ListTag
                   tag={tag}
-                  type="list"
                   hasCount={false}
                   textIconProps={{ color: 'black', weight: 'medium' }}
                 />
diff --git a/src/components/Editor/Sidebar/Tags/index.tsx b/src/components/Editor/Sidebar/Tags/index.tsx
index fc726f1e49..3003354460 100644
--- a/src/components/Editor/Sidebar/Tags/index.tsx
+++ b/src/components/Editor/Sidebar/Tags/index.tsx
@@ -5,8 +5,8 @@ import { analytics } from '~/common/utils'
 import {
   EditorSearchSelectDialog,
   Icon,
+  InlineTag,
   // SearchSelectNode,
-  Tag,
 } from '~/components'
 import { SearchSelectNode } from '~/components/Forms/SearchSelectForm'
 import { DigestTagFragment } from '~/gql/graphql'
@@ -63,10 +63,8 @@ const SidebarTags = ({
             <ul className={styles.list}>
               {tags.map((tag) => (
                 <li key={tag.id}>
-                  <Tag
+                  <InlineTag
                     tag={tag}
-                    type="inline"
-                    is="span"
                     onRemoveTag={() => {
                       editTags(tags.filter((t) => t.content !== tag.content))
                       analytics.trackEvent('click_button', {
diff --git a/src/components/Editor/TagCustomStagingArea/RecommendedTags/index.tsx b/src/components/Editor/TagCustomStagingArea/RecommendedTags/index.tsx
index 87d585fc62..9330743df0 100644
--- a/src/components/Editor/TagCustomStagingArea/RecommendedTags/index.tsx
+++ b/src/components/Editor/TagCustomStagingArea/RecommendedTags/index.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl'
 
-import { Tag } from '~/components'
+import { InlineTag } from '~/components'
 import { SelectTag } from '~/components/SearchSelect/SearchingArea'
 import { EditorRecommendedTagsQuery } from '~/gql/graphql'
 
@@ -30,10 +30,8 @@ const RecommendedTags: React.FC<RecommendedTagsProps> = ({
       <ul className={styles.tagList}>
         {tags.map((tag) => (
           <li key={tag.id}>
-            <Tag
+            <InlineTag
               tag={tag}
-              type="inline"
-              is="span"
               onClick={!disabled ? () => onAddTag(tag) : undefined}
             />
           </li>
diff --git a/src/components/Editor/TagCustomStagingArea/SelectedTags/index.tsx b/src/components/Editor/TagCustomStagingArea/SelectedTags/index.tsx
index 63aefa0cfd..bcbe940121 100644
--- a/src/components/Editor/TagCustomStagingArea/SelectedTags/index.tsx
+++ b/src/components/Editor/TagCustomStagingArea/SelectedTags/index.tsx
@@ -1,4 +1,4 @@
-import { Tag, Translate } from '~/components'
+import { InlineTag, Translate } from '~/components'
 import { SelectTag } from '~/components/SearchSelect/SearchingArea'
 import { EditorRecommendedTagsQuery } from '~/gql/graphql'
 
@@ -23,13 +23,7 @@ const SelectedTags: React.FC<SelectedTagsProps> = ({ tags, onRemoveTag }) => {
       <ul className={styles.tagList}>
         {tags.map((tag) => (
           <li key={tag.id}>
-            <Tag
-              tag={tag}
-              type="inline"
-              active
-              is="span"
-              onRemoveTag={() => onRemoveTag(tag)}
-            />
+            <InlineTag tag={tag} active onRemoveTag={() => onRemoveTag(tag)} />
           </li>
         ))}
       </ul>
diff --git a/src/components/Editor/TagCustomStagingArea/gql.ts b/src/components/Editor/TagCustomStagingArea/gql.ts
index 06ddafdd60..fcdcdb5079 100644
--- a/src/components/Editor/TagCustomStagingArea/gql.ts
+++ b/src/components/Editor/TagCustomStagingArea/gql.ts
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import { Tag } from '~/components'
+import { ListTag } from '~/components/Tag'
 
 export const EDITOR_RECOMMENDED_TAGS = gql`
   query EditorRecommendedTags($userName: String!) {
@@ -16,5 +16,5 @@ export const EDITOR_RECOMMENDED_TAGS = gql`
       }
     }
   }
-  ${Tag.fragments.tag}
+  ${ListTag.fragments.tag}
 `
diff --git a/src/components/Notice/NoticeTag.tsx b/src/components/Notice/NoticeTag.tsx
index 97d034a203..5f7df7aff5 100644
--- a/src/components/Notice/NoticeTag.tsx
+++ b/src/components/Notice/NoticeTag.tsx
@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 import { toPath } from '~/common/utils'
 import { LinkWrapper } from '~/components'
-import { Tag } from '~/components/Tag'
+import { ListTag } from '~/components/Tag'
 import { NoticeTagFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -34,7 +34,7 @@ NoticeTag.fragments = {
       id
       ...DigestTag
     }
-    ${Tag.fragments.tag}
+    ${ListTag.fragments.tag}
   `,
 }
 
diff --git a/src/components/SearchSelect/SearchSelectNode/Tag/index.tsx b/src/components/SearchSelect/SearchSelectNode/Tag/index.tsx
index 7631dbe587..e30a620b48 100644
--- a/src/components/SearchSelect/SearchSelectNode/Tag/index.tsx
+++ b/src/components/SearchSelect/SearchSelectNode/Tag/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { ReactComponent as IconCircleCheckFill } from '@/public/static/icons/24px/circle-check-fill.svg'
 import { ReactComponent as IconCircleEmpty } from '@/public/static/icons/24px/circle-empty.svg'
 import { TEST_ID } from '~/common/enums'
-import { Card, Icon, Tag } from '~/components'
+import { Card, Icon, ListTag } from '~/components'
 import { DigestTagFragment } from '~/gql/graphql'
 
 import styles from '../styles.module.css'
@@ -33,7 +33,7 @@ const SearchSelectTag: React.FC<SearchSelectTagProps> = ({
       testId={TEST_ID.SEARCH_RESULTS_ITEM}
     >
       <section className={nodeClass}>
-        <Tag tag={tag} type="list" hasCount is="span" />
+        <ListTag tag={tag} hasCount is="span" />
 
         <span className={styles.iconSelect}>
           {inStagingArea && selected && (
diff --git a/src/components/SearchSelect/SearchingArea/EditorSearchingArea.tsx b/src/components/SearchSelect/SearchingArea/EditorSearchingArea.tsx
index 114271756b..4cb8bf23b8 100644
--- a/src/components/SearchSelect/SearchingArea/EditorSearchingArea.tsx
+++ b/src/components/SearchSelect/SearchingArea/EditorSearchingArea.tsx
@@ -182,15 +182,13 @@ const EditorSearchingArea: React.FC<SearchingAreaProps> = ({
     // Used to match links of the format like👇
     // https://matters.town/a/{shortHash}
     const regex = new RegExp(
-      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+$`
+      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+`
     )
     if (searchType === 'Article' && isUrl(key) && regex.test(key)) {
       const urlObj = parseURL(key)
       const shortHash = urlObj.pathname.split('/a/')[1].split('?')[0]
       setMode('article_url')
-      lazyArticleUrlQuery({
-        variables: { shortHash },
-      })
+      lazyArticleUrlQuery({ variables: { shortHash } })
     } else {
       const type = searchType
       lazySearch({
diff --git a/src/components/SearchSelect/SearchingArea/gql.ts b/src/components/SearchSelect/SearchingArea/gql.ts
index 48e02e4821..e4ba4e7666 100644
--- a/src/components/SearchSelect/SearchingArea/gql.ts
+++ b/src/components/SearchSelect/SearchingArea/gql.ts
@@ -1,6 +1,8 @@
 import gql from 'graphql-tag'
 
-import { ArticleDigestDropdown, Tag, UserDigest } from './internal'
+import { ArticleTag } from '~/components/Tag'
+
+import { ArticleDigestDropdown, UserDigest } from './internal'
 
 export const SELECT_SEARCH = gql`
   query SelectSearch(
@@ -48,7 +50,7 @@ export const SELECT_SEARCH = gql`
   }
   ${UserDigest.Mini.fragments.user}
   ${ArticleDigestDropdown.fragments.article}
-  ${Tag.fragments.tag}
+  ${ArticleTag.fragments.tag}
 `
 
 export const LIST_VIEWER_ARTICLES = gql`
diff --git a/src/components/SearchSelect/SearchingArea/index.tsx b/src/components/SearchSelect/SearchingArea/index.tsx
index 3e3fac299e..7e91eb95de 100644
--- a/src/components/SearchSelect/SearchingArea/index.tsx
+++ b/src/components/SearchSelect/SearchingArea/index.tsx
@@ -175,15 +175,13 @@ const SearchingArea: React.FC<SearchingAreaProps> = ({
     // Used to match links of the format like👇
     // https://matters.town/a/{shortHash}
     const regex = new RegExp(
-      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+$`
+      `^https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/a/[a-zA-Z0-9]+`
     )
     if (searchType === 'Article' && isUrl(key) && regex.test(key)) {
       const urlObj = parseURL(key)
       const shortHash = urlObj.pathname.split('/a/')[1].split('?')[0]
       setMode('article_url')
-      lazyArticleUrlQuery({
-        variables: { shortHash },
-      })
+      lazyArticleUrlQuery({ variables: { shortHash } })
     } else {
       const type = searchType === 'Invitee' ? 'User' : searchType
       lazySearch({
diff --git a/src/components/Tag/ArticleTag/ArticleTag.test.tsx b/src/components/Tag/ArticleTag/ArticleTag.test.tsx
new file mode 100644
index 0000000000..b4cf2bff06
--- /dev/null
+++ b/src/components/Tag/ArticleTag/ArticleTag.test.tsx
@@ -0,0 +1,20 @@
+import mockRouter from 'next-router-mock'
+import { describe, expect, it, vi } from 'vitest'
+
+import { render, screen } from '~/common/utils/test'
+import { ArticleTag } from '~/components'
+import { MOCK_TAG } from '~/stories/mocks'
+
+describe('<ArticleTag>', () => {
+  it('should render an ArticleTag', () => {
+    const handleClick = vi.fn()
+    render(<ArticleTag tag={MOCK_TAG} onClick={handleClick} />)
+
+    const $name = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
+    expect($name).toBeInTheDocument()
+
+    $name.click()
+    expect(mockRouter.asPath).toContain(MOCK_TAG.slug)
+    expect(handleClick).toBeCalledTimes(1)
+  })
+})
diff --git a/src/components/Tag/ArticleTag/index.tsx b/src/components/Tag/ArticleTag/index.tsx
new file mode 100644
index 0000000000..4c4e7d95ce
--- /dev/null
+++ b/src/components/Tag/ArticleTag/index.tsx
@@ -0,0 +1,65 @@
+import classNames from 'classnames'
+import gql from 'graphql-tag'
+import Link from 'next/link'
+
+import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg'
+import { clampTag, toPath } from '~/common/utils'
+import { Icon, TextIcon, TextIconProps } from '~/components'
+import { DigestTagFragment } from '~/gql/graphql'
+
+import styles from './styles.module.css'
+
+interface ArticleTagProps {
+  tag: DigestTagFragment
+  textIconProps?: TextIconProps
+  canClamp?: boolean
+  onClick?: () => void
+}
+
+export const ArticleTag = ({
+  tag,
+  textIconProps: customTextIconProps,
+  canClamp = false,
+  onClick,
+}: ArticleTagProps) => {
+  const tagClasses = classNames({
+    [styles.article]: 'article',
+    [styles.clickable]: !!onClick,
+  })
+
+  const tagName = canClamp ? clampTag(tag.content) : tag.content
+
+  const path = toPath({
+    page: 'tagDetail',
+    tag,
+  })
+
+  const textIconProps: TextIconProps = {
+    size: 14,
+    spacing: 0,
+    weight: 'normal',
+    icon: <Icon icon={IconHashTag} color="greyDarker" />,
+    ...customTextIconProps,
+  }
+
+  return (
+    <Link {...path} legacyBehavior>
+      <a className={tagClasses} onClick={onClick}>
+        <TextIcon {...textIconProps} size={textIconProps.size} allowUserSelect>
+          <span className={styles.name}>{tagName}</span>
+        </TextIcon>
+      </a>
+    </Link>
+  )
+}
+
+ArticleTag.fragments = {
+  tag: gql`
+    fragment DigestTag on Tag {
+      id
+      content
+      numArticles
+      numAuthors
+    }
+  `,
+}
diff --git a/src/components/Tag/ArticleTag/styles.module.css b/src/components/Tag/ArticleTag/styles.module.css
new file mode 100644
index 0000000000..77770f4658
--- /dev/null
+++ b/src/components/Tag/ArticleTag/styles.module.css
@@ -0,0 +1,27 @@
+.article {
+  @mixin transition;
+
+  display: inline-flex;
+  align-items: center;
+  padding: var(--sp5) var(--sp10) var(--sp5) var(--sp8);
+  color: var(--color-grey-darker);
+  background: var(--color-grey-lighter);
+  border-radius: 0.5rem;
+  transition-property: color, background;
+
+  & .name {
+    @mixin line-clamp;
+    @mixin fix-cropped-letters;
+
+    font-size: var(--text14);
+    line-height: 1.375rem; /* 22px */
+  }
+
+  &:not(.disabled) {
+    &:hover,
+    &:focus {
+      color: var(--color-black);
+      background: var(--color-grey-hover);
+    }
+  }
+}
diff --git a/src/components/Tag/InlineTag/InlineTag.test.tsx b/src/components/Tag/InlineTag/InlineTag.test.tsx
new file mode 100644
index 0000000000..66f67649c9
--- /dev/null
+++ b/src/components/Tag/InlineTag/InlineTag.test.tsx
@@ -0,0 +1,29 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { render, screen } from '~/common/utils/test'
+import { InlineTag } from '~/components'
+import { MOCK_TAG } from '~/stories/mocks'
+
+describe('<InlineTag>', () => {
+  it('should render a Tag', () => {
+    const handleClick = vi.fn()
+    render(<InlineTag tag={MOCK_TAG} onClick={handleClick} />)
+
+    const $name = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
+    expect($name).toBeInTheDocument()
+
+    $name.click()
+    expect(handleClick).toBeCalledTimes(1)
+  })
+
+  it('should render a InlineTag with remove button', () => {
+    const onRemoveTag = vi.fn()
+    render(<InlineTag tag={MOCK_TAG} onRemoveTag={onRemoveTag} />)
+
+    const $remove = screen.getByRole('button', { name: 'Remove' })
+    expect($remove).toBeInTheDocument()
+
+    $remove.click()
+    expect(onRemoveTag).toHaveBeenCalled()
+  })
+})
diff --git a/src/components/Tag/InlineTag/index.tsx b/src/components/Tag/InlineTag/index.tsx
new file mode 100644
index 0000000000..8808fd9556
--- /dev/null
+++ b/src/components/Tag/InlineTag/index.tsx
@@ -0,0 +1,81 @@
+import classNames from 'classnames'
+import gql from 'graphql-tag'
+import { useIntl } from 'react-intl'
+
+import { ReactComponent as IconCircleTimes } from '@/public/static/icons/24px/circle-times-fill.svg'
+import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg'
+import { Icon, TextIcon, TextIconProps } from '~/components'
+import { DigestTagFragment } from '~/gql/graphql'
+
+import styles from './styles.module.css'
+
+interface InlineTagProps {
+  tag: DigestTagFragment
+  textIconProps?: TextIconProps
+  active?: boolean
+  onRemoveTag?: (tag: DigestTagFragment) => void
+  onClick?: () => void
+}
+
+export const InlineTag = ({
+  tag,
+  textIconProps: customTextIconProps,
+  active,
+  onRemoveTag,
+  onClick,
+}: InlineTagProps) => {
+  const intl = useIntl()
+
+  const tagClasses = classNames({
+    [styles.inline]: 'inline',
+    [styles.active]: active,
+    [styles.clickable]: !!onClick,
+    [styles.disabled]: !onClick,
+  })
+
+  const tagName = tag.content
+
+  const textIconProps: TextIconProps = {
+    size: 13,
+    weight: 'normal',
+    spacing: 0,
+    color: active ? 'white' : 'greyDarker',
+    icon: <Icon icon={IconHashTag} color="greyDark" />,
+    placement: 'right',
+    ...customTextIconProps,
+  }
+
+  return (
+    <span className={tagClasses} onClick={onClick}>
+      <TextIcon {...textIconProps} size={textIconProps.size} allowUserSelect>
+        <span className={styles.name}>{tagName}</span>
+      </TextIcon>
+
+      {onRemoveTag && (
+        <button
+          className={styles.close}
+          onClick={() => {
+            onRemoveTag(tag)
+          }}
+          aria-label={intl.formatMessage({
+            defaultMessage: 'Remove',
+            id: 'G/yZLu',
+          })}
+        >
+          <Icon icon={IconCircleTimes} color="grey" />
+        </button>
+      )}
+    </span>
+  )
+}
+
+InlineTag.fragments = {
+  tag: gql`
+    fragment DigestTag on Tag {
+      id
+      content
+      numArticles
+      numAuthors
+    }
+  `,
+}
diff --git a/src/components/Tag/InlineTag/styles.module.css b/src/components/Tag/InlineTag/styles.module.css
new file mode 100644
index 0000000000..3ff6789424
--- /dev/null
+++ b/src/components/Tag/InlineTag/styles.module.css
@@ -0,0 +1,51 @@
+.inline {
+  display: inline-flex;
+  align-items: center;
+  height: 1.25rem;
+  padding: 0 var(--sp8) 0 var(--sp8);
+  line-height: 1.25rem;
+  background: var(--color-grey-lighter);
+  border-radius: 1.25rem;
+
+  &.disabled {
+    & .name {
+      color: var(--color-grey);
+    }
+  }
+
+  & .name {
+    @mixin line-clamp;
+    @mixin fix-cropped-letters;
+
+    line-height: inherit;
+    color: var(--color-black);
+  }
+
+  & .close {
+    display: inline-flex;
+    margin-left: var(--sp2);
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  &.active {
+    background: var(--color-green-lighter);
+
+    & .name {
+      color: var(--color-matters-green);
+    }
+
+    &:not(.disabled) {
+      &:hover,
+      &:focus {
+        background: var(--color-grey-hover);
+      }
+    }
+
+    & svg {
+      opacity: 0.5;
+    }
+  }
+}
diff --git a/src/components/Tag/ListTag/ListTag.test.tsx b/src/components/Tag/ListTag/ListTag.test.tsx
new file mode 100644
index 0000000000..385cb8f7f4
--- /dev/null
+++ b/src/components/Tag/ListTag/ListTag.test.tsx
@@ -0,0 +1,33 @@
+import mockRouter from 'next-router-mock'
+import { describe, expect, it, vi } from 'vitest'
+
+import { cleanup, render, screen } from '~/common/utils/test'
+import { ListTag } from '~/components'
+import { MOCK_TAG } from '~/stories/mocks'
+
+describe('<ListTag>', () => {
+  it('should render a ListTag', () => {
+    const handleClick = vi.fn()
+    render(<ListTag tag={MOCK_TAG} onClick={handleClick} />)
+
+    const $name = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
+    expect($name).toBeInTheDocument()
+
+    const $count = screen.getByText(MOCK_TAG.numArticles)
+    expect($count).toBeInTheDocument()
+
+    $name.click()
+    expect(mockRouter.asPath).toContain(MOCK_TAG.slug)
+    expect(handleClick).toBeCalledTimes(1)
+
+    // render as "span"
+    cleanup()
+    render(<ListTag tag={MOCK_TAG} is="span" onClick={handleClick} />)
+    const $name2 = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
+    expect($name2).toBeInTheDocument()
+    mockRouter.push('/')
+    $name2.click()
+    expect(mockRouter.asPath).toBe('/')
+    expect(handleClick).toBeCalledTimes(2)
+  })
+})
diff --git a/src/components/Tag/ListTag/index.tsx b/src/components/Tag/ListTag/index.tsx
new file mode 100644
index 0000000000..1fcacdfcdb
--- /dev/null
+++ b/src/components/Tag/ListTag/index.tsx
@@ -0,0 +1,87 @@
+import classNames from 'classnames'
+import gql from 'graphql-tag'
+import Link from 'next/link'
+
+import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg'
+import { toPath } from '~/common/utils'
+import { Icon, TextIcon, TextIconProps } from '~/components'
+import { DigestTagFragment } from '~/gql/graphql'
+
+import styles from './styles.module.css'
+
+interface ListTagProps {
+  tag: DigestTagFragment
+  textIconProps?: TextIconProps
+  active?: boolean
+  is?: 'a' | 'span'
+  hasCount?: boolean
+  onClick?: () => void
+}
+
+export const ListTag = ({
+  tag,
+  textIconProps: customTextIconProps,
+  active,
+  is,
+  hasCount = true,
+  onClick,
+}: ListTagProps) => {
+  const tagClasses = classNames({
+    [styles.tag]: true,
+    [styles.list]: 'list',
+    [styles.active]: active,
+    [styles.clickable]: !!onClick,
+    [styles.disabled]: !!(is === 'span') && !onClick,
+  })
+
+  const tagName = tag.content
+
+  const path = toPath({
+    page: 'tagDetail',
+    tag,
+  })
+
+  const textIconProps: TextIconProps = {
+    size: 16,
+    weight: 'normal',
+    spacing: 4,
+    color: 'black',
+    icon: <Icon icon={IconHashTag} color="black" />,
+    placement: 'right',
+    ...customTextIconProps,
+  }
+
+  const Inner = () => (
+    <>
+      <TextIcon {...textIconProps} size={textIconProps.size} allowUserSelect>
+        <span className={styles.name}>{tagName}</span>
+      </TextIcon>
+
+      {hasCount && tag?.numArticles ? (
+        <span className={styles.count}>{tag.numArticles}</span>
+      ) : null}
+    </>
+  )
+  return is !== 'span' ? (
+    <Link {...path} legacyBehavior>
+      <a className={tagClasses} onClick={onClick}>
+        <Inner />
+      </a>
+    </Link>
+  ) : (
+    <span className={tagClasses} onClick={onClick}>
+      <Inner />
+    </span>
+  )
+}
+
+ListTag.fragments = {
+  tag: gql`
+    fragment DigestTag on Tag {
+      id
+      content
+      numArticles
+      numAuthors
+    }
+  `,
+}
diff --git a/src/components/Tag/ListTag/styles.module.css b/src/components/Tag/ListTag/styles.module.css
new file mode 100644
index 0000000000..b660a6ed37
--- /dev/null
+++ b/src/components/Tag/ListTag/styles.module.css
@@ -0,0 +1,27 @@
+.tag .name {
+  @mixin line-clamp;
+  @mixin fix-cropped-letters;
+
+  line-height: inherit;
+}
+
+.list {
+  position: relative;
+  display: block;
+  padding-right: 3rem;
+
+  & .count {
+    @mixin inline-flex-center-all;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    justify-content: flex-end;
+    width: 3rem;
+    font-size: var(--text15);
+    line-height: 1rem;
+    color: var(--color-grey);
+    text-align: right;
+  }
+}
diff --git a/src/components/Tag/PlainTag/PlainTag.test.tsx b/src/components/Tag/PlainTag/PlainTag.test.tsx
new file mode 100644
index 0000000000..871617cac9
--- /dev/null
+++ b/src/components/Tag/PlainTag/PlainTag.test.tsx
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+
+import { cleanup, render, screen } from '~/common/utils/test'
+import { PlainTag } from '~/components'
+import { MOCK_TAG } from '~/stories/mocks'
+
+describe('<PlainTag>', () => {
+  it('should render a PlainTag without count', () => {
+    // not "list" type
+    cleanup()
+    render(<PlainTag tag={MOCK_TAG} />)
+    expect(screen.queryByText(MOCK_TAG.numArticles)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/Tag/PlainTag/index.tsx b/src/components/Tag/PlainTag/index.tsx
new file mode 100644
index 0000000000..0dc778eb1a
--- /dev/null
+++ b/src/components/Tag/PlainTag/index.tsx
@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import gql from 'graphql-tag'
+import Link from 'next/link'
+
+import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg'
+import { toPath } from '~/common/utils'
+import { Icon, TextIcon, TextIconProps } from '~/components'
+import { DigestTagFragment } from '~/gql/graphql'
+
+import styles from './styles.module.css'
+
+export const PlainTag = ({
+  tag,
+  textIconProps: customTextIconProps,
+}: {
+  tag: DigestTagFragment
+  textIconProps?: TextIconProps
+}) => {
+  const tagName = tag.content
+  const tagClasses = classNames({
+    [styles.tag]: true,
+    [styles.plain]: 'plain',
+  })
+
+  const path = toPath({
+    page: 'tagDetail',
+    tag,
+  })
+
+  const textIconProps: TextIconProps = {
+    size: 12,
+    weight: 'normal',
+    spacing: 0,
+    color: 'green',
+    icon: <Icon icon={IconHashTag} color="black" />,
+    placement: 'right',
+    ...customTextIconProps,
+  }
+
+  return (
+    <Link {...path} className={tagClasses}>
+      <TextIcon {...textIconProps} size={textIconProps.size} allowUserSelect>
+        <span className={styles.name}>{tagName}</span>
+      </TextIcon>
+    </Link>
+  )
+}
+
+PlainTag.fragments = {
+  tag: gql`
+    fragment DigestTag on Tag {
+      id
+      content
+      numArticles
+      numAuthors
+    }
+  `,
+}
diff --git a/src/components/Tag/PlainTag/styles.module.css b/src/components/Tag/PlainTag/styles.module.css
new file mode 100644
index 0000000000..624b3e8d33
--- /dev/null
+++ b/src/components/Tag/PlainTag/styles.module.css
@@ -0,0 +1,14 @@
+.tag .name {
+  @mixin line-clamp;
+  @mixin fix-cropped-letters;
+
+  line-height: inherit;
+}
+
+.plain {
+  display: inline-flex;
+
+  & svg {
+    opacity: 0.5;
+  }
+}
diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx
deleted file mode 100644
index cb8da001c9..0000000000
--- a/src/components/Tag/Tag.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import mockRouter from 'next-router-mock'
-import { describe, expect, it, vi } from 'vitest'
-
-import { cleanup, render, screen } from '~/common/utils/test'
-import { Tag } from '~/components'
-import { MOCK_TAG } from '~/stories/mocks'
-
-describe('<Tag>', () => {
-  it('should render a Tag', () => {
-    const handleClick = vi.fn()
-    render(<Tag tag={MOCK_TAG} onClick={handleClick} />)
-
-    const $name = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
-    expect($name).toBeInTheDocument()
-
-    const $count = screen.getByText(MOCK_TAG.numArticles)
-    expect($count).toBeInTheDocument()
-
-    $name.click()
-    expect(mockRouter.asPath).toContain(MOCK_TAG.slug)
-    expect(handleClick).toBeCalledTimes(1)
-
-    // render as "span"
-    cleanup()
-    render(<Tag tag={MOCK_TAG} is="span" onClick={handleClick} />)
-    const $name2 = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
-    expect($name2).toBeInTheDocument()
-    mockRouter.push('/')
-    $name2.click()
-    expect(mockRouter.asPath).toBe('/')
-    expect(handleClick).toBeCalledTimes(2)
-  })
-
-  it('should render a Tag without count', () => {
-    // hasCount is false
-    render(<Tag tag={MOCK_TAG} hasCount={false} />)
-
-    const $name = screen.getByText(new RegExp(MOCK_TAG.content, 'i'))
-    expect($name).toBeInTheDocument()
-
-    const $count = screen.queryByText(MOCK_TAG.numArticles)
-    expect($count).not.toBeInTheDocument()
-
-    // not "list" type
-    cleanup()
-    render(<Tag tag={MOCK_TAG} type="title" />)
-    expect(screen.queryByText(MOCK_TAG.numArticles)).not.toBeInTheDocument()
-  })
-
-  it('should render a Tag with remove button', () => {
-    const onRemoveTag = vi.fn()
-    render(<Tag tag={MOCK_TAG} onRemoveTag={onRemoveTag} />)
-
-    const $remove = screen.getByRole('button', { name: 'Remove' })
-    expect($remove).toBeInTheDocument()
-
-    $remove.click()
-    expect(onRemoveTag).toHaveBeenCalled()
-  })
-})
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index d987994e49..06fc64d658 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -1,40 +1,4 @@
-import classNames from 'classnames'
-import gql from 'graphql-tag'
-import Link from 'next/link'
-import { useIntl } from 'react-intl'
-
-import { ReactComponent as IconTimes } from '@/public/static/icons/24px/times.svg'
-import { clampTag, toPath } from '~/common/utils'
-import { Icon, IconProps, TextIcon, TextIconProps } from '~/components'
-import { DigestTagFragment } from '~/gql/graphql'
-
-import styles from './styles.module.css'
-
-interface TagProps {
-  tag: DigestTagFragment
-  type?: 'list' | 'article' | 'title' | 'inline' | 'plain'
-  iconProps?: IconProps
-  textIconProps?: TextIconProps
-  active?: boolean
-
-  is?: 'a' | 'span'
-  hasCount?: boolean
-  canClamp?: boolean
-
-  onRemoveTag?: (tag: DigestTagFragment) => void
-  onClick?: () => void
-}
-
-const fragments = {
-  tag: gql`
-    fragment DigestTag on Tag {
-      id
-      content
-      numArticles
-      numAuthors
-    }
-  `,
-}
+import type { DigestTagFragment } from '~/gql/graphql'
 
 export const toDigestTagPlaceholder = (content: string) =>
   ({
@@ -49,143 +13,7 @@ export const toDigestTagPlaceholder = (content: string) =>
     numAuthors: 0,
   }) as DigestTagFragment
 
-export const Tag = ({
-  tag,
-  type = 'list',
-  iconProps: customIconProps,
-  textIconProps: customTextIconProps,
-  active,
-  is,
-  hasCount = true,
-  canClamp = false,
-  onRemoveTag,
-  onClick,
-}: TagProps) => {
-  const intl = useIntl()
-
-  const tagClasses = classNames({
-    [styles.tag]: true,
-    [styles[type]]: type,
-    [styles.active]: active,
-    [styles.clickable]: !!onClick,
-    [styles.disabled]: !!(is === 'span') && !onClick,
-  })
-
-  const tagName = canClamp ? clampTag(tag.content) : tag.content
-
-  const path = toPath({
-    page: 'tagDetail',
-    tag,
-  })
-
-  let iconProps: IconProps = {}
-  let textIconProps: TextIconProps = {}
-
-  // default styles based on type
-  switch (type) {
-    case 'list':
-      iconProps = {
-        color: 'grey',
-      }
-      textIconProps = {
-        size: 16,
-        weight: 'normal',
-        spacing: 4,
-        color: 'black',
-      }
-      break
-    case 'title':
-      iconProps = {
-        color: 'white',
-        size: 24,
-      }
-      textIconProps = {
-        size: 20,
-        weight: 'medium',
-        spacing: 0,
-        color: 'white',
-      }
-      break
-    case 'article':
-      textIconProps = {
-        size: 14,
-        weight: 'normal',
-      }
-      break
-    case 'inline':
-      iconProps = {
-        color: active ? 'green' : 'grey',
-      }
-      textIconProps = {
-        size: 13,
-        weight: 'normal',
-        spacing: 4,
-        color: active ? 'white' : 'greyDarker',
-      }
-      break
-    case 'plain':
-      textIconProps = {
-        size: 12,
-        weight: 'normal',
-        spacing: 0,
-        color: 'green',
-      }
-      break
-  }
-
-  // overwrite default styles with custom props
-  iconProps = {
-    ...iconProps,
-    ...customIconProps,
-  }
-  textIconProps = {
-    ...textIconProps,
-    ...customTextIconProps,
-  }
-
-  const Inner = () => (
-    <>
-      <TextIcon {...textIconProps} size={textIconProps.size} allowUserSelect>
-        <span className={styles.name}>#&nbsp;{tagName}</span>
-      </TextIcon>
-
-      {onRemoveTag && (
-        <button
-          className={styles.close}
-          onClick={() => {
-            onRemoveTag(tag)
-          }}
-          aria-label={intl.formatMessage({
-            defaultMessage: 'Remove',
-            id: 'Ayepqz',
-            description: 'src/components/Tag/index.tsx',
-          })}
-        >
-          <Icon icon={IconTimes} color="grey" />
-        </button>
-      )}
-
-      {hasCount && type === 'list' && tag?.numArticles ? (
-        <span className={styles.count}>{tag.numArticles}</span>
-      ) : null}
-    </>
-  )
-
-  if (is === 'span') {
-    return (
-      <span className={tagClasses} onClick={onClick}>
-        <Inner />
-      </span>
-    )
-  }
-
-  return (
-    <Link {...path} legacyBehavior>
-      <a className={tagClasses} onClick={onClick}>
-        <Inner />
-      </a>
-    </Link>
-  )
-}
-
-Tag.fragments = fragments
+export { ArticleTag } from './ArticleTag'
+export { InlineTag } from './InlineTag'
+export { ListTag } from './ListTag'
+export { PlainTag } from './PlainTag'
diff --git a/src/components/Tag/styles.module.css b/src/components/Tag/styles.module.css
deleted file mode 100644
index e53599d614..0000000000
--- a/src/components/Tag/styles.module.css
+++ /dev/null
@@ -1,121 +0,0 @@
-.tag .name {
-  @mixin line-clamp;
-  @mixin fix-cropped-letters;
-
-  line-height: inherit;
-}
-
-.list {
-  position: relative;
-  display: block;
-  padding-right: 3rem;
-
-  & .count {
-    @mixin inline-flex-center-all;
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    justify-content: flex-end;
-    width: 3rem;
-    font-size: var(--text15);
-    line-height: 1rem;
-    color: var(--color-grey);
-    text-align: right;
-  }
-}
-
-.title {
-  display: inline-flex;
-  line-height: 1.5rem;
-
-  & svg {
-    margin-right: var(--sp2);
-    opacity: 0.35;
-  }
-}
-
-.inline {
-  display: inline-flex;
-  align-items: center;
-  height: 1.25rem;
-  padding: 0 var(--sp8) 0 var(--sp8);
-  line-height: 1.25rem;
-  background: var(--color-grey-lighter);
-  border-radius: 1.25rem;
-
-  &.disabled {
-    & .name {
-      color: var(--color-grey);
-    }
-  }
-
-  & .name {
-    color: var(--color-black);
-  }
-
-  & .close {
-    display: inline-flex;
-    margin-right: -3px;
-    margin-left: 3px;
-  }
-
-  &.clickable {
-    cursor: pointer;
-  }
-
-  &.active {
-    background: var(--color-green-lighter);
-
-    & .name {
-      color: var(--color-matters-green);
-    }
-
-    &:not(.disabled) {
-      &:hover,
-      &:focus {
-        background: var(--color-grey-hover);
-      }
-    }
-
-    & svg {
-      opacity: 0.5;
-    }
-  }
-}
-
-.plain {
-  display: inline-flex;
-
-  & svg {
-    opacity: 0.5;
-  }
-}
-
-.article {
-  @mixin transition;
-
-  display: inline-flex;
-  align-items: center;
-  padding: var(--sp5) var(--sp10) var(--sp5) var(--sp8);
-  color: var(--color-grey-darker);
-  background: var(--color-grey-lighter);
-  border-radius: 0.5rem;
-  transition-property: color, background;
-
-  & .name {
-    font-size: var(--text14);
-    line-height: 1.375rem; /* 22px */
-  }
-
-  &.active {
-    &:not(.disabled) {
-      &:hover,
-      &:focus {
-        color: var(--color-black);
-        background: var(--color-grey-hover);
-      }
-    }
-  }
-}
diff --git a/src/components/TagDigest/Feed/Feed.test.tsx b/src/components/TagDigest/Feed/Feed.test.tsx
index a3b60706f6..764610a36e 100644
--- a/src/components/TagDigest/Feed/Feed.test.tsx
+++ b/src/components/TagDigest/Feed/Feed.test.tsx
@@ -15,7 +15,7 @@ describe('<TagDigest.Feed>', () => {
     $digest.click()
     expect(mockRouter.asPath).toContain(MOCK_TAG.slug)
 
-    const $name = screen.getByText(MOCK_TAG.content)
+    const $name = screen.getAllByText(MOCK_TAG.content)[0] // duplicated items in the mock
     expect($name).toBeInTheDocument()
 
     const $articleCount = screen.getByText(MOCK_TAG.numArticles)
diff --git a/src/components/TagDigest/Feed/index.tsx b/src/components/TagDigest/Feed/index.tsx
index bc3d72fc98..e33809eae7 100644
--- a/src/components/TagDigest/Feed/index.tsx
+++ b/src/components/TagDigest/Feed/index.tsx
@@ -1,4 +1,3 @@
-import { VisuallyHidden } from '@reach/visually-hidden'
 import gql from 'graphql-tag'
 import Link from 'next/link'
 
@@ -11,8 +10,8 @@ import {
   Card,
   CardProps,
   Icon,
+  PlainTag,
   ResponsiveImage,
-  Tag,
   TextIcon,
 } from '~/components'
 import { TagDigestFeedTagFragment } from '~/gql/graphql'
@@ -70,10 +69,8 @@ const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => {
     >
       <section className={styles.container}>
         <header className={styles.header}>
-          <Tag
+          <PlainTag
             tag={tag}
-            type="plain"
-            iconProps={{ color: 'greyDarker' }}
             textIconProps={{ color: 'black', weight: 'medium', size: 14 }}
           />
 
@@ -120,9 +117,6 @@ const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => {
           >
             <Link {...path} legacyBehavior>
               <a>
-                <VisuallyHidden>
-                  <span>{tag.content}</span>
-                </VisuallyHidden>
                 <ResponsiveImage
                   url={tag.cover || IMAGE_TAG_COVER.src}
                   width={144}
diff --git a/src/components/TagDigest/Sidebar/Sidebar.test.tsx b/src/components/TagDigest/Sidebar/Sidebar.test.tsx
index 9baabbef82..e36b6e87d0 100644
--- a/src/components/TagDigest/Sidebar/Sidebar.test.tsx
+++ b/src/components/TagDigest/Sidebar/Sidebar.test.tsx
@@ -15,7 +15,7 @@ describe('<TagDigest.Sidebar>', () => {
     $digest.click()
     expect(mockRouter.asPath).toContain(MOCK_TAG.slug)
 
-    const $name = screen.getByText(MOCK_TAG.content)
+    const $name = screen.getAllByText(MOCK_TAG.content)[0] // duplicated items in the mock
     expect($name).toBeInTheDocument()
 
     const $articleCount = screen.getByText(MOCK_TAG.numArticles)
diff --git a/src/components/TagDigest/Sidebar/index.tsx b/src/components/TagDigest/Sidebar/index.tsx
index a9450108ac..db9821ca19 100644
--- a/src/components/TagDigest/Sidebar/index.tsx
+++ b/src/components/TagDigest/Sidebar/index.tsx
@@ -1,4 +1,3 @@
-import { VisuallyHidden } from '@reach/visually-hidden'
 import gql from 'graphql-tag'
 import Link from 'next/link'
 
@@ -11,8 +10,8 @@ import {
   Card,
   CardProps,
   Icon,
+  PlainTag,
   ResponsiveImage,
-  Tag,
   TextIcon,
 } from '~/components'
 import { TagDigestSidebarTagFragment } from '~/gql/graphql'
@@ -59,9 +58,6 @@ const Sidebar = ({ tag, ...cardProps }: TagDigestSidebarProps) => {
         >
           <Link {...path} legacyBehavior>
             <a>
-              <VisuallyHidden>
-                <span>{tag.content}</span>
-              </VisuallyHidden>
               <ResponsiveImage
                 url={tag.cover || IMAGE_TAG_COVER.src}
                 width={144}
@@ -74,10 +70,8 @@ const Sidebar = ({ tag, ...cardProps }: TagDigestSidebarProps) => {
 
         <section className={styles.content}>
           <header className={styles.header}>
-            <Tag
+            <PlainTag
               tag={tag}
-              type="plain"
-              iconProps={{ color: 'greyDarker' }}
               textIconProps={{ color: 'black', weight: 'medium', size: 14 }}
             />
           </header>
diff --git a/src/views/ArticleDetail/AppreciationButton/gql.ts b/src/views/ArticleDetail/AppreciationButton/gql.ts
index 56b14eacf0..0c192ed18a 100644
--- a/src/views/ArticleDetail/AppreciationButton/gql.ts
+++ b/src/views/ArticleDetail/AppreciationButton/gql.ts
@@ -31,6 +31,8 @@ export const APPRECIATE_ARTICLE = gql`
   mutation AppreciateArticle($id: ID!, $amount: amount_Int_NotNull_min_1!) {
     appreciateArticle(input: { id: $id, amount: $amount }) {
       id
+      likesReceivedTotal: appreciationsReceivedTotal
+      appreciateLeft
     }
   }
 `
diff --git a/src/views/ArticleDetail/AppreciationButton/index.tsx b/src/views/ArticleDetail/AppreciationButton/index.tsx
index 3875f813c0..5c1fa89bce 100644
--- a/src/views/ArticleDetail/AppreciationButton/index.tsx
+++ b/src/views/ArticleDetail/AppreciationButton/index.tsx
@@ -3,7 +3,6 @@ import { useDebouncedCallback } from 'use-debounce'
 
 import { APPRECIATE_DEBOUNCE, Z_INDEX } from '~/common/enums'
 import {
-  ArticleAppreciationContext,
   ButtonProps,
   Tooltip,
   Translate,
@@ -44,21 +43,34 @@ const AppreciationButton = ({
   ...buttonProps
 }: AppreciationButtonProps) => {
   const viewer = useContext(ViewerContext)
-  const { likesReceivedTotal, appreciateLeft, incrementLikesReceivedTotal } =
-    useContext(ArticleAppreciationContext)
-
   const [amount, setAmount] = useState(0)
-
   const [sendAppreciation] =
     useMutation<AppreciateArticleMutation>(APPRECIATE_ARTICLE)
+
   const limit = article.appreciateLimit
-  const left = appreciateLeft
-  const total = likesReceivedTotal
+  const left =
+    (typeof article.appreciateLeft === 'number'
+      ? article.appreciateLeft
+      : limit) - amount
+  const total = article.likesReceivedTotal + amount
   const appreciatedCount = limit - left
   const isReachLimit = left <= 0
   const debouncedSendAppreciation = useDebouncedCallback(async () => {
     try {
-      await sendAppreciation({ variables: { id: article.id, amount } })
+      await sendAppreciation({
+        variables: { id: article.id, amount },
+        optimisticResponse: {
+          appreciateArticle: {
+            id: article.id,
+            likesReceivedTotal: total,
+            appreciateLeft: left,
+            __typename: 'Article',
+          },
+        },
+        update: () => {
+          setAmount(0)
+        },
+      })
     } catch (e) {
       console.error(e)
     }
@@ -66,7 +78,6 @@ const AppreciationButton = ({
 
   const appreciate = () => {
     setAmount(amount + 1)
-    incrementLikesReceivedTotal()
     debouncedSendAppreciation()
   }
 
diff --git a/src/views/ArticleDetail/Comments/CommentsDialog/index.tsx b/src/views/ArticleDetail/Comments/CommentsDialog/index.tsx
index 2eb277447b..b88e23b437 100644
--- a/src/views/ArticleDetail/Comments/CommentsDialog/index.tsx
+++ b/src/views/ArticleDetail/Comments/CommentsDialog/index.tsx
@@ -14,8 +14,7 @@ type Step = 'commentList' | 'commentDetail'
 interface CommentsDialogProps {
   id: string
   lock: boolean
-  children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
-  step?: Step
+  initStep?: Step
 
   articleDetails: NonNullable<ArticleDetailPublicQuery['article']>
   translated: boolean
@@ -44,8 +43,7 @@ const DynamicDetailContent = dynamic(() => import('./DetailContent'), {
 const BaseCommentsDialogDialog = ({
   id,
   lock,
-  children,
-  step: _step = 'commentList',
+  initStep = 'commentList',
 
   articleDetails,
   translated,
@@ -55,16 +53,16 @@ const BaseCommentsDialogDialog = ({
   openCommentsDialog,
 }: CommentsDialogProps) => {
   const { show, openDialog, closeDialog } = useDialogSwitch(true)
-  const [step, setStep] = useState<Step>(_step)
+  const [step, setStep] = useState<Step>(initStep)
   const isInCommentDetail = step === 'commentDetail'
   const isInCommentList = step === 'commentList'
 
   const backToCommentList = () => setStep('commentList')
 
+  useEventListener(OPEN_COMMENT_DETAIL_DIALOG, openDialog)
+
   return (
     <>
-      {children({ openDialog })}
-
       <Dialog
         isOpen={show}
         onDismiss={() => {
@@ -132,16 +130,25 @@ const BaseCommentsDialogDialog = ({
 export const CommentsDialog = (props: CommentsDialogProps) => {
   const [step, setStep] = useState<Step>('commentList')
   const Children = ({ openDialog }: { openDialog: () => void }) => {
-    useEventListener(OPEN_COMMENT_DETAIL_DIALOG, () => {
-      setStep('commentDetail')
-      setTimeout(() => {
-        openDialog()
-      })
-    })
-    return <>{props.children && props.children({ openDialog })}</>
+    useEventListener(
+      OPEN_COMMENT_DETAIL_DIALOG,
+      (detail?: { parentId: string }) => {
+        if (detail?.parentId) {
+          setStep('commentDetail')
+          setTimeout(() => {
+            openDialog()
+          })
+        } else {
+          openDialog()
+        }
+      }
+    )
+    return <></>
   }
   return (
-    <Dialog.Lazy mounted={<BaseCommentsDialogDialog {...props} step={step} />}>
+    <Dialog.Lazy
+      mounted={<BaseCommentsDialogDialog {...props} initStep={step} />}
+    >
       {({ openDialog }) => <Children openDialog={openDialog} />}
     </Dialog.Lazy>
   )
diff --git a/src/views/ArticleDetail/Edit/Header/gql.ts b/src/views/ArticleDetail/Edit/Header/gql.ts
index 4fe93421dd..8f29dd749e 100644
--- a/src/views/ArticleDetail/Edit/Header/gql.ts
+++ b/src/views/ArticleDetail/Edit/Header/gql.ts
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
-import { Tag } from '~/components'
 import articleFragments from '~/components/GQL/fragments/article'
+import { ArticleTag } from '~/components/Tag'
 
 export const EDIT_ARTICLE = gql`
   mutation EditArticle(
@@ -60,6 +60,6 @@ export const EDIT_ARTICLE = gql`
       ...ArticleCollection
     }
   }
-  ${Tag.fragments.tag}
+  ${ArticleTag.fragments.tag}
   ${articleFragments.articleCollection}
 `
diff --git a/src/views/ArticleDetail/Edit/gql.ts b/src/views/ArticleDetail/Edit/gql.ts
index 04386c575a..abf13ad251 100644
--- a/src/views/ArticleDetail/Edit/gql.ts
+++ b/src/views/ArticleDetail/Edit/gql.ts
@@ -1,8 +1,9 @@
 import gql from 'graphql-tag'
 
-import { CircleDigest, Tag } from '~/components'
+import { CircleDigest } from '~/components'
 import articleFragments from '~/components/GQL/fragments/article'
 import assetFragment from '~/components/GQL/fragments/asset'
+import { ArticleTag } from '~/components/Tag'
 
 export const GET_EDIT_ARTICLE = gql`
   query QueryEditArticle(
@@ -60,7 +61,7 @@ export const GET_EDIT_ARTICLE = gql`
     }
   }
   ${assetFragment}
-  ${Tag.fragments.tag}
+  ${ArticleTag.fragments.tag}
   ${articleFragments.articleCollection}
   ${CircleDigest.Rich.fragments.circle.public}
 `
diff --git a/src/views/ArticleDetail/History/index.tsx b/src/views/ArticleDetail/History/index.tsx
index 29c68f389c..5e97036cf4 100644
--- a/src/views/ArticleDetail/History/index.tsx
+++ b/src/views/ArticleDetail/History/index.tsx
@@ -228,7 +228,7 @@ const ArticleDetailHistory = ({ latestVersion }: { latestVersion: string }) => {
     await client.query({
       query: ARTICLE_HISTORY_PRIVATE,
       fetchPolicy: 'network-only',
-      variables: { id: article?.id, version: currVersion },
+      variables: { shortHash: article.shortHash, version: currVersion },
     })
   }
 
@@ -236,7 +236,7 @@ const ArticleDetailHistory = ({ latestVersion }: { latestVersion: string }) => {
     ;(async () => {
       await loadPrivate()
     })()
-  }, [article?.id, currVersion])
+  }, [article?.shortHash, currVersion])
 
   /**
    * Render:Loading
diff --git a/src/views/ArticleDetail/TagList/index.tsx b/src/views/ArticleDetail/TagList/index.tsx
index 63356f2a7b..97997547f8 100644
--- a/src/views/ArticleDetail/TagList/index.tsx
+++ b/src/views/ArticleDetail/TagList/index.tsx
@@ -3,7 +3,12 @@ import gql from 'graphql-tag'
 import { ReactComponent as IconMore } from '@/public/static/icons/24px/more.svg'
 import { TEST_ID } from '~/common/enums'
 import { analytics } from '~/common/utils'
-import { Icon, Tag, TagExposureTracker, TagListDialog } from '~/components'
+import {
+  ArticleTag,
+  Icon,
+  TagExposureTracker,
+  TagListDialog,
+} from '~/components'
 import { TagListArticleFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -15,7 +20,7 @@ const fragments = {
         ...DigestTag
       }
     }
-    ${Tag.fragments.tag}
+    ${ArticleTag.fragments.tag}
   `,
 }
 
@@ -29,9 +34,8 @@ const TagList = ({ article }: { article: TagListArticleFragment }) => {
       <ul className={styles.list}>
         {article.tags.slice(0, 3).map((tag, i) => (
           <li key={tag.id} className={styles.listItem}>
-            <Tag
+            <ArticleTag
               tag={tag}
-              type="article"
               onClick={() => {
                 analytics.trackEvent('click_button', {
                   type: 'click_tag',
@@ -39,7 +43,6 @@ const TagList = ({ article }: { article: TagListArticleFragment }) => {
                 })
               }}
               canClamp
-              active
             />
             <TagExposureTracker location={i} id={tag.id} horizontal />
           </li>
diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
index 3fb2e7489e..d41b9211de 100644
--- a/src/views/ArticleDetail/index.tsx
+++ b/src/views/ArticleDetail/index.tsx
@@ -16,8 +16,6 @@ import {
 } from '~/common/utils'
 import {
   ActiveCommentEditorProvider,
-  ArticleAppreciationContext,
-  ArticleAppreciationProvider,
   BackToHomeButton,
   BackToHomeMobileButton,
   EmptyLayout,
@@ -113,9 +111,6 @@ const BaseArticleDetail = ({
 
   const { routerLang } = useRoute()
   const viewer = useContext(ViewerContext)
-  const { initArticleAppreciationContext } = useContext(
-    ArticleAppreciationContext
-  )
 
   const features = useFeatures()
 
@@ -124,22 +119,12 @@ const BaseArticleDetail = ({
   )
 
   // Float toolbar
-  const [showFloatToolbar, setShowFloatToolbar] = useState(true)
-  const {
-    isIntersecting: isIntersectingDesktopToolbar,
-    ref: desktopToolbarRef,
-  } = useIntersectionObserver()
-  useEffect(() => {
-    setShowFloatToolbar(!isIntersectingDesktopToolbar)
-  }, [isIntersectingDesktopToolbar])
+  const { isIntersecting: hideFloatToolbar, ref: desktopToolbarRef } =
+    useIntersectionObserver()
 
   // Comment toolbar
-  const [showCommentToolbar, setShowCommentToolbar] = useState(false)
-  const { isIntersecting: isIntersectingComments, ref: commentsRef } =
+  const { isIntersecting: showCommentToolbar, ref: commentsRef } =
     useIntersectionObserver()
-  useEffect(() => {
-    setShowCommentToolbar(isIntersectingComments)
-  }, [isIntersectingComments])
 
   // Comment
   const [commentDrawerStep, setCommentDrawerStep] = useState<CommentDrawerStep>(
@@ -233,13 +218,6 @@ const BaseArticleDetail = ({
     }
   }, [])
 
-  useEffect(() => {
-    initArticleAppreciationContext(
-      article.likesReceivedTotal,
-      article.appreciateLeft
-    )
-  }, [article.appreciateLeft, article.likesReceivedTotal])
-
   // set language cookie for anonymous if it doesn't exist
   useEffect(() => {
     if (cookieLang || viewer.isAuthed || !routerLang) {
@@ -256,7 +234,11 @@ const BaseArticleDetail = ({
     }
     setTimeout(() => {
       setIsOpenComment(true)
-      window.dispatchEvent(new CustomEvent(OPEN_COMMENT_DETAIL_DIALOG))
+      window.dispatchEvent(
+        new CustomEvent(OPEN_COMMENT_DETAIL_DIALOG, {
+          detail: { parentId },
+        })
+      )
     }, 500)
   }, [parentId])
 
@@ -443,52 +425,28 @@ const BaseArticleDetail = ({
           privateFetched={privateFetched}
           lock={lock}
           showCommentToolbar={showCommentToolbar}
-        >
-          {({ openDialog: openCommentsDialog }) => (
-            <FixedToolbar
-              articleDetails={article}
-              translated={translated}
-              translatedLanguage={translatedLanguage}
-              privateFetched={privateFetched}
-              lock={lock}
-              showCommentToolbar={showCommentToolbar && article.canComment}
-              openCommentsDialog={
-                article.commentCount > 0 ? openCommentsDialog : undefined
-              }
-            />
-          )}
-        </CommentsDialog>
-      </Media>
-
-      <Media at="md">
-        <Spacer size="xloose" />
-        <FloatToolbar
-          show={true}
+        />
+        <FixedToolbar
           articleDetails={article}
+          translated={translated}
+          translatedLanguage={translatedLanguage}
           privateFetched={privateFetched}
           lock={lock}
-          toggleCommentDrawer={() => {
-            analytics.trackEvent('click_button', {
-              type: isOpenComment ? 'comment_close' : 'comment_open',
-              pageType: 'article_detail',
-              pageComponent: 'article_float_toolbar',
-            })
-            toggleCommentDrawer()
-          }}
-          toggleDonationDrawer={() => {
-            analytics.trackEvent('click_button', {
-              type: isOpenDonationDrawer ? 'support_close' : 'support_open',
-              pageType: 'article_detail',
-              pageComponent: 'article_float_toolbar',
-            })
-            toggleDonationDrawer()
-          }}
+          showCommentToolbar={showCommentToolbar && article.canComment}
+          openCommentsDialog={
+            article.commentCount > 0
+              ? () =>
+                  window.dispatchEvent(
+                    new CustomEvent(OPEN_COMMENT_DETAIL_DIALOG)
+                  )
+              : undefined
+          }
         />
       </Media>
 
-      <Media greaterThanOrEqual="lg">
+      <Media greaterThan="sm">
         <FloatToolbar
-          show={showFloatToolbar}
+          show={!hideFloatToolbar}
           articleDetails={article}
           privateFetched={privateFetched}
           lock={lock}
@@ -645,11 +603,9 @@ const ArticleDetail = ({
    * Render:Article
    */
   return (
-    <ArticleAppreciationProvider>
-      <ActiveCommentEditorProvider>
-        <BaseArticleDetail article={article} privateFetched={privateFetched} />
-      </ActiveCommentEditorProvider>
-    </ArticleAppreciationProvider>
+    <ActiveCommentEditorProvider>
+      <BaseArticleDetail article={article} privateFetched={privateFetched} />
+    </ActiveCommentEditorProvider>
   )
 }
 
diff --git a/src/views/Follow/Feed/UserAddArticleTagActivity/gql.ts b/src/views/Follow/Feed/UserAddArticleTagActivity/gql.ts
index 41343b2f7d..b549ef1c04 100644
--- a/src/views/Follow/Feed/UserAddArticleTagActivity/gql.ts
+++ b/src/views/Follow/Feed/UserAddArticleTagActivity/gql.ts
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import { ArticleDigestFeed, Tag, UserDigest } from '~/components'
+import { ArticleDigestFeed, ArticleTag, UserDigest } from '~/components'
 
 import UnfollowTag from '../DropdownActions/UnfollowTag'
 
@@ -20,7 +20,7 @@ export const fragments = gql`
     }
   }
   ${UserDigest.Plain.fragments.user}
-  ${Tag.fragments.tag}
+  ${ArticleTag.fragments.tag}
   ${UnfollowTag.fragments.tag.private}
   ${ArticleDigestFeed.fragments.article.public}
   ${ArticleDigestFeed.fragments.article.private}
diff --git a/src/views/Follow/Feed/UserAddArticleTagActivity/index.tsx b/src/views/Follow/Feed/UserAddArticleTagActivity/index.tsx
index 3428514308..c49c48b039 100644
--- a/src/views/Follow/Feed/UserAddArticleTagActivity/index.tsx
+++ b/src/views/Follow/Feed/UserAddArticleTagActivity/index.tsx
@@ -1,5 +1,5 @@
 import { analytics } from '~/common/utils'
-import { ArticleDigestFeed, CardExposureTracker, Tag } from '~/components'
+import { ArticleDigestFeed, CardExposureTracker, PlainTag } from '~/components'
 import { UserAddArticleTagActivityFragment } from '~/gql/graphql'
 
 import { fragments } from './gql'
@@ -13,7 +13,7 @@ const UserAddArticleTagActivity = ({
   <>
     <ArticleDigestFeed
       article={node}
-      tag={<Tag tag={target} type="plain" iconProps={{ size: 14 }} />}
+      tag={<PlainTag tag={target} />}
       onClick={() => {
         analytics.trackEvent('click_feed', {
           type: 'following',
diff --git a/src/views/Home/Sidebar/Tags/index.tsx b/src/views/Home/Sidebar/Tags/index.tsx
index 797451858d..955cd6ab8a 100644
--- a/src/views/Home/Sidebar/Tags/index.tsx
+++ b/src/views/Home/Sidebar/Tags/index.tsx
@@ -5,10 +5,10 @@ import { useContext } from 'react'
 import { analytics } from '~/common/utils'
 import {
   List,
+  ListTag,
   QueryError,
   ShuffleButton,
   SpinnerBlock,
-  Tag,
   TagDigest,
   usePublicQuery,
   ViewerContext,
@@ -41,7 +41,7 @@ const SIDEBAR_TAGS = gql`
       }
     }
   }
-  ${Tag.fragments.tag}
+  ${ListTag.fragments.tag}
 `
 
 const Tags = () => {
diff --git a/src/views/TagDetail/Cover/index.tsx b/src/views/TagDetail/Cover/index.tsx
index d4adc2254b..488d0980dd 100644
--- a/src/views/TagDetail/Cover/index.tsx
+++ b/src/views/TagDetail/Cover/index.tsx
@@ -1,17 +1,15 @@
 import classNames from 'classnames'
 import gql from 'graphql-tag'
 
+import { ReactComponent as IconHashTag } from '@/public/static/icons/24px/hashtag.svg'
 import IMAGE_TAG_COVER from '@/public/static/images/tag-cover.png'
-import { Cover, Tag } from '~/components'
+import { Cover } from '~/components'
+import { Icon, TextIcon } from '~/components'
 import { CoverTagFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
 
-interface TagCoverProps {
-  tag: CoverTagFragment
-}
-
-const TagCover = ({ tag }: TagCoverProps) => {
+const TagCover = ({ tag }: { tag: CoverTagFragment }) => {
   const titleClasses = classNames({
     [styles.title]: true,
     [styles.mask]: !!tag.cover,
@@ -21,7 +19,24 @@ const TagCover = ({ tag }: TagCoverProps) => {
     <Cover cover={tag.cover} fallbackCover={IMAGE_TAG_COVER.src}>
       <div className={titleClasses}>
         <div className={styles.content}>
-          <Tag tag={tag} type="title" is="span" />
+          <span
+            className={classNames({
+              [styles.tag]: true,
+              [styles.disabled]: true,
+            })}
+          >
+            <TextIcon
+              size={20}
+              weight="medium"
+              spacing={0}
+              color="white"
+              icon={<Icon icon={IconHashTag} color="white" />}
+              placement="right"
+              allowUserSelect
+            >
+              <span className={styles.name}>{tag.content}</span>
+            </TextIcon>
+          </span>
         </div>
       </div>
     </Cover>
@@ -33,9 +48,16 @@ TagCover.fragments = {
     fragment CoverTag on Tag {
       id
       cover
-      ...DigestTag
+      content
+      numArticles
+      numAuthors
+    }
+    fragment DigestTag on Tag {
+      id
+      content
+      numArticles
+      numAuthors
     }
-    ${Tag.fragments.tag}
   `,
 }
 
diff --git a/src/views/TagDetail/Cover/styles.module.css b/src/views/TagDetail/Cover/styles.module.css
index 96a8605682..1adddde5ad 100644
--- a/src/views/TagDetail/Cover/styles.module.css
+++ b/src/views/TagDetail/Cover/styles.module.css
@@ -33,3 +33,19 @@
     background: rgb(0 0 0 / 35%);
   }
 }
+
+.tag {
+  & .name {
+    @mixin line-clamp;
+    @mixin fix-cropped-letters;
+
+    line-height: inherit;
+  }
+
+  display: inline-flex;
+  line-height: 1.5rem;
+
+  & svg {
+    margin-right: var(--sp2);
+  }
+}