diff --git a/public/icons/static/emotion/alien-fill.svg b/public/icons/static/emotion/alien-fill.svg
new file mode 100644
index 000000000..70401f099
--- /dev/null
+++ b/public/icons/static/emotion/alien-fill.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617974738665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18383" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 85.333333a362.666667 362.666667 0 0 1 362.666667 362.666667c0 277.333333-234.666667 512-362.666667 512s-362.666667-234.666667-362.666667-512A362.666667 362.666667 0 0 1 512 85.333333z m234.666667 426.666667a192 192 0 0 0-190.933334 212.266667 192 192 0 0 0 211.2-211.2A194.218667 194.218667 0 0 0 746.666667 512z m-469.333334 0c-6.826667 0-13.610667 0.341333-20.266666 1.066667a192 192 0 0 0 211.2 211.2A192 192 0 0 0 277.333333 512z" p-id="18384"></path></svg>
\ No newline at end of file
diff --git a/src/containers/unit/Comments/Comment/Actions.tsx b/src/containers/unit/Comments/Comment/Actions.tsx
index c84dcb56d..d8a301747 100755
--- a/src/containers/unit/Comments/Comment/Actions.tsx
+++ b/src/containers/unit/Comments/Comment/Actions.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 
 import type { TAccount, TComment } from '@/spec'
 
+import DotDivider from '@/components/DotDivider'
+import { SpaceGrow } from '@/components/Common'
+
 import { Wrapper, ReplyAction } from '../styles/comment/actions'
 import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
@@ -23,6 +26,14 @@ const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
   return (
     <Wrapper>
       <ReplyAction onClick={() => openReplyEditor(data)}>回复</ReplyAction>
+      <SpaceGrow />
+      <ReplyAction>分享</ReplyAction>
+      <DotDivider radius={3} space={6} />
+      <ReplyAction>引用</ReplyAction>
+      <DotDivider radius={3} space={6} />
+      <ReplyAction>折叠</ReplyAction>
+      <DotDivider radius={3} space={6} />
+      <ReplyAction>举报</ReplyAction>
     </Wrapper>
   )
 }
diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx
index e58ab8010..ce4d1ee09 100644
--- a/src/containers/unit/Comments/Comment/DesktopView.tsx
+++ b/src/containers/unit/Comments/Comment/DesktopView.tsx
@@ -6,7 +6,7 @@ import { Global } from '@/utils'
 
 import MarkDownRender from '@/components/MarkDownRender'
 
-import UpInfo from './UpInfo'
+import Upvote from './Upvote'
 import Header from './Header'
 import ReplyBar from './ReplyBar'
 import DeleteMask from './DeleteMask'
