diff --git a/public/icons/static/emotion/emotion.svg b/public/icons/static/emotion/emotion.svg
new file mode 100644
index 000000000..775685308
--- /dev/null
+++ b/public/icons/static/emotion/emotion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm2-12v4h2v-4h-2zm-6 0v4h2v-4H8z"/></svg>
\ No newline at end of file
diff --git a/src/components/Buttons/CopyButton/Animate.tsx b/src/components/Buttons/CopyButton/Animate.tsx
index 94d7040ca..607d351af 100644
--- a/src/components/Buttons/CopyButton/Animate.tsx
+++ b/src/components/Buttons/CopyButton/Animate.tsx
@@ -2,16 +2,11 @@ import { FC, memo, useEffect, useState } from 'react'
 
 import { ICON } from '@/config'
 import { IconButton } from '@/components/Buttons'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 import { AnimateOnChange } from 'react-animation'
 import { CopyedHintIcon } from '../styles/copy_button'
 
-type TProps = {
-  value: string
-}
-
-const CopyButton: FC<TProps> = ({ value }) => {
+const CopyButton: FC = () => {
   const [done, setDone] = useState(false)
 
   useEffect(() => {
@@ -28,9 +23,13 @@ const CopyButton: FC<TProps> = ({ value }) => {
       durationOut={100}
     >
       {!done && (
-        <CopyToClipboard text={value} onCopy={() => setDone(true)}>
-          <IconButton path="article/clipboard.svg" mRight={5} />
-        </CopyToClipboard>
+        <IconButton
+          path="article/clipboard.svg"
+          mRight={5}
+          onClick={() => {
+            setDone(true)
+          }}
+        />
       )}
       {done && <CopyedHintIcon src={`${ICON}/shape/checked.svg`} />}
     </AnimateOnChange>
diff --git a/src/components/Buttons/CopyButton/index.tsx b/src/components/Buttons/CopyButton/index.tsx
index 54b3ce0ae..a060df8ce 100644
--- a/src/components/Buttons/CopyButton/index.tsx
+++ b/src/components/Buttons/CopyButton/index.tsx
@@ -1,6 +1,8 @@
 import { FC, memo } from 'react'
 import dynamic from 'next/dynamic'
 
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
 import IconButton from '../IconButton'
 import { Wrapper } from '../styles/copy_button'
 
@@ -19,7 +21,9 @@ type TProps = {
 const CopyButton: FC<TProps> = ({ value }) => {
   return (
     <Wrapper>
-      <AnimatedCopyButton value={value} />
+      <CopyToClipboard text={value}>
+        <AnimatedCopyButton />
+      </CopyToClipboard>
     </Wrapper>
   )
 }
diff --git a/src/components/Switcher/IconSwitcher.tsx b/src/components/Switcher/IconSwitcher.tsx
index 2e67f14db..6389ace43 100644
--- a/src/components/Switcher/IconSwitcher.tsx
+++ b/src/components/Switcher/IconSwitcher.tsx
@@ -49,19 +49,12 @@ const TabLabel: React.FC<TTabLabel> = ({ item, activeKey, onChange }) => {
   }
 
   return (
-    <Tooltip
-      content={<DescText>{item.desc}</DescText>}
-      placement="bottom"
-      delay={500}
-      noPadding
-    >
-      <Label onClick={() => onChange(item)}>
-        {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
-        {!nilOrEmpty(item.iconSrc) && (
-          <Icon src={item.iconSrc} checked={activeKey === item.key} />
-        )}
-      </Label>
-    </Tooltip>
+    <Label onClick={() => onChange(item)}>
+      {!nilOrEmpty(item.localIcon) && <>{item.localIcon}</>}
+      {!nilOrEmpty(item.iconSrc) && (
+        <Icon src={item.iconSrc} checked={activeKey === item.key} />
+      )}
+    </Label>
   )
 }
 
@@ -79,12 +72,16 @@ const IconSwitcher: FC<TProps> = ({ items, activeKey, onChange }) => {
       <AccessZone />
       <Tabs>
         {items.map((item) => (
-          <TabLabel
+          <Tooltip
             key={item.key}
-            item={item}
-            activeKey={activeKey}
-            onChange={onChange}
-          />
+            content={<DescText>{item.desc}</DescText>}
+            placement="top"
+            delay={500}
+            forceZIndex
+            noPadding
+          >
+            <TabLabel item={item} activeKey={activeKey} onChange={onChange} />
+          </Tooltip>
         ))}
         <Slider index={slideIndex} />
       </Tabs>
diff --git a/src/components/Switcher/styles/icon_selector.ts b/src/components/Switcher/styles/icon_selector.ts
index f01d56402..544044427 100644
--- a/src/components/Switcher/styles/icon_selector.ts
+++ b/src/components/Switcher/styles/icon_selector.ts
@@ -43,7 +43,6 @@ export const Label = styled.label`
   width: ${width};
   height: ${height};
   font-size: 15px;
-  z-index: 2;
   transition: color 0.15s ease-in;
 
   &:hover {
@@ -57,11 +56,15 @@ export const DescText = styled.div`
 `
 export const Icon = styled(Img)<{ checked: boolean }>`
   fill: ${({ checked }) =>
-    checked ? '#66b5e8' : theme('thread.articleDigest')};
+    checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   width: ${({ checked }) => (checked ? '14px' : '12px')};
   height: ${({ checked }) => (checked ? '14px' : '12px')};
   display: block;
   transition: all 0.25s;
+
+  &:hover {
+    fill: #66b5e8;
+  }
 `
 export const Slider = styled.span<{ index: number }>`
   ${css.flex()};
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 1a3dd30ca..988a3fa93 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -41,6 +41,17 @@ type TProps = {
   // for same reason, figure out later
   contentHeight?: string
 
+  /**
+   * z-index is a magic number for IconSwitcher's mask situation,
+   * DO NOT USE unless you know what you are doing
+   *  在类似 IconSwitcher 的场景下（有一个基于 positon: absolute 的滑动遮罩）的场景下，需要将外层
+   * 的 ContentWrapper z-index 置为 1, 否则滑动遮罩会在最外面。
+   *
+   * 理论上 zIndex 一直设置为 1，也没问题，但是会导致某些使用了 Tooltip 的地方有严重的粘滞感，比如 “CopyRight” 那里。
+   * 暂时没有精力看 Tippy 的具体实现，小心使用。
+   */
+  forceZIndex?: boolean
+
   onShow?: () => void
   onHide?: () => void
   onConfirm?: () => void
@@ -57,6 +68,7 @@ const Tooltip: FC<TProps> = ({
   content,
   hideOnClick = true,
   showArrow = false,
+  forceZIndex = false,
   footerBehavior = 'default',
   trigger = 'mouseenter focus',
   onConfirm,
@@ -66,7 +78,7 @@ const Tooltip: FC<TProps> = ({
   const [active, setActive] = useState(false)
 
   const ContentComp = showArrow ? (
-    <ContentWrapper contentHeight={contentHeight}>
+    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       {active && placement === 'bottom' && <TopArrow />}
       {active && placement === 'top' && <BottomArrow />}
       {active && placement === 'right' && <LeftArrow />}
@@ -74,7 +86,7 @@ const Tooltip: FC<TProps> = ({
       <div>{children}</div>
     </ContentWrapper>
   ) : (
-    <ContentWrapper contentHeight={contentHeight}>
+    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       <div>{children}</div>
     </ContentWrapper>
   )
diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts
index 1445b9a51..d86008f30 100755
--- a/src/components/Tooltip/styles/index.ts
+++ b/src/components/Tooltip/styles/index.ts
@@ -26,10 +26,11 @@ export const NoPaddingStyledTippy = styled(StyledTippy)`
     padding: 0;
   }
 `
-export const ContentWrapper = styled.div<{ contentHeight: string }>`
+type TContentWrapper = { contentHeight: string; forceZIndex: boolean }
+export const ContentWrapper = styled.div<TContentWrapper>`
   position: relative;
   height: ${({ contentHeight }) => contentHeight};
-  /* z-index: 1; */
+  z-index: ${({ forceZIndex }) => (forceZIndex ? 1 : 0)};
 `
 const Arrow = styled.div`
   position: absolute;
diff --git a/src/components/Upvote/styles/comment_layout.ts b/src/components/Upvote/styles/comment_layout.ts
index d3d76a409..07f3d05d1 100755
--- a/src/components/Upvote/styles/comment_layout.ts
+++ b/src/components/Upvote/styles/comment_layout.ts
@@ -18,4 +18,5 @@ export const UpWrapper = styled.div`
 `
 export const CountWrapper = styled.div`
   margin-top: -4px;
+  margin-left: 1px;
 `
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index 11e628491..76dcffc52 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -36,7 +36,7 @@ export const selectItem = (checkedItemRaw: string): void => {
   store.mark({ checkedItemRaw, view: 'detail' })
 }
 
-export const close = (): void => store.mark({ show: false })
+export const close = (): void => store.mark({ show: false, view: 'main' })
 
 const DataResolver = [
   {
diff --git a/src/containers/tool/Share/styles/platform.ts b/src/containers/tool/Share/styles/platform.ts
index 8d5e42347..67177b4b9 100644
--- a/src/containers/tool/Share/styles/platform.ts
+++ b/src/containers/tool/Share/styles/platform.ts
@@ -45,7 +45,7 @@ export const LogoWrapper = styled.div<{ noBg: boolean }>`
   margin-bottom: 5px;
 `
 export const Logo = styled(Img)<{ small: boolean }>`
-  fill: #e7f2f7; // ${theme('thread.articleTitle')};
+  fill: ${theme('thread.articleTitle')};
   ${({ small }) => (small ? css.circle('24px') : css.circle('38px'))};
   filter: saturate(0.6);
   opacity: 0.8;
diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx
similarity index 87%
rename from src/containers/unit/Comments/Comment/DesktopView.tsx
rename to src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx
index feaf72af5..a4788914a 100644
--- a/src/containers/unit/Comments/Comment/DesktopView.tsx
+++ b/src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx
@@ -9,10 +9,10 @@ import MarkDownRender from '@/components/MarkDownRender'
 import Tooltip from '@/components/Tooltip'
 import Upvote from '@/components/Upvote'
 
-import Header from './Header'
-import ReplyBar from './ReplyBar'
-import DeleteMask from './DeleteMask'
-import Footer from './Footer'
+import Header from '../Header'
+import ReplyBar from '../ReplyBar'
+import DeleteMask from '../DeleteMask'
+import Footer from '../Footer'
 
 import {
   Wrapper,
@@ -27,7 +27,8 @@ import {
   SolutionIcon,
   BadgePopContent,
   RangeLine,
-} from '../styles/comment/desktop_view'
+} from '../../styles/comment/desktop_view'
+import { foldComment } from '../../logic'
 
 const getSelection = () => {
   const selectText = Global.getSelection().toString()
@@ -42,14 +43,16 @@ type TProps = {
   tobeDeleteId: string
   hasReplies?: boolean
   withoutBottomDivider?: boolean
+  isReply?: boolean
 }
 
-const Comment: FC<TProps> = ({
+const DefaultLayout: FC<TProps> = ({
   data,
   tobeDeleteId,
   accountInfo,
   hasReplies = false,
   withoutBottomDivider = false,
+  isReply = false,
 }) => {
   const pined = data.id === '360' || data.id === '377'
   const isAuthorUpvoted =
@@ -89,7 +92,7 @@ const Comment: FC<TProps> = ({
               />
             </Tooltip>
           )}
-          <RangeLine hasReplies={hasReplies} />
+          {isReply && <RangeLine onClick={() => foldComment(data.id)} />}
         </SidebarWrapper>
 
         <CommentBodyInfo onMouseUp={getSelection}>
@@ -110,4 +113,4 @@ const Comment: FC<TProps> = ({
   )
 }
 
-export default memo(Comment)
+export default memo(DefaultLayout)
diff --git a/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx b/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx
new file mode 100644
index 000000000..cb641b999
--- /dev/null
+++ b/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx
@@ -0,0 +1,59 @@
+import { FC, memo } from 'react'
+import TimeAgo from 'timeago-react'
+
+import type { TComment } from '@/spec'
+import { cutRest } from '@/utils'
+import { ICON } from '@/config'
+
+import ImgFallback from '@/components/ImgFallback'
+import { IconButton } from '@/components/Buttons'
+import { SpaceGrow } from '@/components/Common'
+
+import {
+  Wrapper,
+  Avatar,
+  CommentBody,
+  SolutionIcon,
+  CreateDate,
+} from '../../styles/comment/desktop_view/fold_layout'
+import { expandComment } from '../../logic'
+
+type TProps = {
+  data: TComment
+}
+
+const FoldLayout: FC<TProps> = ({ data }) => {
+  const pined = data.id === '360' || data.id === '377'
+  const isAuthorUpvoted =
+    data.id === '377' || data.id === '355' || data.id === '359'
+  const isSolution = data.id === '358' || data.id === '355'
+
+  return (
+    <Wrapper pined={pined}>
+      <IconButton
+        path="shape/expand-all.svg"
+        hint="展开评论"
+        mLeft={-1}
+        mRight={12}
+        onClick={() => expandComment(data.id)}
+      />
+      <Avatar
+        src={data.author.avatar}
+        fallback={<ImgFallback user={data.author} size={16} right={10} />}
+      />
+      <CommentBody>{cutRest(data.body, 30)}</CommentBody>
+      <SpaceGrow />
+      {isSolution && (
+        <SolutionIcon
+          isAuthorUpvoted={isAuthorUpvoted}
+          src={`${ICON}/shape/solution-check.svg`}
+        />
+      )}
+      <CreateDate>
+        <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
+      </CreateDate>
+    </Wrapper>
+  )
+}
+
+export default memo(FoldLayout)
diff --git a/src/containers/unit/Comments/Comment/DesktopView/index.tsx b/src/containers/unit/Comments/Comment/DesktopView/index.tsx
new file mode 100644
index 000000000..4741aeea8
--- /dev/null
+++ b/src/containers/unit/Comments/Comment/DesktopView/index.tsx
@@ -0,0 +1,30 @@
+import { FC, memo, Fragment } from 'react'
+import { contains } from 'ramda'
+import { TID } from '@/spec'
+
+import type { TAccount, TComment } from '@/spec'
+
+import DefaultLayout from './DefaultLayout'
+import FoldLayout from './FoldLayout'
+
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+  tobeDeleteId: string
+  hasReplies?: boolean
+  withoutBottomDivider?: boolean
+  foldedIds: TID[]
+}
+
+const Comment: FC<TProps> = (props) => {
+  const { foldedIds, data } = props
+  const isFolded = contains(data.id, foldedIds)
+
+  return (
+    <Fragment>
+      {isFolded ? <FoldLayout {...props} /> : <DefaultLayout {...props} />}
+    </Fragment>
+  )
+}
+
+export default memo(Comment)
diff --git a/src/containers/unit/Comments/Comment/Emotion.tsx b/src/containers/unit/Comments/Comment/Emotion.tsx
index 46fcb9997..10ecbca50 100644
--- a/src/containers/unit/Comments/Comment/Emotion.tsx
+++ b/src/containers/unit/Comments/Comment/Emotion.tsx
@@ -6,7 +6,7 @@ import { Wrapper } from '../styles/comment/emotion'
 
 const Emotion: FC = () => (
   <Wrapper>
-    <IconButton path="emotion/alien-fill.svg" mRight={0} />
+    <IconButton path="emotion/emotion.svg" mRight={0} mTop={1} />
   </Wrapper>
 )
 
diff --git a/src/containers/unit/Comments/Comment/Header.tsx b/src/containers/unit/Comments/Comment/Header.tsx
index ea840e760..b1d8b7dd7 100755
--- a/src/containers/unit/Comments/Comment/Header.tsx
+++ b/src/containers/unit/Comments/Comment/Header.tsx
@@ -4,6 +4,7 @@ import TimeAgo from 'timeago-react'
 import type { TComment } from '@/spec'
 
 import ImgFallback from '@/components/ImgFallback'
+import { Space } from '@/components/Common'
 import DotDivider from '@/components/DotDivider'
 
 import {
@@ -13,7 +14,8 @@ import {
   Avatar,
   HeaderBaseInfo,
   BaseInfo,
-  UserName,
+  Nickname,
+  UserBase,
   AuthorTag,
   ShortIntro,
 } from '../styles/comment/header'
@@ -31,15 +33,16 @@ const CommentHeader: FC<TProps> = ({ data }) => {
       />
       <HeaderBaseInfo>
         <BaseInfo>
-          <UserName>
-            <div>{data.author.nickname}</div>
+          <UserBase>
+            <Nickname>{data.author.nickname}</Nickname>
             <AuthorTag>作者</AuthorTag>
-          </UserName>
+            <CreateDate>
+              <DotDivider space={8} />
+              <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
+            </CreateDate>
+          </UserBase>
           <FloorNum>#{data.floor}</FloorNum>
-          <DotDivider radius={3} space={10} />
-          <CreateDate>
-            <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
-          </CreateDate>
+          <Space right={10} />
         </BaseInfo>
         <ShortIntro>1 号员工 / CEO at coderplanets</ShortIntro>
       </HeaderBaseInfo>
diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx
index e64ebf00d..41025fc0d 100644
--- a/src/containers/unit/Comments/List/Header.tsx
+++ b/src/containers/unit/Comments/List/Header.tsx
@@ -63,7 +63,7 @@ const Header: FC<TProps> = ({ totalCount, filterType }) => {
 
         {isAllFolded ? (
           <IconButton
-            size={14}
+            size={13}
             path="shape/expand-all.svg"
             hint="展开全部"
             active
@@ -71,7 +71,7 @@ const Header: FC<TProps> = ({ totalCount, filterType }) => {
           />
         ) : (
           <IconButton
-            size={14}
+            size={13}
             path="shape/fold-all.svg"
             hint="折叠全部"
             {...actionIconConfig}
diff --git a/src/containers/unit/Comments/List/List.tsx b/src/containers/unit/Comments/List/List.tsx
index 75aced22f..343d806d5 100644
--- a/src/containers/unit/Comments/List/List.tsx
+++ b/src/containers/unit/Comments/List/List.tsx
@@ -1,37 +1,53 @@
 import { FC, Fragment, memo } from 'react'
 
-import type { TAccount, TComment } from '@/spec'
+import type { TAccount, TComment, TID } from '@/spec'
 import Comment from '../Comment'
 
 import RepliesList from './RepliesList'
 import DateDivider from './DateDivider'
 
+import { Wrapper, RangeLine } from '../styles/list/list'
+import { foldComment } from '../logic'
+
 type TProps = {
   entries: TComment[]
   tobeDeleteId: string
   accountInfo: TAccount
+  foldedIds: TID[]
 }
 
-const List: FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => {
+const List: FC<TProps> = ({
+  entries,
+  tobeDeleteId,
+  accountInfo,
+  foldedIds,
+}) => {
   return (
     <Fragment>
       {entries.map((c) => (
-        <Fragment key={c.id}>
+        <Wrapper key={c.id}>
           <Comment
             data={c}
             tobeDeleteId={tobeDeleteId}
             accountInfo={accountInfo}
-            hasReplies={c.id === '377'}
+            hasReplies={c.id === '108'}
+            foldedIds={foldedIds}
           />
+          {/* <DateDivider text={c.id} /> */}
           {c.id === '354' && <DateDivider text="一个月后" />}
-          {c.id === '377' && (
+          {c.id === '108' && (
             <RepliesList
               entries={entries}
               accountInfo={accountInfo}
               tobeDeleteId={tobeDeleteId}
+              foldedIds={foldedIds}
             />
           )}
-        </Fragment>
+          <RangeLine
+            hasReplies={c.id === '108'}
+            onClick={() => foldComment(c.id)}
+          />
+        </Wrapper>
       ))}
     </Fragment>
   )
diff --git a/src/containers/unit/Comments/List/RepliesList.tsx b/src/containers/unit/Comments/List/RepliesList.tsx
index 3de411a32..b054f275c 100644
--- a/src/containers/unit/Comments/List/RepliesList.tsx
+++ b/src/containers/unit/Comments/List/RepliesList.tsx
@@ -1,6 +1,6 @@
 import { FC, memo } from 'react'
 
-import type { TAccount, TComment } from '@/spec'
+import type { TAccount, TComment, TID } from '@/spec'
 
 import TogglerButton from './TogglerButton'
 import Comment from '../Comment'
@@ -11,9 +11,15 @@ type TProps = {
   entries: TComment[]
   tobeDeleteId: string
   accountInfo: TAccount
+  foldedIds: TID[]
 }
 
-const RepliesList: FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => {
+const RepliesList: FC<TProps> = ({
+  entries,
+  tobeDeleteId,
+  accountInfo,
+  foldedIds,
+}) => {
   return (
     <RepliesWrapper>
       {entries.slice(7, 9).map((c) => (
@@ -22,7 +28,9 @@ const RepliesList: FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => {
             data={c}
             tobeDeleteId={tobeDeleteId}
             accountInfo={accountInfo}
+            foldedIds={foldedIds}
             withoutBottomDivider={c.id === '328'}
+            isReply
           />
         </RepliesCommentsWrapper>
       ))}
diff --git a/src/containers/unit/Comments/List/index.tsx b/src/containers/unit/Comments/List/index.tsx
index 1edd3a2bb..40993d7d4 100644
--- a/src/containers/unit/Comments/List/index.tsx
+++ b/src/containers/unit/Comments/List/index.tsx
@@ -1,6 +1,6 @@
 import { FC, Fragment, memo } from 'react'
 
-import type { TPagedComments, TUser } from '@/spec'
+import type { TID, TPagedComments, TUser } from '@/spec'
 import Pagi from '@/components/Pagi'
 import { CommentLoading } from '@/components/Loading'
 
@@ -14,6 +14,7 @@ import { ListsWrapper, CommentBlock } from '../styles/list'
 type TProps = {
   accountInfo: TUser
   pagedComments: TPagedComments
+  foldedIds: TID[]
   restProps: {
     loading: boolean
     loadingFresh: boolean
@@ -25,6 +26,7 @@ type TProps = {
 const CommentsList: FC<TProps> = ({
   accountInfo,
   pagedComments: { entries, totalCount, pageSize, pageNumber },
+  foldedIds,
   restProps: { loading, loadingFresh, tobeDeleteId, filterType },
 }) => (
   <Fragment>
@@ -42,6 +44,7 @@ const CommentsList: FC<TProps> = ({
       ) : (
         <List
           entries={entries}
+          foldedIds={foldedIds}
           accountInfo={accountInfo}
           tobeDeleteId={tobeDeleteId}
         />
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index 6c21ff266..f95de3772 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -48,6 +48,7 @@ const CommentsContainer: FC<TProps> = ({
     showReplyPreview,
     mentionListData,
     isEdit,
+    foldedIds,
   } = store
 
   return (
@@ -89,6 +90,7 @@ const CommentsContainer: FC<TProps> = ({
 
       <List
         accountInfo={accountInfo}
+        foldedIds={foldedIds}
         pagedComments={pagedCommentsData}
         restProps={{ ...store }}
       />
diff --git a/src/containers/unit/Comments/logic.ts b/src/containers/unit/Comments/logic.ts
index 7e2481da8..fac1c779e 100755
--- a/src/containers/unit/Comments/logic.ts
+++ b/src/containers/unit/Comments/logic.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
-import { curry, isEmpty, mergeDeepRight } from 'ramda'
+import { curry, isEmpty, reject, equals, mergeDeepRight } from 'ramda'
 
-import type { TUser } from '@/spec'
+import type { TUser, TID } from '@/spec'
 import { PAGE_SIZE } from '@/config'
 import { TYPE, EVENT, ERR } from '@/constant'
 
@@ -278,6 +278,25 @@ const saveDraftIfNeed = (content): void => {
 
 const clearDraft = (): void => BStore.remove('recentDraft')
 
+export const foldComment = (id: TID): void => {
+  const { foldedCommentIds } = store
+  store.mark({ foldedCommentIds: [id, ...foldedCommentIds] })
+}
+
+export const foldAllComments = (): void => {
+  // TODO:
+  // store.mark({ foldedCommentIds: [] })
+}
+
+export const expandComment = (id: TID): void => {
+  const { foldedCommentIds } = store
+  store.mark({ foldedCommentIds: reject(equals(id), foldedCommentIds) })
+}
+
+export const expandAllComments = (): void => {
+  store.mark({ foldedCommentIds: [] })
+}
+
 // ###############################
 // Data & Error handlers
 // ###############################
diff --git a/src/containers/unit/Comments/store.ts b/src/containers/unit/Comments/store.ts
index 9e0120989..404701dcb 100755
--- a/src/containers/unit/Comments/store.ts
+++ b/src/containers/unit/Comments/store.ts
@@ -24,6 +24,7 @@ import type {
   TUser,
   TThread,
   TRoute,
+  TID,
 } from '@/spec'
 import { TYPE } from '@/constant'
 import { markStates, buildLog, stripMobx, changeset } from '@/utils'
@@ -90,12 +91,17 @@ const CommentsStore = T.model('CommentsStore', {
   loading: T.optional(T.boolean, false),
   // toggle loading for first item of commetns list
   loadingFresh: T.optional(T.boolean, false),
+
+  foldedCommentIds: T.optional(T.array(T.string), []),
 })
   .views((self) => ({
     get curRoute(): TRoute {
       const root = getParent(self) as TRootStore
       return root.curRoute
     },
+    get foldedIds(): TID[] {
+      return stripMobx(self.foldedCommentIds)
+    },
     get isLogin(): boolean {
       const root = getParent(self) as TRootStore
       return root.account.isLogin
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts b/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts
new file mode 100644
index 000000000..140e41e22
--- /dev/null
+++ b/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts
@@ -0,0 +1,104 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { theme, css } from '@/utils'
+
+import PinSVG from '@/SvgIcons/PinSVG'
+
+import { CreateDate as HeaderCreateDate } from '../header'
+
+type TWrapper = {
+  pined: boolean
+}
+
+export const Wrapper = styled.div<TWrapper>`
+  position: relative;
+  ${css.flex('align-center')};
+  margin-left: 2px;
+  margin-right: 5px;
+  padding-top: ${({ pined }) => (pined ? '24px' : '20px')};
+  position: relative;
+  background: transparent;
+`
+export const Avatar = styled(Img)`
+  ${css.circle(16)};
+  opacity: ${theme('avatar.opacity')};
+  margin-right: 10px;
+`
+export const CommentBody = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 14px;
+`
+export const CreateDate = styled(HeaderCreateDate)`
+  margin-right: 4px;
+`
+export const PinState = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  ${css.flex('align-center')};
+  margin-left: 1px;
+`
+export const PinIcon = styled(PinSVG)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(14)};
+  opacity: 0.9;
+  transform: rotate(-30deg);
+`
+export const PinText = styled.div`
+  font-size: 12px;
+  color: ${theme('thread.articleDigest')};
+  margin-left: 15px;
+  opacity: 0.8;
+`
+export const BadgePopContent = styled.div`
+  padding: 5px 10px;
+  font-size: 12px;
+`
+export const AuthorUpvotedIcon = styled(Img)`
+  ${css.size(14)};
+  fill: ${theme('comment.icon')};
+  opacity: 0.6;
+  margin-top: 3px;
+`
+export const SolutionIcon = styled(Img)<{ isAuthorUpvoted: boolean }>`
+  ${css.size(14)};
+  fill: ${theme('baseColor.green')};
+  margin-top: ${({ isAuthorUpvoted }) => (isAuthorUpvoted ? '7px' : '3px')};
+  margin-left: 1px;
+`
+export const CommentBodyInfo = styled.div`
+  ${css.flexColumn()};
+  width: 100%;
+`
+export const CommentContent = styled.div`
+  font-size: 14px;
+  margin-left: 1px;
+`
+export const LikeIcon = styled(Img)`
+  fill: ${theme('comment.icon')};
+  margin-right: 3px;
+  margin-top: 2px;
+  ${css.size(20)};
+`
+export const ReplyIcon = styled(Img)`
+  fill: ${theme('comment.icon')};
+  margin-right: 5px;
+  margin-top: 1px;
+  ${css.size(18)};
+`
+
+export const ReplyAction = styled.div`
+  ${css.flex()};
+  color: ${theme('comment.action')};
+  margin-right: 12px;
+  cursor: pointer;
+  font-weight: bold;
+  margin-top: 2px;
+  opacity: 0;
+
+  ${CommentBodyInfo}:hover & {
+    opacity: 1;
+  }
+  transition: opacity 0.3s;
+`
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
similarity index 94%
rename from src/containers/unit/Comments/styles/comment/desktop_view.ts
rename to src/containers/unit/Comments/styles/comment/desktop_view/index.ts
index c824ac8b2..3c96223bf 100644
--- a/src/containers/unit/Comments/styles/comment/desktop_view.ts
+++ b/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
@@ -38,7 +38,6 @@ export const PinText = styled.div`
   opacity: 0.8;
 `
 
-// filter: blur(3px);
 export const CommentWrapper = styled.div<{ tobeDelete: boolean }>`
   ${css.flexGrow()};
   filter: ${({ tobeDelete }) => (tobeDelete ? 'blur(3px)' : '')};
@@ -64,7 +63,7 @@ export const SolutionIcon = styled(Img)<{ isAuthorUpvoted: boolean }>`
   margin-top: ${({ isAuthorUpvoted }) => (isAuthorUpvoted ? '7px' : '3px')};
   margin-left: 1px;
 `
-export const RangeLine = styled.div<{ hasReplies: boolean }>`
+export const RangeLine = styled.div`
   flex-grow: 1;
   width: 25px;
   height: 100%;
@@ -72,12 +71,11 @@ export const RangeLine = styled.div<{ hasReplies: boolean }>`
   border-left-color: #004251;
   margin-left: 6px;
   margin-top: 8px;
-  opacity: 0;
-  opacity: ${({ hasReplies }) => (hasReplies ? 1 : 0)};
-
+  opacity: 1;
   ${SidebarWrapper}:hover & {
     opacity: 1;
     cursor: pointer;
+    border-left-color: ${theme('thread.articleDigest')};
   }
 
   transition: all 0.25s;
diff --git a/src/containers/unit/Comments/styles/comment/header.ts b/src/containers/unit/Comments/styles/comment/header.ts
index 3ae643bc5..44e943609 100755
--- a/src/containers/unit/Comments/styles/comment/header.ts
+++ b/src/containers/unit/Comments/styles/comment/header.ts
@@ -22,15 +22,18 @@ export const BaseInfo = styled.div`
   ${css.flexGrow('align-center')};
   color: ${theme('comment.username')};
 `
-export const UserName = styled.div`
-  ${css.flex('align-center')};
+export const UserBase = styled.div`
+  ${css.flex('align-end')};
   font-size: 15px;
   flex-grow: 1;
 `
+export const Nickname = styled.div`
+  font-size: 15px;
+`
 export const AuthorTag = styled.div`
   font-size: 11px;
+  margin-bottom: 2px;
   padding: 0 8px;
-  padding-top: 1px;
   margin-left: 10px;
   background: #023c4a;
   border-radius: 5px;
@@ -44,8 +47,7 @@ export const ShortIntro = styled.div`
 `
 export const FloorNum = styled.div`
   color: ${theme('comment.floor')};
-  font-size: 12px;
-  letter-spacing: 1.5px;
+  font-size: 13px;
   margin-top: 2px;
   opacity: 0.6;
 
@@ -56,9 +58,9 @@ export const FloorNum = styled.div`
   transition: opacity 0.25s;
 `
 export const CreateDate = styled.div`
+  ${css.flex('align-center')};
   color: ${theme('comment.floor')};
   font-size: 12px;
-  letter-spacing: 1.5px;
-  margin-top: 2px;
+  margin-left: 2px;
   opacity: 0.8;
 `
diff --git a/src/containers/unit/Comments/styles/list/header.ts b/src/containers/unit/Comments/styles/list/header.ts
index 6b084aef4..7249e56f6 100644
--- a/src/containers/unit/Comments/styles/list/header.ts
+++ b/src/containers/unit/Comments/styles/list/header.ts
@@ -1,13 +1,11 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
-import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
   margin-top: 25px;
-  margin-bottom: 20px;
+  margin-bttom: 5px;
 
   ${css.media.mobile`
     border-bottom: 1px solid;
diff --git a/src/containers/unit/Comments/styles/list/list.ts b/src/containers/unit/Comments/styles/list/list.ts
index e9a80c6b1..c3d7f16e1 100644
--- a/src/containers/unit/Comments/styles/list/list.ts
+++ b/src/containers/unit/Comments/styles/list/list.ts
@@ -1,14 +1,37 @@
 import styled from 'styled-components'
 
-// import { theme, css } from '@/utils'
+import { theme } from '@/utils'
 
 // min-height: 300px;
-export const Wrapper = styled.div``
-export const RepliesWrapper = styled.div`
+export const Wrapper = styled.div`
+  position: relative;
+  /* border: 1px solid tomato; */
+`
+export const RangeLine = styled.div<{ hasReplies: boolean }>`
+  position: absolute;
+  top: 78px;
+  left: 2px;
+  height: calc(100% - 78px);
+  width: 25px;
   border-left: 1px solid;
   border-left-color: #004251;
-  margin-left: 12px;
+  margin-left: 6px;
+  opacity: ${({ hasReplies }) => (hasReplies ? 1 : 0)};
+  /* opacity: 1; */
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+    border-left-color: ${theme('thread.articleDigest')};
+  }
+
+  transition: all 0.25s;
+`
+export const RepliesWrapper = styled.div`
+  /* border-left: 1px solid;
+  border-left-color: #004251; */
+  margin-left: 8px;
 `
 export const RepliesCommentsWrapper = styled.div`
   margin-left: 24px;
+  padding-left: 4px;
 `