diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index e7034793b..606417562 100755
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import { FC, ReactNode, useRef, useState, useEffect, memo } from 'react'
+import { FC, ReactNode, memo } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -40,32 +40,12 @@ const ArrowButton: FC<TProps> = ({
       ? `${ICON}/shape/arrow.svg`
       : `${ICON}/shape/arrow-simple.svg`
 
-  const leftTextRef = useRef(null)
-  const rightTextRef = useRef(null)
-
-  const [leftChildWidth, setLeftTextWidth] = useState(50)
-  const [rightChildWidth, setRightTextWidth] = useState(50)
-
-  useEffect(() => {
-    if (leftTextRef) {
-      setLeftTextWidth(leftTextRef.current?.clientWidth)
-    }
-  }, [leftTextRef])
-
-  useEffect(() => {
-    if (rightTextRef) {
-      setRightTextWidth(rightTextRef.current?.clientWidth)
-    }
-  }, [rightTextRef])
-
-  const textWidth = direction === 'left' ? leftChildWidth : rightChildWidth
-
   return (
     <Wrapper
       onClick={() => !disabled && onClick()}
       dimWhenIdle={dimWhenIdle}
+      direction={direction}
       size={size}
-      width={textWidth}
       disabled={disabled}
     >
       {direction === 'left' ? (
@@ -76,15 +56,11 @@ const ArrowButton: FC<TProps> = ({
             src={iconSrc}
             disabled={disabled}
           />
-          <Text ref={leftTextRef} size={size}>
-            {children}
-          </Text>
+          <Text size={size}>{children}</Text>
         </>
       ) : (
         <>
-          <Text ref={rightTextRef} size={size}>
-            {children}
-          </Text>
+          <Text size={size}>{children}</Text>
           <RightIcon
             arrowStyle={arrowStyle}
             size={size}
diff --git a/src/components/Buttons/MenuButton/index.tsx b/src/components/Buttons/MenuButton/index.tsx
index 6b217bfe6..1ded3e72b 100644
--- a/src/components/Buttons/MenuButton/index.tsx
+++ b/src/components/Buttons/MenuButton/index.tsx
@@ -22,10 +22,10 @@ export type TOption = {
 type TProps = {
   children: ReactNode
   options: TOption[]
-  extraOptions: TOption[]
+  extraOptions?: TOption[]
   placement?: TTooltipPlacement
   panelMinWidth?: string
-  onClick: (key?: string) => void
+  onClick?: (key?: string) => void
 }
 
 const MenuButton: FC<TProps> = ({
diff --git a/src/components/Buttons/styles/arrow_button.ts b/src/components/Buttons/styles/arrow_button.ts
index 063ffd070..1d0d98e6c 100755
--- a/src/components/Buttons/styles/arrow_button.ts
+++ b/src/components/Buttons/styles/arrow_button.ts
@@ -4,30 +4,36 @@ import Img from '@/Img'
 import { css } from '@/utils'
 
 import {
-  getWidth,
   getIconSize,
   getFontSize,
   getMargin,
   getSimpleMargin,
+  //
+  getArrowTopOffset,
+  getArrowMaxWidth,
+  getArrowInitWidth,
 } from './metircs/arrow_button'
 
 type TWrapper = {
   disabled: boolean
   dimWhenIdle: boolean
+  direction: 'left' | 'right'
   size: string
-  width: number
 }
 export const Wrapper = styled.div<TWrapper>`
+  position: relative;
   ${css.flex('align-center')};
   opacity: ${({ dimWhenIdle, disabled }) =>
     dimWhenIdle || disabled ? '0.65' : 1};
-  min-width: ${({ size, width }) => getWidth(size, width)};
+  justify-content: ${({ direction }) =>
+    direction === 'left' ? 'flex-end' : 'flex-start'};
+  margin-left: ${({ size }) => getArrowMaxWidth(size)};
 
   &:hover {
     cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
     opacity: ${({ disabled }) => (disabled ? 0.65 : 1)};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Text = styled.div<{ size: string }>`
   font-size: ${({ size }) => getFontSize(size)};
@@ -42,33 +48,37 @@ export const Icon = styled(Img)<{ size: string }>`
 `
 type TIcon = { size: string; arrowStyle: string; disabled: boolean }
 export const LeftIcon = styled(Icon)<TIcon>`
+  position: absolute;
+  top: ${({ size }) => getArrowTopOffset(size)};
+  left: ${({ size }) => `-${getArrowInitWidth(size)}`};
+
+  opacity: 0.6;
   margin-right: ${({ size, arrowStyle }) =>
     arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
 
   ${Wrapper}:hover & {
-    margin-left: ${({ arrowStyle, disabled }) => {
+    opacity: 1;
+    left: ${({ size, disabled }) => {
       if (disabled) return 0
-      return arrowStyle === 'default' ? '-4px' : '-2px'
+      return `-${getArrowMaxWidth(size)}`
     }};
-    /* margin-left: ${({ size, arrowStyle, disabled }) => {
-      return arrowStyle === 'default'
-        ? `-${getMargin(size, !disabled)}`
-        : `-${getSimpleMargin(size, !disabled)}`
-    }}; */
-    fill: #327ca1;
   }
 `
 export const RightIcon = styled(Icon)<TIcon>`
+  position: absolute;
+  top: ${({ size }) => getArrowTopOffset(size)};
+  right: ${({ size }) => `-${getArrowInitWidth(size)}`};
+
+  opacity: 0.6;
   margin-left: ${({ size, arrowStyle }) =>
     arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
 
   ${Wrapper}:hover & {
-    margin-left: ${({ size, arrowStyle, disabled }) => {
-      return arrowStyle === 'default'
-        ? getMargin(size, !disabled)
-        : getSimpleMargin(size, !disabled)
+    opacity: 1;
+    right: ${({ size, disabled }) => {
+      if (disabled) return 0
+      return `-${getArrowMaxWidth(size)}`
     }};
-    fill: #327ca1;
   }
 
   transform: rotate(180deg);
diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts
index 6916a42ba..a512b6b5d 100644
--- a/src/components/Buttons/styles/button.ts
+++ b/src/components/Buttons/styles/button.ts
@@ -26,11 +26,12 @@ export const Wrapper = styled.button<TButton>`
   border: 1px solid transparent;
   white-space: nowrap;
   padding: ${({ size }) => getPadding(size)};
-  font-size: 14px;
+  font-size: ${({ size }) => getFontSize(size)};
+  /* font-size: 14px; */
   border-radius: 4px;
   height: ${({ size }) => getHeight(size)};
   user-select: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
 
   color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -39,7 +40,7 @@ export const Wrapper = styled.button<TButton>`
   border-color: ${({ noBorder, disabled }) =>
     getBorderColor(noBorder, disabled)};
 
-  opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};
+  opacity: ${({ noBorder }) => (noBorder ? '0.8' : 1)};
 
   &:hover {
     color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -89,34 +90,27 @@ export const LoadingMask = styled.div<{ width: string }>`
   left: 0;
   background: ${({ width }) => (width === '100%' ? 'transparent' : '#2c6b94')};
   z-index: 1;
-  transition: width 0.3s;
+  transition: width 0.1s;
 `
 export const RedWrapper = styled(Wrapper)`
   color: ${({ ghost }) => (ghost ? theme('baseColor.red') : 'white')};
   background-color: ${({ ghost }) =>
     !ghost ? theme('baseColor.red') : 'transparent'};
-  border-color: ${theme('baseColor.red')};
+
+  border-color: ${({ noBorder }) =>
+    noBorder ? 'transparent' : theme('baseColor.red')};
 
   &:hover {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
   &:focus {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
   &:active {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
-  transition: all 0.25s;
+  transition: all 0.1s;
 `
diff --git a/src/components/Buttons/styles/metircs/arrow_button.ts b/src/components/Buttons/styles/metircs/arrow_button.ts
index 1134a6196..6e8a7ad4d 100644
--- a/src/components/Buttons/styles/metircs/arrow_button.ts
+++ b/src/components/Buttons/styles/metircs/arrow_button.ts
@@ -17,25 +17,6 @@ const MEDIUM_MARGIN_HOVER = 10
 const LARGE_MARGIN = 6
 const LARGE_MARGIN_HOVER = 10
 
-// arrow button should have width
-// otherwise the arrow will jump
-export const getWidth = (size: string, width = 30): string => {
-  switch (size) {
-    case SIZE.TINY: {
-      return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
-    }
-    case SIZE.SMALL: {
-      return `${width + SMALL_SIZE + SMALL_MARGIN_HOVER}px`
-    }
-    case SIZE.MEDIUM: {
-      return `${width + MEDIUM_SIZE + MEDIUM_MARGIN_HOVER}px`
-    }
-    default: {
-      return `${width + LARGE_SIZE + LARGE_MARGIN_HOVER}px`
-    }
-  }
-}
-
 export const getIconSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
@@ -103,3 +84,55 @@ export const getSimpleMargin = (size: string, hover = false): string => {
     }
   }
 }
+
+//
+export const getArrowTopOffset = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '3px;'
+    }
+    case SIZE.SMALL: {
+      return '4px;'
+    }
+    case SIZE.MEDIUM: {
+      return '5px;'
+    }
+    default: {
+      return '6px;'
+    }
+  }
+}
+
+export const getArrowMaxWidth = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '18px;'
+    }
+    case SIZE.SMALL: {
+      return '20px;'
+    }
+    case SIZE.MEDIUM: {
+      return '25px;'
+    }
+    default: {
+      return '28px;'
+    }
+  }
+}
+
+export const getArrowInitWidth = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '15px;'
+    }
+    case SIZE.SMALL: {
+      return '17px;'
+    }
+    case SIZE.MEDIUM: {
+      return '20px;'
+    }
+    default: {
+      return '23px;'
+    }
+  }
+}
diff --git a/src/components/Buttons/styles/metircs/button.ts b/src/components/Buttons/styles/metircs/button.ts
index d90f0cb70..ec89af09c 100644
--- a/src/components/Buttons/styles/metircs/button.ts
+++ b/src/components/Buttons/styles/metircs/button.ts
@@ -63,7 +63,7 @@ export const getHeight = (size: string): string => {
 export const getPadding = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
-      return '1px 5px'
+      return '0 4px'
     }
 
     case SIZE.SMALL: {
diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts
index 46b3719f5..bee319b66 100755
--- a/src/components/Checker/styles/index.ts
+++ b/src/components/Checker/styles/index.ts
@@ -35,8 +35,8 @@ export const Icon = styled(Img)<TItem>`
   cursor: pointer;
 `
 export const ChildWrapper = styled.div<TItem>`
-  color: ${theme('thread.articleDigest')};
-  opacity: ${({ checked }) => (checked ? 1 : 0.9)};
+  color: ${({ checked }) =>
+    checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: ${({ size }) => getFontSize(size)};
   margin-left: 6px;
   cursor: pointer;
diff --git a/src/components/Folder/Content.js b/src/components/Folder/Content.js
deleted file mode 100644
index 3e748842b..000000000
--- a/src/components/Folder/Content.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import { Wrapper, TextWrapper, Cover } from './styles/content'
-
-const Content = ({ contentType, cover, desc }) => {
-  switch (contentType) {
-    case 'text': {
-      return (
-        <TextWrapper>
-          {desc}, djifek d djifek idfk d fjdekj idfkjei dfkejife dfjei
-        </TextWrapper>
-      )
-    }
-
-    default:
-      return (
-        <Wrapper>
-          <Cover src={cover} />
-        </Wrapper>
-      )
-  }
-}
-
-export default React.memo(Content)
diff --git a/src/components/Folder/Content.tsx b/src/components/Folder/Content.tsx
new file mode 100644
index 000000000..a8fbb0b95
--- /dev/null
+++ b/src/components/Folder/Content.tsx
@@ -0,0 +1,31 @@
+import { FC, memo } from 'react'
+import TimeAgo from 'timeago-react'
+
+import { ICON } from '@/config'
+
+import { Wrapper, Info, Total, Unit, Text, LockIcon } from './styles/content'
+
+type TProps = {
+  total?: number
+  updatedAt?: string
+  lock?: boolean
+  inactive: boolean
+}
+
+const Content: FC<TProps> = ({ total, updatedAt, lock, inactive }) => {
+  return (
+    <Wrapper inactive={inactive}>
+      {lock && <LockIcon src={`${ICON}/shape/lock.svg`} />}
+      <Info>
+        <Total>
+          {total} <Unit>项</Unit>
+        </Total>
+        <Text>
+          <TimeAgo datetime={updatedAt} locale="zh_CN" />
+        </Text>
+      </Info>
+    </Wrapper>
+  )
+}
+
+export default memo(Content)
diff --git a/src/components/Folder/DetailInfo.tsx b/src/components/Folder/DetailInfo.tsx
new file mode 100644
index 000000000..8016db1a0
--- /dev/null
+++ b/src/components/Folder/DetailInfo.tsx
@@ -0,0 +1,22 @@
+import { FC, memo } from 'react'
+import { Wrapper, Title, Desc } from './styles/detail_info'
+
+const DetailInfo: FC = () => {
+  return (
+    <Wrapper>
+      <Title>名称</Title>
+      <Desc>新收藏夹</Desc>
+
+      <Title>内容数</Title>
+      <Desc>12 项</Desc>
+
+      <Title>最后更新时间</Title>
+      <Desc>3 天前</Desc>
+
+      <Title>是否公开</Title>
+      <Desc>公开</Desc>
+    </Wrapper>
+  )
+}
+
+export default memo(DetailInfo)
diff --git a/src/components/Folder/Footer.js b/src/components/Folder/Footer.js
deleted file mode 100644
index 5f33483a2..000000000
--- a/src/components/Folder/Footer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import TimeAgo from 'timeago-react'
-
-import { ICON_CMD } from '@/config'
-
-import { Wrapper, Title, Intro, Total, Update, LockIcon } from './styles/footer'
-
-const Footer = ({ title, total, updatedAt, lock, onClick }) => {
-  return (
-    <Wrapper onClick={onClick}>
-      <Title>
-        {title}
-        {lock && <LockIcon src={`${ICON_CMD}/lock.svg`} />}
-      </Title>
-      <Intro>
-        <Total>共 {total} 项</Total>
-        <Update>
-          <TimeAgo datetime={updatedAt} locale="zh_CN" />
-        </Update>
-      </Intro>
-    </Wrapper>
-  )
-}
-
-export default React.memo(Footer)
diff --git a/src/components/Folder/Footer.tsx b/src/components/Folder/Footer.tsx
new file mode 100644
index 000000000..55c368af0
--- /dev/null
+++ b/src/components/Folder/Footer.tsx
@@ -0,0 +1,76 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import { IconButton, MenuButton } from '@/components/Buttons'
+import Tooltip from '@/components/Tooltip'
+
+import DetailInfo from './DetailInfo'
+// import { LavaLampLoading } from '@/components/Loading'
+import {
+  Wrapper,
+  Title,
+  Name,
+  FolderInfoPopWrapper,
+  MenuWrapper,
+  HintWrapper,
+  AddHint,
+} from './styles/footer'
+
+const menuOptions = [
+  {
+    key: 'edit',
+    icon: `${ICON}/edit/publish-pen.svg`,
+    title: '编辑',
+  },
+  {
+    key: 'lock',
+    icon: `${ICON}/shape/lock.svg`,
+    title: '加锁',
+  },
+]
+
+type TProps = {
+  title: string
+  inactive: boolean
+  onClick: () => void
+  onMenuClick?: (key: string) => void
+}
+
+const Footer: FC<TProps> = ({ title, onClick, onMenuClick, inactive }) => {
+  return (
+    <Wrapper onClick={onClick}>
+      <Title>
+        {!inactive ? (
+          <Tooltip
+            delay={600}
+            content={
+              <FolderInfoPopWrapper>
+                <DetailInfo />
+              </FolderInfoPopWrapper>
+            }
+            noPadding
+          >
+            <Name>{title}</Name>
+          </Tooltip>
+        ) : (
+          <Name>{title}</Name>
+        )}
+
+        {!inactive && (
+          <MenuButton options={menuOptions} onClick={onMenuClick}>
+            <MenuWrapper>
+              <IconButton path="shape/more-l.svg" mRight={0} />
+            </MenuWrapper>
+          </MenuButton>
+        )}
+      </Title>
+      <HintWrapper>
+        {/* <LavaLampLoading size="small" /> */}
+        {/* <Hint>已收入</Hint> */}
+        {/* <AddHint>已收入</AddHint> */}
+      </HintWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Footer)
diff --git a/src/components/Folder/index.js b/src/components/Folder/index.js
deleted file mode 100755
index ec5a7fda1..000000000
--- a/src/components/Folder/index.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- *
- * Folder
- * see orignal example at: https://codepen.io/mydearxym2/pen/YzyLYqL
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { ICON_CMD } from '@/config'
-import { SIZE } from '@/constant'
-import { buildLog } from '@/utils'
-
-import Content from './Content'
-import Footer from './Footer'
-
-import { Wrapper, TabShape, EditIconWrapper, EditIcon } from './styles'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:Folder:index')
-
-const Folder = ({
-  size,
-  title,
-  desc,
-  cover,
-  total,
-  updatedAt,
-  lock,
-  editable,
-  contentType,
-  onEdit,
-  onSelect,
-}) => {
-  return (
-    <Wrapper testid="folder" size={size}>
-      {editable && (
-        <EditIconWrapper onClick={onEdit}>
-          <EditIcon src={`${ICON_CMD}/edit.svg`} />
-        </EditIconWrapper>
-      )}
-      <TabShape />
-      <Content contentType={contentType} cover={cover} desc={desc} />
-      <Footer
-        title={title}
-        total={total}
-        updatedAt={updatedAt}
-        lock={lock}
-        onClick={onSelect}
-      />
-    </Wrapper>
-  )
-}
-
-Folder.propTypes = {
-  title: T.string,
-  desc: T.string,
-  cover: T.string,
-  total: T.number,
-  updatedAt: T.string,
-  lock: T.bool,
-  editable: T.bool,
-  onEdit: T.func,
-  onSelect: T.func,
-  contentType: T.oneOf(['text', 'cover']),
-  size: T.oneOf([SIZE.SMALL, SIZE.MEDIUM]),
-}
-
-Folder.defaultProps = {
-  title: '计算机名人堂',
-  desc: 'desc',
-  cover:
-    'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/arch/wqsqpsngny.jpeg',
-  total: 5,
-  updatedAt: '2019-05-03T14:32:09Z',
-  lock: false,
-  editable: false,
-  onEdit: log,
-  onSelect: log,
-  contentType: 'text',
-  size: SIZE.MEDIUM,
-}
-
-export default React.memo(Folder)
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
new file mode 100755
index 000000000..68e502552
--- /dev/null
+++ b/src/components/Folder/index.tsx
@@ -0,0 +1,67 @@
+/*
+ *
+ * Folder
+ * see orignal example at: https://codepen.io/mydearxym2/pen/YzyLYqL
+ *
+ */
+
+import { FC, memo } from 'react'
+import { TSIZE_SM } from '@/spec'
+
+import { ICON_CMD } from '@/config'
+import { SIZE } from '@/constant'
+import { buildLog } from '@/utils'
+
+import Content from './Content'
+import Footer from './Footer'
+
+import { Wrapper, TabShape } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Folder:index')
+
+type TProps = {
+  title?: string
+  total?: number
+  updatedAt?: string
+  lock?: boolean
+  editable?: boolean
+  size?: TSIZE_SM
+  inactive?: boolean
+  onEdit?: () => void
+  onSelect?: () => void
+  onMenuClick?: (key: string) => void
+}
+
+const Folder: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  title = '新收藏夹',
+  total = 12,
+  updatedAt = '',
+  lock = false,
+  inactive = false,
+  editable = false,
+  onEdit = log,
+  onSelect = log,
+  onMenuClick = log,
+}) => {
+  return (
+    <Wrapper testid="folder" size={size}>
+      <TabShape />
+      <Content
+        total={total}
+        lock={lock}
+        updatedAt={updatedAt}
+        inactive={inactive}
+      />
+      <Footer
+        title={title}
+        onClick={onSelect}
+        onMenuClick={onMenuClick}
+        inactive={inactive}
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(Folder)
diff --git a/src/components/Folder/styles/content.ts b/src/components/Folder/styles/content.ts
index e85f72532..931f0aa66 100644
--- a/src/components/Folder/styles/content.ts
+++ b/src/components/Folder/styles/content.ts
@@ -1,23 +1,50 @@
 import styled from 'styled-components'
 
 import Img from '@/Img'
-import { theme } from '@/utils'
+import { css, theme } from '@/utils'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ inactive: boolean }>`
+  ${css.flex('align-end', 'justify-end')};
+  position: relative;
   width: 100%;
-  height: calc(100% - 40px);
-  margin-bottom: 5px;
+  height: 100%;
+  background-color: #025061;
+  border-radius: 5px;
+  border-top-left-radius: 0;
+  padding-right: 8px;
+  padding-bottom: 6px;
+
+  border: 1px solid;
+  border-color: transparent;
+  box-shadow: -3px -7px 5px -5px rgb(0 0 0 / 8%);
+
   flex-grow: 1;
+  color: ${theme('thread.articleDigest')};
+
+  &:hover {
+    border-color: ${({ inactive }) => (inactive ? 'transparent' : '#117eaf')};
+    cursor: ${({ inactive }) => (inactive ? 'normal' : 'pointer')};
+  }
 `
-export const TextWrapper = styled(Wrapper)`
-  padding-top: 3px;
+export const Info = styled.div``
+export const Text = styled.div`
   color: ${theme('thread.articleDigest')};
-  border-bottom: 1px solid;
-  border-bottom-color: #1b556b;
+  font-size: 10px;
+  text-align: right;
 `
-export const Cover = styled(Img)`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 4px;
+export const Unit = styled(Text)`
+  display: inline-block;
+`
+export const Total = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 12px;
+  text-align: right;
+`
+export const LockIcon = styled(Img)`
+  position: absolute;
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(11)};
+
+  left: 8px;
+  bottom: 9px;
 `
diff --git a/src/components/Folder/styles/detail_info.ts b/src/components/Folder/styles/detail_info.ts
new file mode 100644
index 000000000..e564170ee
--- /dev/null
+++ b/src/components/Folder/styles/detail_info.ts
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn('align-start')};
+  padding: 10px;
+`
+export const Title = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 10px;
+  margin-bottom: 2px;
+`
+export const Desc = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 12px;
+  margin-bottom: 6px;
+`
diff --git a/src/components/Folder/styles/footer.ts b/src/components/Folder/styles/footer.ts
index 46b857e81..3821a533f 100644
--- a/src/components/Folder/styles/footer.ts
+++ b/src/components/Folder/styles/footer.ts
@@ -1,29 +1,54 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
 import { css, theme } from '@/utils'
+import { Wrapper as FolderWrapper } from './index'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn()};
-  cursor: pointer;
+  position: relative;
+  ${css.flexColumn('align-center')};
+  text-align: center;
+  margin-top: 4px;
 `
 export const Title = styled.div`
-  ${css.flex('align-center', 'justify-between')};
+  ${css.flex('align-center')};
+  text-align: center;
+  margin-top: 5px;
+`
+export const Name = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 3px;
+  ${css.cutRest('68px')};
 `
-export const Intro = styled.div`
-  ${css.flex('justify-between', 'align-center')};
-  color: ${theme('thread.articleDigest')};
-  font-size: 12px;
+export const FolderInfoPopWrapper = styled.div`
+  width: 100px;
+  height: 160px;
+  overflow-x: hidden;
+  overflow-y: scroll;
 `
-export const Total = styled.div``
-export const Update = styled.div``
+export const MenuWrapper = styled.div`
+  position: absolute;
+  right: -10px;
+  top: -8px;
+  opacity: 0;
+  /* visibility: hidden; */
 
-export const LockIcon = styled(Img)`
-  fill: ${theme('thread.articleDigest')};
-  ${css.size(12)};
-  margin-top: -1px;
+  ${Title}:hover & {
+    opacity: 1;
+  }
+`
+export const HintWrapper = styled.div`
+  ${css.flexColumn('align-center')};
+  height: 14px;
+  width: 100%;
+`
+export const Hint = styled.div`
+  color: ${theme('button.primary')};
+  font-size: 12px;
+  cursor: pointer;
+`
+export const AddHint = styled(Hint)`
+  display: none;
+  ${FolderWrapper}:hover & {
+    display: block;
+  }
 `
diff --git a/src/components/Folder/styles/index.ts b/src/components/Folder/styles/index.ts
index 55156ebe8..bd0bd7af1 100755
--- a/src/components/Folder/styles/index.ts
+++ b/src/components/Folder/styles/index.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
-import Img from '@/Img'
-import { css, theme } from '@/utils'
+import { css } from '@/utils'
 
 import { getWidth, getHeight } from './metric'
 
@@ -11,56 +10,31 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TTestable & { size: string }>`
   position: relative;
   ${css.flexColumn()};
-  background-color: #004351;
   width: ${({ size }) => getWidth(size)};
   height: ${({ size }) => getHeight(size)};
 
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
-  padding: 10px;
-  padding-top: 8px;
 `
 export const TabShape = styled.div`
   position: absolute;
+  background-color: #054956;
   height: 10px;
   left: 0;
   bottom: 100%;
   display: block;
   width: 40%;
   border-top-left-radius: 8px;
-  background-color: inherit;
   &:after {
     content: '';
     position: absolute;
     display: block;
     top: 0;
     left: calc(100% - 10px);
-    border-bottom: 10px solid #004351;
+    border-bottom: 10px solid;
+    border-bottom-color: #054956;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
   }
 `
-export const EditIconWrapper = styled.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  ${css.flex('justify-center')};
-  z-index: 1;
-  ${css.size(30)};
-  background: #004351;
-  opacity: 0;
-
-  ${Wrapper}:hover & {
-    opacity: 1;
-    cursor: pointer;
-  }
-
-  transition: all 0.25s;
-`
-export const EditIcon = styled(Img)`
-  fill: ${theme('thread.articleTitle')};
-  ${css.size(18)};
-  display: block;
-  z-index: 2;
-`
diff --git a/src/components/Folder/styles/metric.ts b/src/components/Folder/styles/metric.ts
index b529ec778..e652d3967 100644
--- a/src/components/Folder/styles/metric.ts
+++ b/src/components/Folder/styles/metric.ts
@@ -6,7 +6,7 @@ export const getWidth = (type: string): string => {
       return '240px'
 
     default:
-      return '190px'
+      return '75px'
   }
 }
 
@@ -16,6 +16,6 @@ export const getHeight = (type: string): string => {
       return '180px'
 
     default:
-      return '140px'
+      return '100px'
   }
 }
diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts
index aca079664..9c0ffa8b9 100755
--- a/src/components/Input/styles/index.ts
+++ b/src/components/Input/styles/index.ts
@@ -62,7 +62,7 @@ export const baseInput = `
 export const InputWrapper = styled.input<IInput>`
   ${baseInput};
   padding: 4px 11px;
-  height: 36px;
+  height: 34px;
   font-size: 14px;
   line-height: 1.5;
   text-align: left;
diff --git a/src/components/Modal/styles/index.ts b/src/components/Modal/styles/index.ts
index 4022ced59..511f19b87 100755
--- a/src/components/Modal/styles/index.ts
+++ b/src/components/Modal/styles/index.ts
@@ -29,9 +29,10 @@ export const Wrapper = styled.div<TWrapper>`
   margin: 0 auto;
   top: ${({ offsetTop }) => offsetTop};
   width: ${({ width }) => width};
+  height: auto;
   border-radius: 8px;
   min-height: 320px;
-  max-height: 81vh;
+  max-height: 65vh;
   box-shadow: -5px 6px 37px -8px rgba(0, 0, 0, 0.42);
   /* border: 1px solid; */
   border-top: 3px solid;
@@ -44,7 +45,7 @@ export const Wrapper = styled.div<TWrapper>`
 `
 export const ChildrenWrapper = styled.div`
   min-height: 320px;
-  max-height: 80vh;
+  /* height: 100%; */
   height: auto;
   overflow-y: scroll;
 `
diff --git a/src/components/Tooltip/ConfirmFooter.tsx b/src/components/Tooltip/ConfirmFooter.tsx
index 81b13773c..68296adcb 100644
--- a/src/components/Tooltip/ConfirmFooter.tsx
+++ b/src/components/Tooltip/ConfirmFooter.tsx
@@ -5,27 +5,32 @@ import { Space } from '@/components/Common'
 
 import { FOOTER_BEHAVIOR } from './constant'
 
-import { Wrapper, ButtonsWrapper, CancelButton } from './styles/confirm_footer'
+import {
+  Wrapper,
+  ButtonsWrapper,
+  RedButton,
+  CancelButton,
+} from './styles/confirm_footer'
 
 type TProps = {
-  footerBehavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
+  behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
 
   onConfirm?: () => void
   onCancel?: () => void
 }
 
-const ConfirmFooter: FC<TProps> = ({ onConfirm, onCancel, footerBehavior }) => {
+const ConfirmFooter: FC<TProps> = ({ onConfirm, onCancel, behavior }) => {
   let content = null
 
-  switch (footerBehavior) {
+  switch (behavior) {
     case FOOTER_BEHAVIOR.DELETE_CONFIRM: {
       content = (
         <ButtonsWrapper>
-          <Button size="small" type="red" onClick={() => onConfirm?.()}>
-            确认删除
-          </Button>
-          <Space right={10} />
           <CancelButton onClick={onCancel}>取消</CancelButton>
+          <Space right={10} />
+          <Button size="tiny" type="red" onClick={() => onConfirm?.()}>
+            确定
+          </Button>
         </ButtonsWrapper>
       )
       break
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 38fb06205..6437cd25f 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -8,7 +8,7 @@ import { FC, ReactNode, useState, useRef, memo } from 'react'
 import { hideAll } from 'tippy.js'
 
 import type { TTooltipPlacement } from '@/spec'
-import { css, buildLog, isDescendant } from '@/utils'
+import { css, buildLog, isDescendant, isString } from '@/utils'
 import { useOutsideClick } from '@/hooks'
 
 import ConfirmFooter from './ConfirmFooter'
@@ -17,6 +17,7 @@ import { FOOTER_BEHAVIOR } from './constant'
 import {
   StyledTippy,
   NoPaddingStyledTippy,
+  ChildrenWrapper,
   ContentWrapper,
   TopArrow,
   BottomArrow,
@@ -37,7 +38,7 @@ type TProps = {
   hideOnClick?: boolean
   noPadding?: boolean
   showArrow?: boolean
-  footerBehavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
+  behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
   // currently only for AvatarsRow, it will collapse the height
   // for same reason, figure out later
   contentHeight?: string
@@ -46,7 +47,7 @@ type TProps = {
    * 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, 否则滑动遮罩会在最外面。
+   * 的 ChildrenWrapper z-index 置为 1, 否则滑动遮罩会在最外面。
    *
    * 理论上 zIndex 一直设置为 1，也没问题，但是会导致某些使用了 Tooltip 的地方有严重的粘滞感，比如 “CopyRight” 那里。
    * 暂时没有精力看 Tippy 的具体实现，小心使用。
@@ -70,7 +71,7 @@ const Tooltip: FC<TProps> = ({
   hideOnClick = true,
   showArrow = false,
   forceZIndex = false,
-  footerBehavior = 'default',
+  behavior = 'default',
   trigger = 'mouseenter focus',
   onConfirm,
   contentHeight,
@@ -79,43 +80,49 @@ const Tooltip: FC<TProps> = ({
   const [active, setActive] = useState(false)
 
   const ContentComp = showArrow ? (
-    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
+    <ChildrenWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       {active && placement === 'bottom' && <TopArrow />}
       {active && placement === 'top' && <BottomArrow />}
       {active && placement === 'right' && <LeftArrow />}
 
       <div>{children}</div>
-    </ContentWrapper>
+    </ChildrenWrapper>
   ) : (
-    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
+    <ChildrenWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       <div>{children}</div>
-    </ContentWrapper>
+    </ChildrenWrapper>
   )
 
   const contentRef = useRef()
 
   const PopoverContent = (
-    <div ref={contentRef}>
+    <ContentWrapper
+      ref={contentRef}
+      hasMaxWidth={isString(content)}
+      onClick={() => {
+        if (hideOnClick) instance?.hide()
+      }}
+    >
       {content}
-      {active && footerBehavior !== FOOTER_BEHAVIOR.DEFAULT && (
+      {active && behavior !== FOOTER_BEHAVIOR.DEFAULT && (
         <ConfirmFooter
           onConfirm={() => {
             onConfirm?.()
             instance?.hide()
           }}
           onCancel={() => instance?.hide()}
-          footerBehavior={footerBehavior}
+          behavior={behavior}
         />
       )}
-    </div>
+    </ContentWrapper>
   )
 
   const ref = useRef()
 
   useOutsideClick(ref, (e) => {
     if (!instance) return false
-    const isClickInsidePopover = isDescendant(contentRef?.current, e.target)
 
+    const isClickInsidePopover = isDescendant(contentRef?.current, e.target)
     if (hideOnClick || (!hideOnClick && !isClickInsidePopover)) {
       // if (instance) {
       // NOTE:  this is a hack, svg will swallow events like click
@@ -148,10 +155,9 @@ const Tooltip: FC<TProps> = ({
     },
     onShow: (instance) => {
       // see https://github.com/atomiks/tippyjs/issues/260#issuecomment-462031748
-      hideAll()
+      hideAll({ exclude: instance })
       setInstance(instance)
       setActive(true)
-      // tippy.hideAll({ exclude: instance })
       onShow?.()
     },
   }
diff --git a/src/components/Tooltip/styles/confirm_footer.ts b/src/components/Tooltip/styles/confirm_footer.ts
index 72fc4e373..f9273d85f 100644
--- a/src/components/Tooltip/styles/confirm_footer.ts
+++ b/src/components/Tooltip/styles/confirm_footer.ts
@@ -5,19 +5,30 @@ import { css, theme } from '@/utils'
 export const Wrapper = styled.div`
   ${css.flex('align-both')};
   margin-top: 10px;
-  margin-bottom: 10px;
   border-top: 1px solid;
   border-top-color: ${theme('popover.borderColor')};
 `
 export const ButtonsWrapper = styled.div`
+  padding-top: 8px;
   ${css.flex('align-both')};
-  padding-top: 15px;
+`
+export const RedButton = styled.div`
+  color: ${theme('baseColor.red')};
+  font-size: 13px;
+  filter: saturate(0.8);
+
+  &:hover {
+    cursor: pointer;
+    filter: saturate(1);
+  }
 `
 export const CancelButton = styled.div`
-  color: ${theme('button.primary')};
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  opacity: 0.8;
 
   &:hover {
-    color: ${theme('button.hoverBg')};
+    opacity: 1;
     cursor: pointer;
   }
 `
diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts
index d86008f30..482815e9d 100755
--- a/src/components/Tooltip/styles/index.ts
+++ b/src/components/Tooltip/styles/index.ts
@@ -27,11 +27,14 @@ export const NoPaddingStyledTippy = styled(StyledTippy)`
   }
 `
 type TContentWrapper = { contentHeight: string; forceZIndex: boolean }
-export const ContentWrapper = styled.div<TContentWrapper>`
+export const ChildrenWrapper = styled.div<TContentWrapper>`
   position: relative;
   height: ${({ contentHeight }) => contentHeight};
   z-index: ${({ forceZIndex }) => (forceZIndex ? 1 : 0)};
 `
+export const ContentWrapper = styled.div<{ hasMaxWidth: boolean }>`
+  max-width: ${({ hasMaxWidth }) => (hasMaxWidth ? '180px' : 'auto')};
+`
 const Arrow = styled.div`
   position: absolute;
   ${css.circle(4)};
diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx
index 7e6756d3e..25433916b 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx
+++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx
@@ -11,6 +11,8 @@ import { METRIC } from '@/constant'
 import { useScroll } from '@/hooks'
 import { pluggedIn, buildLog } from '@/utils'
 
+import CollectionFolder from '@/containers/tool/CollectionFolder'
+
 import FixedHeader from './FixedHeader'
 import Layout from './Layout'
 
@@ -45,6 +47,7 @@ const ArticleDigestContainer: FC<TProps> = ({
 
   return (
     <Wrapper testid={testid} metric={metric}>
+      <CollectionFolder />
       <FixedHeader
         show={!inViewport}
         article={viewingArticle}
diff --git a/src/containers/digest/ArticleDigest/MobileView/index.tsx b/src/containers/digest/ArticleDigest/MobileView/index.tsx
index e81f57c66..110f75c85 100644
--- a/src/containers/digest/ArticleDigest/MobileView/index.tsx
+++ b/src/containers/digest/ArticleDigest/MobileView/index.tsx
@@ -12,8 +12,6 @@ import type { TScrollDirection } from '@/spec'
 import { useScroll } from '@/hooks'
 import { pluggedIn, buildLog } from '@/utils'
 
-import FavoritesCats from '@/containers/tool/FavoritesCats'
-
 import ArticleBaseStats from '@/components/ArticleBaseStats'
 import PublishDate from '../DesktopView/PostLayout/PublishDate'
 
@@ -44,7 +42,6 @@ const ArticleDigestContainer: FC<TProps> = ({ articleDigest: store }) => {
 
   return (
     <Wrapper>
-      <FavoritesCats />
       <InnerWrapper>
         <BannerContent>
           <Brief>
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index 722b4acef..8464c49b3 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -17,7 +17,7 @@ const Footer: FC<TProps> = ({ view }) => {
       {/* <Note>举报后社区志愿者会在第一时间【处理】。</Note> */}
       <YesOrNoButtons
         cancelText="上一步"
-        confirmText="举报"
+        confirmText="提交"
         onCancel={goBack}
       />
     </Wrapper>
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 101a8e7b1..f99dc9191 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -11,7 +11,7 @@ import {
   Option,
   SelectWrapper,
   Title,
-  Panel,
+  FooterPanel,
 } from '../styles/report_content/main'
 import { selectItem } from '../logic'
 
@@ -35,7 +35,7 @@ const Main: FC<TProps> = ({ items, activeItem }) => {
             </Option>
           ))}
       </OptionsWrapper>
-      <Panel>感谢你用实际行动为社区净化作出贡献。</Panel>
+      <FooterPanel>感谢你用实际行动为社区净化作出贡献。</FooterPanel>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
index 8dc175a00..18ed0779a 100644
--- a/src/containers/tool/AbuseReport/styles/header.ts
+++ b/src/containers/tool/AbuseReport/styles/header.ts
@@ -7,10 +7,10 @@ export const Wrapper = styled.div<{ showShadow: boolean }>`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
   background: ${theme('modal.bg')};
-  padding: 20px 38px;
+  /* padding: 20px 38px; */
+  padding: ${({ showShadow }) => (showShadow ? '12px 38px' : '20px 38px')};
   filter: ${({ showShadow }) =>
     showShadow ? theme('modal.subPanelShadow') : ''};
-  /* filter: ${theme('modal.subPanelShadow')}; */
   z-index: 1;
 `
 export const ReportIcon = styled(Img)`
diff --git a/src/containers/tool/AbuseReport/styles/report_content/main.ts b/src/containers/tool/AbuseReport/styles/report_content/main.ts
index ffb0b0726..d9f04a63e 100644
--- a/src/containers/tool/AbuseReport/styles/report_content/main.ts
+++ b/src/containers/tool/AbuseReport/styles/report_content/main.ts
@@ -13,13 +13,13 @@ export const OptionsWrapper = styled.div`
   background: ${theme('modal.bg')};
   filter: ${theme('modal.subPanelShadow')};
 `
-export const Panel = styled.div`
+export const FooterPanel = styled.div`
   ${css.flex('align-center')};
   padding-left: 35px;
   width: 100%;
   background: ${theme('modal.subPanel')};
   /* background: ${theme('modal.panelBg')}; */
-  height: 50px;
+  height: 56px;
   color: ${theme('thread.articleDigest')};
   font-size: 13px;
 `
diff --git a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
index a35fcc122..a1f2984f8 100644
--- a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
+++ b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
@@ -7,6 +7,7 @@ import { IconButton } from '@/components/Buttons'
 import Upvote from '@/components/Upvote'
 
 import { Wrapper } from '../styles/right_sticker/default_sticker'
+import { collectArticle } from '../logic'
 
 type TProps = {
   show: boolean
@@ -19,6 +20,7 @@ const ArticleSticker: FC<TProps> = ({ show, article }) => {
       <Upvote count={article.starredCount} type="article" />
       <IconButton
         path="article/collect-bookmark.svg"
+        onClick={collectArticle}
         size={23}
         mLeft={2}
         mTop={18}
@@ -26,7 +28,7 @@ const ArticleSticker: FC<TProps> = ({ show, article }) => {
       />
       <IconButton
         path="article/share-solid.svg"
-        onClick={() => shareTo()}
+        onClick={shareTo}
         size={20}
         mLeft={4}
         mTop={12}
diff --git a/src/containers/tool/ArticleSticker/logic.ts b/src/containers/tool/ArticleSticker/logic.ts
index 779b97bda..810d71edf 100755
--- a/src/containers/tool/ArticleSticker/logic.ts
+++ b/src/containers/tool/ArticleSticker/logic.ts
@@ -1,7 +1,8 @@
 import { useEffect } from 'react'
 // import { } from 'ramda'
 
-import { buildLog } from '@/utils'
+import { EVENT } from '@/constant'
+import { buildLog, send } from '@/utils'
 // import S from './service'
 import type { TStore } from './store'
 
@@ -17,6 +18,12 @@ export const toggleTocMenu = (): void => {
   store.mark({ isTocMenuOpened, isLeftStickerLocked })
 }
 
+export const collectArticle = (): void => {
+  send(EVENT.SET_FAVORITE_CONTENT, {
+    data: { thread: store.activeThread },
+  })
+}
+
 // ###############################
 // init & uninit handlers
 // ###############################
diff --git a/src/containers/tool/CollectionFolder/Creator.tsx b/src/containers/tool/CollectionFolder/Creator.tsx
new file mode 100755
index 000000000..d429b41a1
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/Creator.tsx
@@ -0,0 +1,107 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import type { TCollectionFolder } from '@/spec'
+import { buildLog } from '@/utils'
+
+import Input from '@/components/Input'
+import { ArrowButton, Button } from '@/components/Buttons'
+import { Br, Space, SpaceGrow } from '@/components/Common'
+import Folder from '@/components/Folder'
+import IconText from '@/components/IconText'
+import Checker from '@/components/Checker'
+
+import {
+  Wrapper,
+  Header,
+  InnerWrapper,
+  SidebarWrapper,
+  TipsText,
+  NoteText,
+  EditWrapper,
+  FormItemWrapper,
+  FormLabel,
+  FormInput,
+  Footer,
+} from './styles/editor'
+
+import {
+  categoryOnChange,
+  privateOnChange,
+  onCategoryCreate,
+  switchToSetter,
+} from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:CollectionFolder:Creator')
+
+type TProps = {
+  data: TCollectionFolder
+  show: boolean
+}
+
+const Creator: FC<TProps> = ({ data, show }) => (
+  <Wrapper show={show} className="normal-form">
+    <Header>创建新收藏夹</Header>
+    <InnerWrapper>
+      <SidebarWrapper>
+        <Folder inactive lock />
+        <Br bottom={30} />
+        <IconText iconSrc={`${ICON}/route/light.svg`}>Tips</IconText>
+        <TipsText>
+          你可以将不同板块的内容归类到不同的收藏夹中，方便往后查找。
+        </TipsText>
+      </SidebarWrapper>
+      <EditWrapper>
+        <FormItemWrapper>
+          <FormLabel>收藏夹标题</FormLabel>
+          <FormInput>
+            <Input
+              placeholder="//必填项"
+              value={data.title}
+              onChange={categoryOnChange('title')}
+            />
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <FormLabel>描述信息</FormLabel>
+          <FormInput>
+            <Input
+              value={data.desc}
+              onChange={categoryOnChange('desc')}
+              placeholder="//可选项"
+              behavior="textarea"
+            />
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <Checker
+            checked={false}
+            // onChange={privateOnChange}
+            // onChange={(checked) => updateWorks('isOSS', checked)}
+            size="small"
+          >
+            上锁
+          </Checker>
+          {/* <NoteText>
+            完全公开，允许互联网上的任何人查看该收藏夹里的内容。
+          </NoteText> */}
+          <NoteText>不公开，收藏夹里的内容仅自己可见。</NoteText>
+        </FormItemWrapper>
+        <SpaceGrow />
+        <Footer>
+          <ArrowButton size="tiny" direction="left" onClick={switchToSetter}>
+            上一步
+          </ArrowButton>
+          <Space right={18} />
+          <Button type="primary" onClick={onCategoryCreate} size="small">
+            创建
+          </Button>
+          <Space right={50} />
+        </Footer>
+      </EditWrapper>
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default memo(Creator)
diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
new file mode 100755
index 000000000..c0870ad76
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -0,0 +1,77 @@
+import { FC, memo, useCallback } from 'react'
+import { TID } from '@/spec'
+
+import { Button } from '@/components/Buttons'
+import { Space } from '@/components/Common'
+import Folder from '@/components/Folder'
+
+import {
+  Wrapper,
+  Header,
+  Artiment,
+  ListWrapper,
+  FolderWrapper,
+  Footer,
+} from './styles/setter'
+
+import {
+  setContent,
+  unSetContent,
+  switchToCreator,
+  switchToUpdater,
+} from './logic'
+
+type TProps = {
+  show: boolean
+  selectedId: TID
+}
+
+const Setter: FC<TProps> = ({ show, selectedId }) => {
+  const handleMenu = useCallback((key) => {
+    if (key === 'edit') switchToUpdater()
+  }, [])
+
+  return (
+    <Wrapper show={show}>
+      <Header>
+        添加<Artiment>某篇文章或评论</Artiment>到收藏夹
+      </Header>
+      <ListWrapper>
+        <FolderWrapper>
+          <Folder onMenuClick={handleMenu} lock />
+        </FolderWrapper>
+
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+        <FolderWrapper>
+          <Folder lock />
+        </FolderWrapper>
+      </ListWrapper>
+      <Footer>
+        选择要收入的收藏夹，或者
+        <Space right={10} />
+        <Button type="primary" onClick={switchToCreator} size="small" ghost>
+          创建新收藏夹
+        </Button>
+      </Footer>
+    </Wrapper>
+  )
+}
+
+export default memo(Setter)
diff --git a/src/containers/tool/CollectionFolder/Updater.tsx b/src/containers/tool/CollectionFolder/Updater.tsx
new file mode 100755
index 000000000..55457bb27
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/Updater.tsx
@@ -0,0 +1,118 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import type { TCollectionFolder } from '@/spec'
+import { buildLog } from '@/utils'
+
+import Input from '@/components/Input'
+import { ArrowButton, Button } from '@/components/Buttons'
+import { Br, Space, SpaceGrow } from '@/components/Common'
+import Folder from '@/components/Folder'
+import IconText from '@/components/IconText'
+import Checker from '@/components/Checker'
+import Tooltip from '@/components/Tooltip'
+
+import {
+  Wrapper,
+  Header,
+  InnerWrapper,
+  SidebarWrapper,
+  TipsText,
+  NoteText,
+  EditWrapper,
+  FormItemWrapper,
+  FormLabel,
+  FormInput,
+  Footer,
+} from './styles/editor'
+
+import {
+  categoryOnChange,
+  privateOnChange,
+  onCategoryCreate,
+  switchToSetter,
+} from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:CollectionFolder:Updater')
+
+type TProps = {
+  data: TCollectionFolder
+  show: boolean
+}
+
+const Updater: FC<TProps> = ({ data, show }) => (
+  <Wrapper show={show} className="normal-form">
+    <Header>编辑收藏夹</Header>
+    <InnerWrapper>
+      <SidebarWrapper>
+        <Folder inactive lock />
+        <Br bottom={30} />
+        <IconText iconSrc={`${ICON}/route/light.svg`}>说明</IconText>
+        <TipsText>编辑仅会影响收藏夹封面，已收藏内容不受影响。</TipsText>
+        <SpaceGrow />
+        <Br bottom={42} />
+
+        <Tooltip
+          trigger="click"
+          content="删除后收藏夹内的内容将全部丢失，确定继续？"
+          behavior="delete-confirm"
+        >
+          <Button type="red" size="small" ghost>
+            删除收藏夹
+          </Button>
+        </Tooltip>
+      </SidebarWrapper>
+      <EditWrapper>
+        <FormItemWrapper>
+          <FormLabel>收藏夹标题</FormLabel>
+          <FormInput>
+            <Input
+              placeholder="//必填项"
+              value={data.title}
+              onChange={categoryOnChange('title')}
+            />
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <FormLabel>描述信息</FormLabel>
+          <FormInput>
+            <Input
+              value={data.desc}
+              onChange={categoryOnChange('desc')}
+              placeholder="//可选项"
+              behavior="textarea"
+            />
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <Checker
+            checked={false}
+            // onChange={privateOnChange}
+            // onChange={(checked) => updateWorks('isOSS', checked)}
+            size="small"
+          >
+            上锁
+          </Checker>
+          {/* <NoteText>
+            完全公开，允许互联网上的任何人查看该收藏夹里的内容。
+          </NoteText> */}
+          <NoteText>不公开，收藏夹里的内容仅自己可见。</NoteText>
+        </FormItemWrapper>
+        <SpaceGrow />
+        <Footer>
+          <ArrowButton size="tiny" direction="left" onClick={switchToSetter}>
+            上一步
+          </ArrowButton>
+          <Space right={18} />
+          <Button type="primary" onClick={onCategoryCreate} size="small">
+            更新
+          </Button>
+          <Space right={50} />
+        </Footer>
+      </EditWrapper>
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default memo(Updater)
diff --git a/src/containers/tool/CollectionFolder/index.tsx b/src/containers/tool/CollectionFolder/index.tsx
new file mode 100755
index 000000000..5673da1bd
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/index.tsx
@@ -0,0 +1,90 @@
+//
+
+/*
+ *
+ * CollectionFolder
+ *
+ */
+
+import { FC, Fragment } from 'react'
+
+import { pluggedIn, buildLog } from '@/utils'
+import { ICON_CMD } from '@/config'
+
+import type { TStore } from './store'
+
+import Modal from '@/components/Modal'
+import SectionLabel from '@/components/SectionLabel'
+
+import Creator from './Creator'
+import Updater from './Updater'
+import Setter from './Setter'
+
+import { Wrapper, AdderWrapper, AdderText, AdderIcon } from './styles'
+import { useInit, onModalClose, changeViewTo } from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:CollectionFolder')
+
+type TProps = {
+  collectionFolder?: TStore
+  testid?: string
+  onSelect?: () => void
+}
+
+const CollectionFolderContainer: FC<TProps> = ({
+  collectionFolder: store,
+  testid = 'collection-folder',
+  onSelect = log,
+}) => {
+  useInit(store)
+
+  const {
+    viewingData,
+    displayMode,
+    isCreatorView,
+    isUpdaterView,
+    isSetterView,
+    showModal,
+    editCategoryData,
+    pagedCategoriesData,
+    isSelfViewing,
+  } = store
+
+  const { entries } = pagedCategoriesData
+
+  return (
+    <Fragment>
+      {displayMode === 'list' && (
+        <SectionLabel
+          title="收藏夹"
+          iconSrc={`${ICON_CMD}/folder.svg`}
+          addonNode={
+            <>
+              {isSelfViewing && (
+                <AdderWrapper onClick={changeViewTo('creator')}>
+                  <AdderIcon src={`${ICON_CMD}/add_circle.svg`} />
+                  <AdderText>创建</AdderText>
+                </AdderWrapper>
+              )}
+            </>
+          }
+        />
+      )}
+      <Modal width="500px" show={showModal} showCloseBtn onClose={onModalClose}>
+        <Wrapper>
+          <Setter
+            // entries={entries}
+            show={isSetterView}
+            // selectedId={viewingData.favoritedCategoryId}
+            selectedId="1"
+          />
+          <Creator data={editCategoryData} show={isCreatorView} />
+          <Updater data={editCategoryData} show={isUpdaterView} />
+        </Wrapper>
+      </Modal>
+    </Fragment>
+  )
+}
+
+export default pluggedIn(CollectionFolderContainer) as FC<TProps>
diff --git a/src/containers/tool/FavoritesCats/logic.js b/src/containers/tool/CollectionFolder/logic.ts
similarity index 74%
rename from src/containers/tool/FavoritesCats/logic.js
rename to src/containers/tool/CollectionFolder/logic.ts
index 3ad62175a..0d9e00153 100755
--- a/src/containers/tool/FavoritesCats/logic.js
+++ b/src/containers/tool/CollectionFolder/logic.ts
@@ -1,22 +1,25 @@
 import { useEffect } from 'react'
 import { curry, toUpper } from 'ramda'
 
+import type { TID } from '@/spec'
 import { PAGE_SIZE } from '@/config'
 import { EVENT, ERR } from '@/constant'
 import { asyncSuit, buildLog, send, errRescue, updateEditing } from '@/utils'
 
+import type { TStore } from './store'
 import S from './schema'
 
 /* eslint-disable-next-line */
-const log = buildLog('L:FavoritesCats')
+const log = buildLog('L:CollectionFolder')
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
+  /* @ts-ignore */
   receive: [EVENT.SET_FAVORITE_CONTENT],
 })
 
 let sub$ = null
-let store = null
+let store: TStore | undefined
 
 // export const categoryOnChange = (part, e) => updateEditing(store, part, e)
 export const categoryOnChange = curry(
@@ -24,7 +27,7 @@ export const categoryOnChange = curry(
   // store.updateEditing({ [part]: e.target.value })
 )
 
-export const privateOnChange = (item) => {
+export const privateOnChange = (item): void => {
   const { editCategoryData } = store
 
   const editCategory = {
@@ -35,23 +38,23 @@ export const privateOnChange = (item) => {
   store.mark({ editCategory })
 }
 
-export const onCategoryCreate = () => {
-  if (!store.validator('publish')) return false
+export const onCategoryCreate = (): void => {
+  if (!store.validator('publish')) return
 
   sr71$.mutate(S.createFavoriteCategory, store.editCategoryData)
 }
 
-export const onCategoryUpdate = () => {
-  if (!store.validator('publish')) return false
+export const onCategoryUpdate = (): void => {
+  if (!store.validator('publish')) return
   sr71$.mutate(S.updateFavoriteCategory, store.editCategoryData)
 }
 
-export const onCategoryDelete = () => {
+export const onCategoryDelete = (): void => {
   const { id } = store.editCategoryData
   sr71$.mutate(S.deleteFavoriteCategory, { id })
 }
 
-export const loadCategories = (page = 1) => {
+export const loadCategories = (page = 1): void => {
   const userId = store.viewingUser.id
 
   markLoading(true)
@@ -61,31 +64,36 @@ export const loadCategories = (page = 1) => {
   })
 }
 
-export const switchToUpdater = (editCategory) => {
-  store.mark({ editCategory })
+// export const switchToUpdater = (editCategory): void => {
+export const switchToUpdater = (): void => {
+  // store.mark({ editCategory })
   store.changeViewTo('updater')
 }
 
 /* eslint-disable-next-line */
 export const changeViewTo = curry((view, e) => store.changeViewTo(view))
 
-export const onSetterCreateCat = () => {
-  store.mark({ createfromSetter: true })
+export const switchToCreator = (): void => {
+  store.mark({ actionFromSetter: true })
   store.changeViewTo('creator')
 }
 
-export const onModalClose = () => {
-  if (store.createfromSetter) {
-    store.mark({ createfromSetter: false })
-    return store.changeViewTo('setter')
+export const switchToSetter = (): void => {
+  store.changeViewTo('setter')
+}
+
+export const onModalClose = (): void => {
+  if (store.actionFromSetter) {
+    store.mark({ actionFromSetter: false })
+    return switchToSetter()
   }
 
   store.mark({ showModal: false })
   store.cleanEditData()
 }
 
-export const setContent = (categoryId) => {
-  if (store.doing) return false
+export const setContent = (categoryId: TID): void => {
+  if (store.doing) return
 
   const { id } = store.viewingData
   const { thread } = store
@@ -99,8 +107,8 @@ export const setContent = (categoryId) => {
   sr71$.mutate(S.setFavorites, args)
 }
 
-export const unSetContent = (categoryId) => {
-  if (store.doing) return false
+export const unSetContent = (categoryId: TID): void => {
+  if (store.doing) return
 
   const { id } = store.viewingData
   const { thread } = store
@@ -134,10 +142,10 @@ const DataSolver = [
   {
     match: asyncRes('createFavoriteCategory'),
     action: () => {
-      // createfromSetter
+      // actionFromSetter
       loadCategories()
-      if (store.createfromSetter) {
-        store.mark({ createfromSetter: false })
+      if (store.actionFromSetter) {
+        store.mark({ actionFromSetter: false })
         return store.changeViewTo('setter')
       }
       return onModalClose()
@@ -184,7 +192,7 @@ const DataSolver = [
     action: (e) => {
       const { thread } = e[EVENT.SET_FAVORITE_CONTENT].data
       store.changeViewTo('setter')
-      store.mark({ thread, createfromSetter: true })
+      store.mark({ thread, actionFromSetter: true })
     },
   },
 ]
@@ -201,37 +209,36 @@ const ErrSolver = [
     match: asyncErr(ERR.TIMEOUT),
     action: ({ details }) => {
       markLoading(false)
-      errRescue({ type: ERR.TIMEOUT, details, path: 'FavoritesCats' })
+      errRescue({ type: ERR.TIMEOUT, details, path: 'CollectionFolder' })
     },
   },
   {
     match: asyncErr(ERR.NETWORK),
     action: () => {
       markLoading(false)
-      errRescue({ type: ERR.NETWORK, path: 'FavoritesCats' })
+      errRescue({ type: ERR.NETWORK, path: 'CollectionFolder' })
     },
   },
 ]
 
-const initStates = (displayMode) => {
-  store.mark({ displayMode })
+const load = (): void => {
   return loadCategories()
 }
 
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store, displayMode) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     // log('effect init')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-    initStates(displayMode)
+    load()
 
     return () => {
       // log('effect uninit')
       sr71$.stop()
       sub$.unsubscribe()
     }
-  }, [_store, displayMode])
+  }, [_store])
 }
diff --git a/src/containers/tool/FavoritesCats/schema.ts b/src/containers/tool/CollectionFolder/schema.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/schema.ts
rename to src/containers/tool/CollectionFolder/schema.ts
diff --git a/src/containers/tool/FavoritesCats/store.js b/src/containers/tool/CollectionFolder/store.ts
similarity index 56%
rename from src/containers/tool/FavoritesCats/store.js
rename to src/containers/tool/CollectionFolder/store.ts
index c7d6539e2..ed24409ce 100755
--- a/src/containers/tool/FavoritesCats/store.js
+++ b/src/containers/tool/CollectionFolder/store.ts
@@ -1,11 +1,12 @@
 /*
- * FavoritesCats store
+ * CollectionFolder store
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { merge } from 'ramda'
 
+import type { TUser, TRootStore, TViewing } from '@/spec'
 import { THREAD } from '@/constant'
 import { markStates, buildLog, stripMobx, changeset } from '@/utils'
 
@@ -16,7 +17,7 @@ import {
 } from '@/model'
 
 /* eslint-disable-next-line */
-const log = buildLog('S:FavoritesCats')
+const log = buildLog('S:CollectionFolder')
 
 const emptyCat = {
   id: '',
@@ -25,7 +26,7 @@ const emptyCat = {
   private: false,
 }
 
-const FavoritesCats = T.model('FavoritesCats', {
+const CollectionFolder = T.model('CollectionFolder', {
   displayMode: T.optional(
     T.enumeration('displayMode', ['list', 'hide']),
     'hide',
@@ -37,40 +38,43 @@ const FavoritesCats = T.model('FavoritesCats', {
   showUpdater: T.optional(T.boolean, false),
   showCreator: T.optional(T.boolean, false),
   showSetter: T.optional(T.boolean, false),
-  // open creator from setter, so we can go back to setter based on this state
-  createfromSetter: T.optional(T.boolean, false),
-  thread: T.maybeNull(
-    T.enumeration([THREAD.POST, THREAD.JOB, THREAD.REPO], THREAD.POST),
+  // 创建或编辑的操作是否由 Setter 哪里发起，涉及文案，以及上一步、取消等逻辑
+  actionFromSetter: T.optional(T.boolean, false),
+  thread: T.optional(
+    T.enumeration([THREAD.POST, THREAD.JOB, THREAD.REPO]),
+    THREAD.POST,
   ),
   loading: T.optional(T.boolean, false),
   doing: T.optional(T.boolean, false),
 })
   .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get isLogin() {
-      return self.root.account.isLogin
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+
+      return root.account.isLogin
     },
-    get viewingUser() {
-      return stripMobx(self.root.viewing.user)
+    get viewingUser(): TUser {
+      const root = getParent(self) as TRootStore
+      return stripMobx(root.viewing.user)
     },
-    get isSelfViewing() {
-      return self.root.viewing.isSelfViewing
+    get isSelfViewing(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.viewing.isSelfViewing
     },
     // NOTE: can't not use root's viewingData because the
     // activeThread is not right on user's page
     // and it's passible set/unset favrites on user's page
-    get viewingData() {
+    get viewingData(): TViewing {
+      const root = getParent(self) as TRootStore
       switch (self.thread) {
         case THREAD.JOB:
-          return stripMobx(self.root.viewing.job)
+          return stripMobx(root.viewing.job)
 
         case THREAD.REPO:
-          return stripMobx(self.root.viewing.repo)
+          return stripMobx(root.viewing.repo)
 
         default:
-          return stripMobx(self.root.viewing.post)
+          return stripMobx(root.viewing.post)
       }
     },
 
@@ -80,42 +84,45 @@ const FavoritesCats = T.model('FavoritesCats', {
     get pagedCategoriesData() {
       return stripMobx(self.pagedCategories)
     },
-    get isCreatorView() {
+    get isCreatorView(): boolean {
       const { showModal, showUpdater, showCreator, showSetter } = self
       return showModal && showCreator && !showUpdater && !showSetter
     },
-    get isUpdaterView() {
+    get isUpdaterView(): boolean {
       const { showModal, showUpdater, showCreator, showSetter } = self
       return showModal && showUpdater && !showCreator && !showSetter
     },
-    get isSetterView() {
+    get isSetterView(): boolean {
       const { showModal, showUpdater, showCreator, showSetter } = self
       return showModal && showSetter && !showCreator && !showUpdater
     },
-    get hasLockAuth() {
-      return self.isMemberOf('seniorMember') || self.isMemberOf('sponsorMember')
-    },
   }))
   .actions((self) => ({
-    authWarning(options) {
-      self.root.authWarning(options)
+    authWarning(options): void {
+      const root = getParent(self) as TRootStore
+      root.authWarning(options)
     },
-    isMemberOf(type) {
-      return self.root.isMemberOf(type)
+    isMemberOf(type): boolean {
+      const root = getParent(self) as TRootStore
+      return root.isMemberOf(type)
     },
-    changesetErr(options) {
-      self.root.changesetErr(merge({ position: 'topCenter' }, options))
+    changesetErr(options): void {
+      const root = getParent(self) as TRootStore
+      root.changesetErr(merge({ position: 'topCenter' }, options))
     },
-    updateEditing(sobj) {
-      const editCategory = merge(self.editCategoryData, { ...sobj })
-      self.mark({ editCategory })
+    updateEditing(sobj): void {
+      const slf = self as TStore
+      const editCategory = merge(slf.editCategoryData, { ...sobj })
+      slf.mark({ editCategory })
     },
-    validator(type) {
+    validator(type): boolean {
+      const slf = self as TStore
       switch (type) {
         case 'publish': {
           const opt = { msg: '不能为空 (请填写 #必填# 字段)' }
-          const result = changeset(self.editCategoryData)
-            .exist({ title: '收藏夹名称' }, self.changesetErr, opt)
+          const result = changeset(slf.editCategoryData)
+            /* @ts-ignore */
+            .exist({ title: '收藏夹名称' }, slf.changesetErr, opt)
             .done()
 
           return result.passed
@@ -138,12 +145,13 @@ const FavoritesCats = T.model('FavoritesCats', {
       }
     },
     */
-    changeViewTo(view = 'creator') {
-      if (!self.isLogin) return self.authWarning()
+    changeViewTo(view = 'creator'): void {
+      // if (!self.isLogin) return self.authWarning()
+      const slf = self as TStore
 
       switch (view) {
         case 'setter':
-          return self.mark({
+          return slf.mark({
             showModal: true,
             showSetter: true,
             showUpdater: false,
@@ -151,7 +159,7 @@ const FavoritesCats = T.model('FavoritesCats', {
           })
 
         case 'updater':
-          return self.mark({
+          return slf.mark({
             showModal: true,
             showUpdater: true,
             showCreator: false,
@@ -159,7 +167,7 @@ const FavoritesCats = T.model('FavoritesCats', {
           })
 
         default:
-          return self.mark({
+          return slf.mark({
             showModal: true,
             showCreator: true,
             showUpdater: false,
@@ -167,12 +175,15 @@ const FavoritesCats = T.model('FavoritesCats', {
           })
       }
     },
-    cleanEditData() {
-      self.editCategory = emptyCat
+    cleanEditData(): void {
+      const slf = self as TStore
+      /* @ts-ignore */
+      slf.editCategory = emptyCat
     },
-    mark(sobj) {
+    mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
   }))
 
-export default FavoritesCats
+export type TStore = Instance<typeof CollectionFolder>
+export default CollectionFolder
diff --git a/src/containers/tool/FavoritesCats/styles/box_view.ts b/src/containers/tool/CollectionFolder/styles/box_view.ts
similarity index 100%
rename from src/containers/tool/FavoritesCats/styles/box_view.ts
rename to src/containers/tool/CollectionFolder/styles/box_view.ts
diff --git a/src/containers/tool/CollectionFolder/styles/editor.ts b/src/containers/tool/CollectionFolder/styles/editor.ts
new file mode 100755
index 000000000..2235065fd
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/editor.ts
@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import { theme, css } from '@/utils'
+
+import { MODAL_MIN_HEIGHT } from './metric'
+
+export const Wrapper = styled.div<TActive>`
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  flex-direction: column;
+  height: 100%;
+  min-height: ${MODAL_MIN_HEIGHT};
+`
+export const Header = styled.div`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleTitle')};
+  background: ${theme('modal.bg')};
+  filter: ${theme('modal.subPanelShadow')};
+  height: 50px;
+  padding-left: 25px;
+`
+export const InnerWrapper = styled.div`
+  ${css.flex('align-start')};
+  background: ${theme('modal.subPanel')};
+  padding: 25px;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+`
+export const SidebarWrapper = styled.div`
+  color: ${theme('thread.articleTitle')};
+  width: 250px;
+  padding-left: 12px;
+  padding-top: 12px;
+  margin-right: 10px;
+`
+export const NoteText = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-right: 25px;
+  margin-top: 10px;
+  opacity: 0.6;
+`
+export const TipsText = styled(NoteText)`
+  margin-right: 25px;
+`
+export const EditWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid;
+  border-left-color: #043b49;
+  padding-left: 32px;
+`
+export const FormItemWrapper = styled.div`
+  ${css.flexColumn()};
+  margin-bottom: 20px;
+`
+export const FormLabel = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-bottom: 10px;
+  margin-left: 3px;
+`
+export const FormInput = styled.div`
+  flex-grow: 1;
+`
+export const Footer = styled.div`
+  margin-top: 30px;
+  ${css.flex('align-center', 'justify-center')};
+`
diff --git a/src/containers/tool/FavoritesCats/styles/index.ts b/src/containers/tool/CollectionFolder/styles/index.ts
similarity index 84%
rename from src/containers/tool/FavoritesCats/styles/index.ts
rename to src/containers/tool/CollectionFolder/styles/index.ts
index 8232680e6..e6e050448 100755
--- a/src/containers/tool/FavoritesCats/styles/index.ts
+++ b/src/containers/tool/CollectionFolder/styles/index.ts
@@ -2,7 +2,12 @@ import styled from 'styled-components'
 
 import Img from '@/Img'
 import { theme, animate, css } from '@/utils'
+import { MODAL_MIN_HEIGHT } from './metric'
 
+export const Wrapper = styled.div`
+  width: 100%;
+  min-height: ${MODAL_MIN_HEIGHT};
+`
 export const AdderWrapper = styled.div`
   ${css.flex('justify-end')};
   width: 80px;
diff --git a/src/containers/tool/CollectionFolder/styles/metric.ts b/src/containers/tool/CollectionFolder/styles/metric.ts
new file mode 100644
index 000000000..9b1007e2d
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/metric.ts
@@ -0,0 +1,2 @@
+export const MODAL_MIN_HEIGHT = '55vh'
+export const holder = 1
diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts
new file mode 100755
index 000000000..0b0bfe389
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/setter.ts
@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import { theme, css } from '@/utils'
+
+import { MODAL_MIN_HEIGHT } from './metric'
+
+export const Wrapper = styled.div<TActive>`
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  flex-direction: column;
+
+  height: 100%;
+  min-height: ${MODAL_MIN_HEIGHT};
+`
+export const Header = styled.div`
+  ${css.flex('align-end')};
+  color: ${theme('thread.articleDigest')};
+  background: ${theme('modal.bg')};
+  padding: 20px;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  font-size: 14px;
+  height: 50px;
+  width: 100%;
+  z-index: 1;
+`
+export const Artiment = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+`
+export const ListWrapper = styled.div`
+  ${css.flex()};
+  flex-wrap: wrap;
+  flex-grow: 1;
+  padding-top: 35px;
+  padding-right: 15px;
+  padding-left: 0;
+  padding-bottom: 0;
+  background: ${theme('modal.bg')};
+  filter: ${theme('modal.subPanelShadow')};
+`
+export const FolderWrapper = styled.div`
+  margin-left: 20px;
+  margin-bottom: 30px;
+`
+export const Footer = styled.div`
+  ${css.flex('justify-start')};
+  font-size: 14px;
+  color: ${theme('thread.articleDigest')};
+  background: ${theme('modal.subPanel')};
+  padding: 15px 20px;
+`
diff --git a/src/containers/tool/FavoritesCats/tests/index.test.ts b/src/containers/tool/CollectionFolder/tests/index.test.js
similarity index 63%
rename from src/containers/tool/FavoritesCats/tests/index.test.ts
rename to src/containers/tool/CollectionFolder/tests/index.test.js
index 457499b7d..56e76d2ec 100755
--- a/src/containers/tool/FavoritesCats/tests/index.test.ts
+++ b/src/containers/tool/CollectionFolder/tests/index.test.js
@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import FavoritesCats from '../index'
+// import CollectionFolder from '../index'
 
-describe('TODO <FavoritesCats />', () => {
+describe('TODO <CollectionFolder />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })
diff --git a/src/containers/tool/CollectionFolder/tests/store.test.js b/src/containers/tool/CollectionFolder/tests/store.test.js
new file mode 100755
index 000000000..66d9dec72
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/tests/store.test.js
@@ -0,0 +1,10 @@
+/*
+ * CollectionFolder store test
+ *
+ */
+
+// import CollectionFolder from '../index'
+
+it('TODO: store test CollectionFolder', () => {
+  expect(1 + 1).toBe(2)
+})
diff --git a/src/containers/tool/FavoritesCats/BoxView.js b/src/containers/tool/FavoritesCats/BoxView.js
deleted file mode 100755
index 2d03fc28a..000000000
--- a/src/containers/tool/FavoritesCats/BoxView.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-import EmptyLabel from '@/components/EmptyLabel'
-import CategoryCardList from './CategoryCardList'
-import { Wrapper, MsgWrapper } from './styles/box_view'
-
-const BoxView = ({ data, onSelect }) => {
-  const { totalCount } = data
-
-  return (
-    <Wrapper>
-      {totalCount === 0 ? (
-        <MsgWrapper>
-          <EmptyLabel text="你还没有任何收藏夹" size="large" />
-        </MsgWrapper>
-      ) : (
-        <CategoryCardList data={data} onSelect={onSelect} />
-      )}
-    </Wrapper>
-  )
-}
-
-export default React.memo(BoxView)
diff --git a/src/containers/tool/FavoritesCats/CategoryCardList.js b/src/containers/tool/FavoritesCats/CategoryCardList.js
deleted file mode 100755
index 0ebfc9dfa..000000000
--- a/src/containers/tool/FavoritesCats/CategoryCardList.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-
-import { cutRest } from '@/utils'
-
-import Folder from '@/components/Folder'
-import Pagi from '@/components/Pagi'
-
-import { Wrapper, CardListWrapper } from './styles/category_card_list'
-
-import { loadCategories, switchToUpdater } from './logic'
-
-const CategoryCardList = ({
-  data: { entries, pageNumber, pageSize, totalCount },
-  onSelect,
-}) => (
-  <Wrapper>
-    <CardListWrapper>
-      {entries.map((cat) => (
-        <Folder
-          key={cat.id}
-          title={cutRest(cat.title, 10)}
-          desc={cutRest(cat.desc, 20)}
-          total={cat.totalCount}
-          updatedAt={cat.updatedAt}
-          onEdit={() => switchToUpdater(cat)}
-          onSelect={() => onSelect(cat)}
-          editable
-        />
-      ))}
-    </CardListWrapper>
-
-    <Pagi
-      margin={{ left: '-20px' }}
-      pageNumber={pageNumber}
-      pageSize={pageSize}
-      totalCount={totalCount}
-      onChange={loadCategories}
-    />
-  </Wrapper>
-)
-
-export default React.memo(CategoryCardList)
diff --git a/src/containers/tool/FavoritesCats/Creator.js b/src/containers/tool/FavoritesCats/Creator.js
deleted file mode 100755
index d3d0315db..000000000
--- a/src/containers/tool/FavoritesCats/Creator.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/utils'
-
-import { Radio } from '@/components/Switcher'
-import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
-
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
-
-import {
-  Wrapper,
-  EditWrapper,
-  FormItemWrapper,
-  FormLabel,
-  FormInput,
-  RadiosWrapper,
-  Footer,
-} from './styles/editor'
-
-import {
-  categoryOnChange,
-  privateOnChange,
-  onCategoryCreate,
-  onModalClose,
-} from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:FavoritesCats:Creator')
-
-const Creator = ({ data, show, hasLockAuth }) => (
-  <Wrapper show={show} className="normal-form">
-    <SectionLabel title="创建收藏夹" iconSrc={`${ICON_CMD}/edit.svg`} />
-    <EditWrapper>
-      <FormItemWrapper>
-        <FormLabel>标题</FormLabel>
-        <FormInput>
-          <Input
-            size="default"
-            placeholder="收藏夹标题 #必填#"
-            value={data.title}
-            onChange={categoryOnChange('title')}
-          />
-        </FormInput>
-      </FormItemWrapper>
-      <FormItemWrapper>
-        <FormLabel>描述</FormLabel>
-        <FormInput>
-          <Input
-            value={data.desc}
-            onChange={categoryOnChange('desc')}
-            placeholder="收藏什么的？"
-            behavior="textarea"
-          />
-        </FormInput>
-      </FormItemWrapper>
-
-      {hasLockAuth && (
-        <FormItemWrapper>
-          <FormLabel>隐私</FormLabel>
-          <RadiosWrapper>
-            <Radio
-              items={[
-                {
-                  value: '公开',
-                  key: false,
-                },
-                {
-                  value: '不公开',
-                  key: true,
-                  dimOnActive: true,
-                },
-              ]}
-              activeKey={data.private}
-              onChange={privateOnChange}
-            />
-          </RadiosWrapper>
-        </FormItemWrapper>
-      )}
-    </EditWrapper>
-    <Footer>
-      <Button type="primary" ghost onClick={onModalClose}>
-        取消
-      </Button>
-      <Space right={10} />
-      <Button type="primary" onClick={onCategoryCreate}>
-        保存
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Creator)
diff --git a/src/containers/tool/FavoritesCats/Setter.js b/src/containers/tool/FavoritesCats/Setter.js
deleted file mode 100755
index 38838c82b..000000000
--- a/src/containers/tool/FavoritesCats/Setter.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { Button } from '@/components/Buttons'
-import SectionLabel from '@/components/SectionLabel'
-
-import {
-  Wrapper,
-  CatWrapper,
-  ListWrapper,
-  CatContent,
-  CatMain,
-  SetBtn,
-  CatHeader,
-  CatTitle,
-  CatDec,
-  CatCounter,
-  CatDivider,
-  Footer,
-} from './styles/setter'
-
-import { setContent, unSetContent, onSetterCreateCat } from './logic'
-
-const Setter = ({ show, entries, selectedId }) => (
-  <Wrapper show={show}>
-    <SectionLabel
-      title="添加收藏"
-      desc="选择你要添加的收藏夹"
-      iconSrc={`${ICON_CMD}/folder.svg`}
-    />
-    <ListWrapper>
-      {entries.map((cat) => (
-        <div key={cat.id}>
-          <CatWrapper>
-            <CatContent>
-              <CatMain>
-                <CatHeader>
-                  <CatTitle>{cat.title}</CatTitle>
-                </CatHeader>
-                <CatDec>{cat.desc}</CatDec>
-                <CatCounter>共 {cat.totalCount} 条内容</CatCounter>
-              </CatMain>
-              <SetBtn>
-                {selectedId === cat.id ? (
-                  <Button type="red" ghost onClick={() => unSetContent(cat.id)}>
-                    移除
-                  </Button>
-                ) : (
-                  <Button
-                    type="primary"
-                    ghost
-                    onClick={() => setContent(cat.id)}
-                  >
-                    加入
-                  </Button>
-                )}
-              </SetBtn>
-            </CatContent>
-          </CatWrapper>
-          <CatDivider />
-        </div>
-      ))}
-    </ListWrapper>
-    <Footer>
-      <Button type="primary" onClick={onSetterCreateCat}>
-        创建新收藏夹
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Setter)
diff --git a/src/containers/tool/FavoritesCats/Updater.js b/src/containers/tool/FavoritesCats/Updater.js
deleted file mode 100755
index 3f643e71a..000000000
--- a/src/containers/tool/FavoritesCats/Updater.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/utils'
-
-import { Radio } from '@/components/Switcher'
-import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
-
-import Tooltip from '@/components/Tooltip'
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
-
-import {
-  Wrapper,
-  EditWrapper,
-  FormItemWrapper,
-  FormLabel,
-  FormInput,
-  RadiosWrapper,
-  Footer,
-} from './styles/editor'
-
-import {
-  categoryOnChange,
-  privateOnChange,
-  onCategoryUpdate,
-  onCategoryDelete,
-} from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:Favorites:Updater')
-
-const Updater = ({ data, show, hasLockAuth }) => (
-  <Wrapper show={show} className="normal-form">
-    <SectionLabel
-      title={`编辑收藏夹 - ${data.title}`}
-      iconSrc={`${ICON_CMD}/edit.svg`}
-    />
-    <EditWrapper>
-      <FormItemWrapper>
-        <FormLabel>标题</FormLabel>
-        <FormInput>
-          <Input
-            size="default"
-            placeholder="收藏夹标题"
-            value={data.title}
-            onChange={categoryOnChange('title')}
-          />
-        </FormInput>
-      </FormItemWrapper>
-      <FormItemWrapper>
-        <FormLabel>描述</FormLabel>
-        <FormInput>
-          <Input
-            value={data.desc}
-            onChange={categoryOnChange('desc')}
-            placeholder="收藏什么的？"
-            behavior="textarea"
-          />
-        </FormInput>
-      </FormItemWrapper>
-
-      {hasLockAuth && (
-        <FormItemWrapper>
-          <FormLabel>隐私</FormLabel>
-          <RadiosWrapper>
-            <Radio
-              items={[
-                {
-                  value: '公开',
-                  key: false,
-                },
-                {
-                  value: '不公开',
-                  key: true,
-                  dimOnActive: true,
-                },
-              ]}
-              activeKey={data.private}
-              onChange={privateOnChange}
-            />
-          </RadiosWrapper>
-        </FormItemWrapper>
-      )}
-    </EditWrapper>
-    <Footer>
-      <Tooltip
-        content="删除收藏夹及包含的内容，是否继续?"
-        trigger="click"
-        hideOnClick={false}
-        behavior="confirm"
-        onConfirm={onCategoryDelete}
-      >
-        <Button type="red" ghost>
-          删除
-        </Button>
-      </Tooltip>
-      <Space right={10} />
-      <Button type="primary" onClick={onCategoryUpdate}>
-        保存
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Updater)
diff --git a/src/containers/tool/FavoritesCats/index.js b/src/containers/tool/FavoritesCats/index.js
deleted file mode 100755
index 1f8bb82c1..000000000
--- a/src/containers/tool/FavoritesCats/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- *
- * FavoritesCats
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { ICON_CMD } from '@/config'
-import { pluggedIn, buildLog } from '@/utils'
-
-import Modal from '@/components/Modal'
-import SectionLabel from '@/components/SectionLabel'
-
-import { AdderWrapper, AdderText, AdderIcon } from './styles'
-
-import BoxView from './BoxView'
-import Creator from './Creator'
-import Updater from './Updater'
-import Setter from './Setter'
-
-import { useInit, onModalClose, changeViewTo } from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:FavoritesCats')
-
-const FavoritesCatsContainer = ({
-  favoritesCats: store,
-  onSelect,
-  displayMode: displayModeProp,
-}) => {
-  useInit(store, displayModeProp)
-
-  const {
-    viewingData,
-    displayMode,
-    isCreatorView,
-    isUpdaterView,
-    isSetterView,
-    showModal,
-    editCategoryData,
-    pagedCategoriesData,
-    isSelfViewing,
-    hasLockAuth,
-  } = store
-
-  const { entries } = pagedCategoriesData
-
-  return (
-    <React.Fragment>
-      {displayMode === 'list' && (
-        <SectionLabel
-          title="收藏夹"
-          iconSrc={`${ICON_CMD}/folder.svg`}
-          addonNode={
-            <>
-              {isSelfViewing && (
-                <AdderWrapper onClick={changeViewTo('creator')}>
-                  <AdderIcon src={`${ICON_CMD}/add_circle.svg`} />
-                  <AdderText>创建</AdderText>
-                </AdderWrapper>
-              )}
-            </>
-          }
-        />
-      )}
-      <Modal width="420px" show={showModal} showCloseBtn onClose={onModalClose}>
-        <Setter
-          entries={entries}
-          show={isSetterView}
-          selectedId={viewingData.favoritedCategoryId}
-          hasLockAuth={hasLockAuth}
-        />
-        <Creator
-          data={editCategoryData}
-          show={isCreatorView}
-          hasLockAuth={hasLockAuth}
-        />
-        <Updater
-          data={editCategoryData}
-          show={isUpdaterView}
-          hasLockAuth={hasLockAuth}
-        />
-      </Modal>
-      {displayMode === 'list' && (
-        <BoxView data={pagedCategoriesData} onSelect={onSelect} />
-      )}
-    </React.Fragment>
-  )
-}
-
-FavoritesCatsContainer.propTypes = {
-  onSelect: T.func,
-  favoritesCats: T.any.isRequired,
-  displayMode: T.oneOf(['list', 'hide']),
-}
-
-FavoritesCatsContainer.defaultProps = {
-  onSelect: log,
-  displayMode: 'hide',
-}
-
-export default pluggedIn(FavoritesCatsContainer)
diff --git a/src/containers/tool/FavoritesCats/styles/category_card_list.ts b/src/containers/tool/FavoritesCats/styles/category_card_list.ts
deleted file mode 100755
index 2e1cd0b1a..000000000
--- a/src/containers/tool/FavoritesCats/styles/category_card_list.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components'
-
-import { css } from '@/utils'
-
-export const Wrapper = styled.div`
-  margin-top: 30px;
-`
-export const CardListWrapper = styled.div`
-  ${css.flex()};
-  flex-wrap: wrap;
-`
diff --git a/src/containers/tool/FavoritesCats/styles/editor.ts b/src/containers/tool/FavoritesCats/styles/editor.ts
deleted file mode 100755
index 9d4d5c4b1..000000000
--- a/src/containers/tool/FavoritesCats/styles/editor.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components'
-
-import type { TActive } from '@/spec'
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div<TActive>`
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  flex-direction: column;
-  padding: 15px 25px;
-`
-export const EditWrapper = styled.div`
-  width: 100%;
-  margin-left: 3px;
-  padding-right: 5px;
-  margin-top: 20px;
-`
-export const FormItemWrapper = styled.div`
-  ${css.flex()};
-  margin-bottom: 20px;
-`
-export const FormLabel = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('form.label')};
-  margin-right: 15px;
-  margin-top: 5px;
-  width: auto;
-  text-align: right;
-`
-export const FormInput = styled.div`
-  flex-grow: 1;
-`
-export const RadiosWrapper = styled.div`
-  margin-top: 6px;
-`
-export const Footer = styled.div`
-  ${css.flex('align-end', 'justify-center')};
-  margin-top: 30px;
-  margin-bottom: 10px;
-`
diff --git a/src/containers/tool/FavoritesCats/styles/setter.ts b/src/containers/tool/FavoritesCats/styles/setter.ts
deleted file mode 100755
index 8735168c4..000000000
--- a/src/containers/tool/FavoritesCats/styles/setter.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import styled from 'styled-components'
-
-import type { TActive } from '@/spec'
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div<TActive>`
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  flex-direction: column;
-  padding: 15px 25px;
-`
-export const ListWrapper = styled.div``
-export const Footer = styled.div`
-  ${css.flex('justify-center')};
-  margin-top: 20px;
-  margin-bottom: 10px;
-`
-export const CatWrapper = styled.div`
-  ${css.flexColumn()};
-  padding: 10px 5px;
-  &:hover {
-    background: #113744;
-  }
-`
-export const CatContent = styled.div`
-  ${css.flex('align-center')};
-`
-export const CatMain = styled.div`
-  ${css.flexColumnGrow()};
-`
-export const SetBtn = styled.div``
-
-export const CatHeader = styled.div`
-  ${css.flex()};
-`
-export const CatTitle = styled.div`
-  color: ${theme('banner.desc')};
-  font-weight: bold;
-  font-size: 1rem;
-`
-export const CatDec = styled.div`
-  color: ${theme('banner.desc')};
-`
-export const CatCounter = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('banner.desc')};
-`
-export const CatDivider = styled.div`
-  border-bottom: 1px solid;
-  border-color: ${theme('banner.desc')};
-  width: 100%;
-  opacity: 0.4;
-`
diff --git a/src/containers/tool/FavoritesCats/tests/store.test.ts b/src/containers/tool/FavoritesCats/tests/store.test.ts
deleted file mode 100755
index 5318523b4..000000000
--- a/src/containers/tool/FavoritesCats/tests/store.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * FavoritesCats store test
- *
- */
-
-// import FavoritesCats from '../index'
-
-it('TODO: store test FavoritesCats', () => {
-  expect(1 + 1).toBe(2)
-})
diff --git a/src/containers/unit/ArticleViewerHeader/index.js b/src/containers/unit/ArticleViewerHeader/index.js
index 9e3135cb7..c4e9c0147 100755
--- a/src/containers/unit/ArticleViewerHeader/index.js
+++ b/src/containers/unit/ArticleViewerHeader/index.js
@@ -10,7 +10,6 @@ import { values } from 'ramda'
 import { THREAD } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
-import FavoritesCats from '@/containers/tool/FavoritesCats'
 import Maybe from '@/components/Maybe'
 
 import UserInfo from './UserInfo'
@@ -42,7 +41,6 @@ const ArticleViewerHeaderContainer = ({
 
   return (
     <Wrapper>
-      <FavoritesCats />
       <Maybe test={author && !company}>
         <UserInfo author={author} insertedAt={data.insertedAt} />
       </Maybe>
diff --git a/src/containers/user/UserFavorited/index.js b/src/containers/user/UserFavorited/index.js
index c041a61da..ff2912e27 100755
--- a/src/containers/user/UserFavorited/index.js
+++ b/src/containers/user/UserFavorited/index.js
@@ -8,7 +8,6 @@ import React from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
-import FavoritesCats from '@/containers/tool/FavoritesCats'
 import PagedArticles from '@/components/PagedArticles'
 import Breadcrumbs from './Breadcrumbs'
 
@@ -41,7 +40,7 @@ const UserFavoritedContainer = ({ userFavorited: store }) => {
   return (
     <div>
       {parentView === 'CATEGORY_LIST' ? (
-        <FavoritesCats onSelect={onCatSelect} displayMode="list" />
+        <div>TODO</div>
       ) : (
         <>
           <Breadcrumbs
diff --git a/src/containers/viewer/RepoViewer/index.js b/src/containers/viewer/RepoViewer/index.js
index c29dcba7a..006482778 100755
--- a/src/containers/viewer/RepoViewer/index.js
+++ b/src/containers/viewer/RepoViewer/index.js
@@ -11,7 +11,6 @@ import { pluggedIn, buildLog } from '@/utils'
 
 import ArticleViewerHeader from '@/containers/unit/ArticleViewerHeader'
 import ArticleBodyHeader from '@/containers/unit/ArticleBodyHeader'
-import FavoritesCats from '@/containers/tool/FavoritesCats'
 import Comments from '@/containers/unit/Comments'
 import GithubRepoPage from '@/components/GithubRepoPage'
 
@@ -28,7 +27,6 @@ const RepoViewerContainer = ({ repoViewer: store, attachment }) => {
 
   return (
     <React.Fragment>
-      <FavoritesCats />
       <GithubRepoPage
         repo={viewingData}
         viewerHeader={
diff --git a/src/spec/article.ts b/src/spec/article.ts
index bde9e64e0..43bd53d4a 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -74,3 +74,20 @@ export type TArticleFilter = {
 }
 
 export type TUpvoteLayout = 'default' | 'comment' | 'article' | 'works-article'
+
+export type TCollectionFolder = {
+  id: TID
+  title: string
+  desc?: string
+  totalCount: number
+  private: boolean
+  updatedAt: string
+}
+
+export type TPagedCollectionFolder = {
+  entries: TCollectionFolder[]
+  totalCount: number
+  pageNumber: number
+  pageSize: number
+  totalPages: number
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 656c48338..25e858d9f 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -48,6 +48,8 @@ export type {
 export type { TGQLError } from './graphql'
 
 export type {
+  TCollectionFolder,
+  TPagedCollectionFolder,
   TArticle,
   TPost,
   TBlog,
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index a561b8f77..34df920d1 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -81,13 +81,13 @@ import {
   UserBillingStore,
   UserFavoritedStore,
   UserStaredStore,
-  FavoritesCatsStore,
   //
   MeetupsContentStore,
   HaveADrinkContentStore,
   CoolGuideContentStore,
 
   // GEN: IMPORT SUBSTORE
+  CollectionFolderStore,
   ShareStore,
   ArticleContentStore,
   ArticleViewerStore,
@@ -194,7 +194,6 @@ const rootStore = T.model({
   userSettings: T.optional(UserSettingsStore, {}),
   userStared: T.optional(UserStaredStore, {}),
   userFavorited: T.optional(UserFavoritedStore, {}),
-  favoritesCats: T.optional(FavoritesCatsStore, {}),
 
   // have a drink
   meetupsContent: T.optional(MeetupsContentStore, {}),
@@ -202,6 +201,7 @@ const rootStore = T.model({
   coolGuideContent: T.optional(CoolGuideContentStore, {}),
 
   // GEN: PLUG SUBSTORE TO ROOTSTORE
+  collectionFolder: T.optional(CollectionFolderStore, {}),
   share: T.optional(ShareStore, {}),
   articleContent: T.optional(ArticleContentStore, {}),
   articleViewer: T.optional(ArticleViewerStore, {}),
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 2f4587efc..99ac541f7 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -32,7 +32,6 @@ export { default as CashierStore } from '@/containers/tool/Cashier/store'
 
 export { default as ArticleAuthorCardStore } from '@/containers/unit/ArticleAuthorCard/store'
 //
-export { default as FavoritesCatsStore } from '@/containers/tool/FavoritesCats/store'
 
 // pages banners store
 export { default as CommunityDigestStore } from '@/containers/digest/CommunityDigest/store'
@@ -94,6 +93,7 @@ export { default as CommunityEditorStore } from '@/containers/editor/CommunityEd
 export { default as WorksEditorStore } from '@/containers/editor/WorksEditor/store'
 
 // GEN: EXPORT CONTAINERS STORE HERE
+export { default as CollectionFolderStore } from '@/containers/tool/CollectionFolder/store'
 export { default as ShareStore } from '@/containers/tool/Share/store'
 export { default as ArticleContentStore } from '@/containers/content/ArticleContent/store'
 export { default as ArticleViewerStore } from '@/containers/viewer/ArticleViewer/store'