@@ -37,7 +37,7 @@ const Comment: React.FC<TProps> = ({ data, tobeDeleteId, accountInfo }) => {
     <Wrapper>
       <DeleteMask show={data.id === tobeDeleteId} />
       <CommentWrapper tobeDelete={data.id === tobeDeleteId}>
-        <UpInfo data={data} />
+        <Upvote data={data} />
 
         <CommentBodyInfo onMouseUp={getSelection}>
           <Header data={data} />
diff --git a/src/containers/unit/Comments/Comment/Emotion.tsx b/src/containers/unit/Comments/Comment/Emotion.tsx
new file mode 100644
index 000000000..9a51b994c
--- /dev/null
+++ b/src/containers/unit/Comments/Comment/Emotion.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+
+import { Wrapper, SelectorIcon } from '../styles/comment/emotion'
+
+const Emotion: React.FC = () => (
+  <Wrapper>
+    <SelectorIcon src={`${ICON}/emotion/alien-fill.svg`} />
+  </Wrapper>
+)
+
+export default React.memo(Emotion)
diff --git a/src/containers/unit/Comments/Comment/Footer.tsx b/src/containers/unit/Comments/Comment/Footer.tsx
index 8aa1f2ddd..77e3904a0 100755
--- a/src/containers/unit/Comments/Comment/Footer.tsx
+++ b/src/containers/unit/Comments/Comment/Footer.tsx
@@ -1,13 +1,14 @@
 import React from 'react'
-import TimeAgo from 'timeago-react'
 
 import type { TAccount, TComment } from '@/spec'
-import { SpaceGrow } from '@/components/Common'
+
 import DotDivider from '@/components/DotDivider'
+import { SpaceGrow } from '@/components/Common'
 
+import Emotion from './Emotion'
 import Actions from './Actions'
 
-import { Wrapper, PublishDateWrapper } from '../styles/comment/footer'
+import { Wrapper } from '../styles/comment/footer'
 
 type TProps = {
   data: TComment
@@ -16,9 +17,7 @@ type TProps = {
 
 const Footer: React.FC<TProps> = ({ data, accountInfo }) => (
   <Wrapper>
-    <PublishDateWrapper>
-      <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
-    </PublishDateWrapper>
+    <Emotion />
     <DotDivider radius={3} space={6} />
     <Actions data={data} accountInfo={accountInfo} />
     <SpaceGrow />
diff --git a/src/containers/unit/Comments/Comment/Header.tsx b/src/containers/unit/Comments/Comment/Header.tsx
index 2ba030ebb..81896a302 100755
--- a/src/containers/unit/Comments/Comment/Header.tsx
+++ b/src/containers/unit/Comments/Comment/Header.tsx
@@ -1,37 +1,23 @@
 import React from 'react'
-import { forEach, clone, pluck } from 'ramda'
+import TimeAgo from 'timeago-react'
 
 import type { TComment } from '@/spec'
 
 import ImgFallback from '@/components/ImgFallback'
-import AvatarsRow from '@/components/AvatarsRow'
 import DotDivider from '@/components/DotDivider'
 
 import {
   Wrapper,
   FloorNum,
+  CreateDate,
   Avatar,
   HeaderBaseInfo,
-  CommentUserName,
-  CommentHeaderFirst,
-  ReplyUsers,
-  ReplyTitle,
+  BaseInfo,
+  UserName,
+  AuthorTag,
+  ShortIntro,
 } from '../styles/comment/header'
 
-import { previewReply } from '../logic'
-
-const getAuthors = (comment) => {
-  /* eslint-disable no-return-assign */
-  const replies = forEach((reply) => {
-    /* @ts-ignore */
-    return (reply.author.extraId = reply.id)
-  }, clone(comment.replies))
-  /* eslint-enable */
-
-  /* @ts-ignore */
-  return pluck('author', replies)
-}
-
 type TProps = {
   data: TComment
 }
@@ -44,23 +30,18 @@ const CommentHeader: React.FC<TProps> = ({ data }) => {
         fallback={<ImgFallback user={data.author} size={22} right={10} />}
       />
       <HeaderBaseInfo>
-        <CommentHeaderFirst>
-          <CommentUserName>
-            {data.author.nickname}
-            <DotDivider radius={3} space={10} />
-            <FloorNum>#{data.floor}</FloorNum>
-          </CommentUserName>
-          {data.repliesCount !== 0 && (
-            <ReplyUsers>
-              <ReplyTitle>收到回复:</ReplyTitle>
-              <AvatarsRow
-                users={getAuthors(data)}
-                onUserSelect={previewReply}
-                total={data.repliesCount}
-              />
-            </ReplyUsers>
-          )}
-        </CommentHeaderFirst>
+        <BaseInfo>
+          <UserName>
+            <div>{data.author.nickname}</div>
+            <AuthorTag>作者</AuthorTag>
+          </UserName>
+          <FloorNum>#{data.floor}</FloorNum>
+          <DotDivider radius={3} space={10} />
+          <CreateDate>
+            <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
+          </CreateDate>
+        </BaseInfo>
+        <ShortIntro>1 号员工 / CEO at coderplanets</ShortIntro>
       </HeaderBaseInfo>
     </Wrapper>
   )
diff --git a/src/containers/unit/Comments/Comment/MobileView/index.tsx b/src/containers/unit/Comments/Comment/MobileView/index.tsx
index 5dec41bff..49cc6c613 100644
--- a/src/containers/unit/Comments/Comment/MobileView/index.tsx
+++ b/src/containers/unit/Comments/Comment/MobileView/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { Br } from '@/components/Common'
 import MarkDownRender from '@/components/MarkDownRender'
 
-import UpInfo from '../UpInfo'
+import Upvote from '../Upvote'
 import ReplyBar from '../ReplyBar'
 import DeleteMask from '../DeleteMask'
 import Footer from '../Footer'
@@ -40,7 +40,7 @@ const MobileView = ({ data, tobeDeleteId, accountInfo }) => {
           <Footer data={data} accountInfo={accountInfo} />
         </CommentBodyInfo>
       </CommentWrapper>
-      <UpInfo data={data} />
+      <Upvote data={data} />
     </Wrapper>
   )
 }
diff --git a/src/containers/unit/Comments/Comment/UpInfo.tsx b/src/containers/unit/Comments/Comment/UpInfo.tsx
deleted file mode 100755
index a6ae7d205..000000000
--- a/src/containers/unit/Comments/Comment/UpInfo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import type { TComment } from '@/spec'
-import { ICON } from '@/config'
-import { prettyNum } from '@/utils'
-
-import { Wrapper, Icon } from '../styles/comment/up_info'
-
-import { toggleLikeComment } from '../logic'
-
-type TProps = {
-  data: TComment
-}
-
-const UpInfo: React.FC<TProps> = ({ data }) => (
-  <Wrapper>
-    <div onClick={() => toggleLikeComment(data)}>
-      <Icon src={`${ICON}/shape/vote-up.svg`} viewerDid={data.viewerHasLiked} />
-    </div>
-    <div>{prettyNum(data.likesCount)}</div>
-  </Wrapper>
-)
-
-export default React.memo(UpInfo)
diff --git a/src/containers/unit/Comments/Comment/Upvote.tsx b/src/containers/unit/Comments/Comment/Upvote.tsx
new file mode 100755
index 000000000..33cc01e77
--- /dev/null
+++ b/src/containers/unit/Comments/Comment/Upvote.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import type { TComment } from '@/spec'
+import { ICON } from '@/config'
+import { prettyNum } from '@/utils'
+
+import { Wrapper, InnerWrapper, Icon } from '../styles/comment/upvote'
+
+import { toggleLikeComment } from '../logic'
+
+type TProps = {
+  data: TComment
+}
+
+const Upvote: React.FC<TProps> = ({ data }) => (
+  <Wrapper>
+    <InnerWrapper>
+      <div onClick={() => toggleLikeComment(data)}>
+        <Icon
+          src={`${ICON}/shape/upvote.svg`}
+          viewerDid={data.viewerHasLiked}
+        />
+      </div>
+      <div>{prettyNum(data.likesCount)}</div>
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default React.memo(Upvote)
diff --git a/src/containers/unit/Comments/styles/comment/actions.ts b/src/containers/unit/Comments/styles/comment/actions.ts
index 20aecf758..f8e2e1cc3 100755
--- a/src/containers/unit/Comments/styles/comment/actions.ts
+++ b/src/containers/unit/Comments/styles/comment/actions.ts
@@ -4,7 +4,8 @@ import { theme, css } from '@/utils'
 // import { CommentBodyInfo } from './index'
 
 export const Wrapper = styled.div`
-  ${css.flex()};
+  ${css.flex('align-center')};
+  width: 100%;
 
   ${css.media.mobile`
     font-size: 12px;
@@ -13,7 +14,6 @@ export const Wrapper = styled.div`
 export const ReplyAction = styled.div`
   ${css.flex()};
   color: ${theme('comment.action')};
-  margin-right: 12px;
   cursor: pointer;
   font-weight: bold;
   opacity: 1;
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view.ts
index 730cfb1cd..7f4cc6d38 100644
--- a/src/containers/unit/Comments/styles/comment/desktop_view.ts
+++ b/src/containers/unit/Comments/styles/comment/desktop_view.ts
@@ -25,7 +25,6 @@ export const CommentWrapper = styled.div<{ tobeDelete: boolean }>`
 export const CommentBodyInfo = styled.div`
   ${css.flexColumn()};
   width: 100%;
-  margin-top: 3px;
 `
 export const CommentContent = styled.div`
   font-size: 0.9rem;
diff --git a/src/containers/unit/Comments/styles/comment/emotion.ts b/src/containers/unit/Comments/styles/comment/emotion.ts
new file mode 100644
index 000000000..2d459f27b
--- /dev/null
+++ b/src/containers/unit/Comments/styles/comment/emotion.ts
@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const SelectorIcon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(16)};
+  margin-top: -1px;
+
+  &:hover {
+    fill: #00a39a;
+    cursor: pointer;
+  }
+
+  transition: all 0.25s;
+`
diff --git a/src/containers/unit/Comments/styles/comment/footer.ts b/src/containers/unit/Comments/styles/comment/footer.ts
index 74ad49f84..ff8f3f1c0 100755
--- a/src/containers/unit/Comments/styles/comment/footer.ts
+++ b/src/containers/unit/Comments/styles/comment/footer.ts
@@ -1,19 +1,10 @@
 import styled from 'styled-components'
 
-// import Img from '@/Img'
+import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
   margin-top: 5px;
 `
-
-export const PublishDateWrapper = styled.div`
-  color: ${theme('comment.action')};
-  font-size: 14px;
-
-  ${css.media.mobile`
-    font-size: 12px;
-    opacity: 0.8;
-  `};
-`
+export const holder = 1
diff --git a/src/containers/unit/Comments/styles/comment/header.ts b/src/containers/unit/Comments/styles/comment/header.ts
index 671bbee0f..19bdb12e3 100755
--- a/src/containers/unit/Comments/styles/comment/header.ts
+++ b/src/containers/unit/Comments/styles/comment/header.ts
@@ -7,45 +7,58 @@ import { Wrapper as CommentBlock } from './desktop_view'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
-  margin-bottom: 10px;
-`
-export const FloorNum = styled.div`
-  color: ${theme('comment.floor')};
-  font-size: 14px;
-  flex-grow: 1;
-  letter-spacing: 1.5px;
-  margin-top: 2px;
-  opacity: 0.6;
-
-  ${CommentBlock}:hover & {
-    opacity: 1;
-  }
-
-  transition: opacity 0.25s;
-`
-export const CommentHeaderFirst = styled.div`
-  ${css.flex()};
+  margin-bottom: 14px;
 `
 export const Avatar = styled(Img)`
-  ${css.circle(22)};
+  ${css.circle(24)};
   opacity: ${theme('avatar.opacity')};
-  margin-right: 10px;
+  margin-right: 13px;
 `
 export const HeaderBaseInfo = styled.div`
   ${css.flexColumn()};
   width: 100%;
 `
-export const CommentUserName = styled.div`
+export const BaseInfo = styled.div`
   ${css.flexGrow('align-center')};
   color: ${theme('comment.username')};
-  font-size: 14px;
 `
-export const ReplyUsers = styled.div`
-  ${css.flex()};
-  margin-top: -4px;
+export const UserName = styled.div`
+  ${css.flex('align-center')};
+  font-size: 15px;
+  flex-grow: 1;
+`
+export const AuthorTag = styled.div`
+  font-size: 11px;
+  padding: 0 8px;
+  padding-top: 1px;
+  margin-left: 10px;
+  background: #023c4a;
+  border-radius: 5px;
+  color: #00a59b;
 `
-export const ReplyTitle = styled.div`
-  color: ${theme('comment.reply')};
-  margin-top: 4px;
-  margin-right: 5px;
+export const ShortIntro = styled.div`
+  color: ${theme('comment.floor')};
+  font-size: 13px;
+  opacity: 0.8;
+  margin-top: 1px;
+`
+export const FloorNum = styled.div`
+  color: ${theme('comment.floor')};
+  font-size: 12px;
+  letter-spacing: 1.5px;
+  margin-top: 2px;
+  opacity: 0.6;
+
+  ${CommentBlock}:hover & {
+    opacity: 0.8;
+  }
+
+  transition: opacity 0.25s;
+`
+export const CreateDate = styled.div`
+  color: ${theme('comment.floor')};
+  font-size: 12px;
+  letter-spacing: 1.5px;
+  margin-top: 2px;
+  opacity: 0.8;
 `
diff --git a/src/containers/unit/Comments/styles/comment/up_info.ts b/src/containers/unit/Comments/styles/comment/upvote.ts
similarity index 78%
rename from src/containers/unit/Comments/styles/comment/up_info.ts
rename to src/containers/unit/Comments/styles/comment/upvote.ts
index a89c193f9..b82f24d9f 100755
--- a/src/containers/unit/Comments/styles/comment/up_info.ts
+++ b/src/containers/unit/Comments/styles/comment/upvote.ts
@@ -4,9 +4,10 @@ import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn('align-center', 'justify-start')};
+  ${css.flexColumn('align-start', 'justify-start')};
   color: ${theme('thread.articleTitle')};
-  margin-right: 15px;
+  min-width: 32px;
+  margin-top: 5px;
 
   ${css.media.mobile`
     margin-right: 10px;
@@ -14,11 +15,14 @@ export const Wrapper = styled.div`
     margin-top: 6px;
   `};
 `
+export const InnerWrapper = styled.div`
+  ${css.flexColumn('align-center', 'justify-start')};
+`
 export const Icon = styled(Img)<{ viewerDid: boolean }>`
   fill: ${({ viewerDid }) =>
     viewerDid ? theme('comment.didIcon') : theme('comment.icon')};
 
-  ${css.size(18)};
+  ${css.size(14)};
   ${css.smokey()};
 
   ${css.media.mobile`