diff --git a/src/components/Buttons/OrButton/index.tsx b/src/components/Buttons/OrButton/index.tsx
index 20872cf6c..02e7c0a25 100644
--- a/src/components/Buttons/OrButton/index.tsx
+++ b/src/components/Buttons/OrButton/index.tsx
@@ -6,7 +6,7 @@ import HorizontalButton from './HorizontalButton'
 import VerticalButton from './VerticalButton'
 
 export type TProps = {
-  direction: 'row' | 'column'
+  direction?: 'row' | 'column'
   size?: TSIZE_SM
   activeKey: string
   onClick: (key: string) => void
@@ -14,10 +14,9 @@ export type TProps = {
     key: string
     title: string
   }[]
-  children: React.ReactNode
 }
 
-const OrButton: React.FC<TProps> = ({ direction, ...restProps }) => {
+const OrButton: React.FC<TProps> = ({ direction = 'row', ...restProps }) => {
   return direction === 'row' ? (
     <HorizontalButton {...restProps} />
   ) : (
diff --git a/src/components/NaviCatalog/index.tsx b/src/components/NaviCatalog/index.tsx
index 8e42224e9..3c486cc48 100755
--- a/src/components/NaviCatalog/index.tsx
+++ b/src/components/NaviCatalog/index.tsx
@@ -39,7 +39,7 @@ type TProps = {
   testid?: string
   items: TMenuItem[]
 
-  onSelect: (id: string, type: string) => void
+  onSelect?: (id: string, type: string) => void
   onShowMore?: () => void
 }
 
diff --git a/src/containers/content/WorksContent/Banner/Backgrounds.js b/src/containers/content/WorksContent/Banner/Backgrounds.js
deleted file mode 100644
index 853acbdd1..000000000
--- a/src/containers/content/WorksContent/Banner/Backgrounds.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from 'react'
-
-import { ASSETS_ENDPOINT } from '@/config'
-import { Wrapper, Icon } from '../styles/banner/backgrounds'
-
-const icons = [
-  {
-    id: '0',
-    src: `${ASSETS_ENDPOINT}/works/ufo.svg`,
-    position: { top: '20%', left: '0' },
-    size: 'small',
-  },
-  {
-    id: '1',
-    src: `${ASSETS_ENDPOINT}/works/github.svg`,
-    position: { top: '10%', left: '15%' },
-    size: 'small',
-  },
-  {
-    id: '4',
-    src: `${ASSETS_ENDPOINT}/works/android.svg`,
-    position: { top: '15%', left: '50%' },
-    color: 'green',
-    opacity: 0.4,
-    size: 'small',
-  },
-  {
-    id: '5',
-    src: `${ASSETS_ENDPOINT}/works/dinosaur.svg`,
-    position: { top: '18%', left: '20%' },
-  },
-  {
-    id: '6',
-    src: `${ASSETS_ENDPOINT}/works/snow2.svg`,
-    position: { top: '14%', left: '24%' },
-    size: 'small',
-    rotate: '15deg',
-    opacity: 0.5,
-  },
-  {
-    id: '7',
-    src: `${ASSETS_ENDPOINT}/works/desktop.svg`,
-    position: { top: '45%', left: '25%' },
-    rotate: '5deg',
-    color: 'red',
-    opacity: 0.5,
-  },
-  {
-    id: '71',
-    src: `${ASSETS_ENDPOINT}/works/sex.svg`,
-    position: { top: '47%', left: '52%' },
-    rotate: '-45deg',
-    size: 'small',
-  },
-  {
-    id: '8',
-    src: `${ASSETS_ENDPOINT}/works/game.svg`,
-    position: { top: '73%', left: '33%' },
-    rotate: '-15deg',
-  },
-  {
-    id: '9',
-    src: `${ASSETS_ENDPOINT}/works/bitcoin.svg`,
-    position: { top: '67%', left: '38%' },
-  },
-  {
-    id: '10',
-    src: `${ASSETS_ENDPOINT}/works/beer.svg`,
-    position: { top: '65%', left: '20%' },
-    rotate: '25deg',
-  },
-  {
-    id: '11',
-    src: `${ASSETS_ENDPOINT}/works/planet4.svg`,
-    position: { top: '-150px', left: '28%' },
-    size: 'huge',
-    rotate: '0deg',
-    opacity: 0.6,
-  },
-  {
-    id: '12',
-    src: `${ASSETS_ENDPOINT}/works/cmd.svg`,
-    position: { top: '66%', left: '45%' },
-    size: 'small',
-    rotate: '-10deg',
-  },
-  {
-    id: '14',
-    src: `${ASSETS_ENDPOINT}/works/planet1.svg`,
-    position: { top: '15%', left: '85%' },
-    size: 'large',
-    rotate: '5deg',
-  },
-  {
-    id: '15',
-    src: `${ASSETS_ENDPOINT}/works/cross2.svg`,
-    position: { top: '65%', left: '5%' },
-    rotate: '-5deg',
-  },
-  {
-    id: '16',
-    src: `${ASSETS_ENDPOINT}/works/roket.svg`,
-    position: { top: '60%', left: '13%' },
-    size: 'small',
-    rotate: '5deg',
-  },
-]
-
-const Backgrounds = () => {
-  return (
-    <Wrapper>
-      {icons.map(({ id, position, ...restProps }) => (
-        <Icon key={id} top={position.top} left={position.left} {...restProps} />
-      ))}
-    </Wrapper>
-  )
-}
-
-export default React.memo(Backgrounds)
diff --git a/src/containers/content/WorksContent/Banner/Recommendation.js b/src/containers/content/WorksContent/Banner/Recommendation.js
deleted file mode 100644
index 9d8a5ed33..000000000
--- a/src/containers/content/WorksContent/Banner/Recommendation.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- *
- * WorksContent
- *
- */
-
-import React from 'react'
-
-import { ICON_CMD, ICON_BASE, ASSETS_ENDPOINT } from '@/config'
-import { buildLog } from '@/utils'
-
-import ExpandIcon from '@/components/ExpandIcon'
-import IconText from '@/components/IconText'
-import { Space } from '@/components/Common'
-
-import {
-  Wrapper,
-  Card,
-  IntroWrapper,
-  IntroImg,
-  IntroBlock,
-  Title,
-  UpInfo,
-  UpIcon,
-  UpNumber,
-  Desc,
-  BodyText,
-  FooterWrapper,
-  BuildWithWrapper,
-  TechIcon,
-} from '../styles/banner/recommendation'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:WorksContent')
-
-const Banner = () => {
-  return (
-    <Wrapper testid="worksContent">
-      <Card>
-        <IntroWrapper>
-          <IntroImg src={`${ASSETS_ENDPOINT}/works/market1.jpeg`} />
-          <IntroBlock>
-            <Title>coderplanets</Title>
-            <Desc>
-              <ExpandIcon
-                icon={`${ICON_CMD}/works/website.svg`}
-                text="网站"
-                size="small"
-                hideTextOnInit={false}
-                content={<div>https://coderplanets.com</div>}
-              />
-              <Space right={8} />
-              <ExpandIcon
-                icon={`${ICON_CMD}/works/android.svg`}
-                text="Android"
-                size="small"
-                hideTextOnInit={false}
-                content={<div>https://coderplanets.com</div>}
-              />
-              <Space right={8} />
-              <ExpandIcon
-                icon={`${ICON_CMD}/works/apple.svg`}
-                text="iOS"
-                size="small"
-                hideTextOnInit={false}
-                content={<div>https://coderplanets.com</div>}
-              />
-            </Desc>
-          </IntroBlock>
-
-          <UpInfo>
-            <UpIcon src={`${ICON_CMD}/works/vote_up.svg`} />
-            <UpNumber>93</UpNumber>
-          </UpInfo>
-        </IntroWrapper>
-        <BodyText>可能是最性感的开发者社区，来为你心爱的作品建立...</BodyText>
-        <FooterWrapper>
-          <BuildWithWrapper>
-            <TechIcon src={`${ICON_BASE}/pl/javascript.svg`} />
-            <TechIcon src={`${ICON_BASE}/pl/java.svg`} />
-            <TechIcon src={`${ICON_BASE}/pl/elixir.svg`} />
-            <TechIcon src={`${ICON_BASE}/pl/ruby.svg`} />
-          </BuildWithWrapper>
-          <IconText iconSrc={`${ICON_CMD}/works/comment.svg`}>44</IconText>
-        </FooterWrapper>
-      </Card>
-    </Wrapper>
-  )
-}
-
-export default Banner
diff --git a/src/containers/content/WorksContent/Banner/index.js b/src/containers/content/WorksContent/Banner/index.js
deleted file mode 100644
index 4b978561c..000000000
--- a/src/containers/content/WorksContent/Banner/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- *
- * WorksContent
- *
- */
-
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/utils'
-import { DropdownButton } from '@/components/Buttons'
-
-import Backgrounds from './Backgrounds'
-import Recommendation from './Recommendation'
-
-import {
-  Wrapper,
-  IntroWrapper,
-  BrandWrapper,
-  Title,
-  Desc,
-  PubButton,
-  GradientMask,
-} from '../styles/banner'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:WorksContent')
-
-const options = [
-  {
-    key: '0',
-    icon: `${ICON_CMD}/common_check.svg`,
-    title: '发布作品',
-    desc: '像世界分享你的创意 ..',
-  },
-  {
-    key: '1',
-    icon: `${ICON_CMD}/common_link.svg`,
-    title: '发布限制',
-    desc: '原则上不欢迎此类内容',
-  },
-]
-
-const Banner = () => {
-  return (
-    <Wrapper testid="worksContent">
-      <IntroWrapper>
-        <BrandWrapper>
-          <Title>作品集市</Title>
-          <Desc>
-            <div>有趣有爱的作品跳蚤集市 -- By makers, for makers</div>
-          </Desc>
-          <PubButton>
-            <DropdownButton
-              type="primary"
-              options={options}
-              onClick={(key) => {
-                console.log('fuck key: ', key)
-              }}
-            >
-              发布作品
-            </DropdownButton>
-          </PubButton>
-        </BrandWrapper>
-        <Recommendation />
-        <Backgrounds />
-      </IntroWrapper>
-      <GradientMask />
-    </Wrapper>
-  )
-}
-
-export default Banner
diff --git a/src/containers/content/WorksContent/Brand.js b/src/containers/content/WorksContent/Brand.tsx
similarity index 60%
rename from src/containers/content/WorksContent/Brand.js
rename to src/containers/content/WorksContent/Brand.tsx
index e89cd186f..ef712db60 100644
--- a/src/containers/content/WorksContent/Brand.js
+++ b/src/containers/content/WorksContent/Brand.tsx
@@ -2,9 +2,13 @@ import React from 'react'
 
 import { Wrapper, Title, Desc } from './styles/brand'
 
-const Brand = () => {
+type TProps = {
+  testid?: string
+}
+
+const Brand: React.FC<TProps> = ({ testid = 'works-content-brand' }) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Title>作品集市</Title>
       <Desc>by makers, for makers.</Desc>
     </Wrapper>
diff --git a/src/containers/content/WorksContent/FilterBar.js b/src/containers/content/WorksContent/FilterBar.tsx
similarity index 75%
rename from src/containers/content/WorksContent/FilterBar.js
rename to src/containers/content/WorksContent/FilterBar.tsx
index 58e863120..cb5193b5f 100644
--- a/src/containers/content/WorksContent/FilterBar.js
+++ b/src/containers/content/WorksContent/FilterBar.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { mockNaviCatalogMenu } from '@/utils'
+
 import { Br } from '@/components/Common'
 import { OrButton } from '@/components/Buttons'
 import FiltersMenu from '@/components/FiltersMenu'
@@ -12,12 +14,15 @@ import { Wrapper, FilterWrapper } from './styles/filter_bar'
 
 import { changeView } from './logic'
 
-const FilterBar = ({ activeView }) => {
+type TProps = {
+  activeView: string
+}
+
+const FilterBar: React.FC<TProps> = ({ activeView }) => {
   return (
     <Wrapper>
       <OrButton
         size="small"
-        type="primary"
         activeKey={activeView}
         group={[
           {
@@ -26,14 +31,18 @@ const FilterBar = ({ activeView }) => {
           },
           {
             key: VIEW.MILESTONE,
-            title: '动态',
+            title: '动态', // 里面再成 里程碑，和讨论
           },
         ]}
         onClick={changeView}
       />
       <Br bottom={30} />
       <FilterWrapper>
-        <NaviCatalog title="类别筛选" withDivider={false} />
+        <NaviCatalog
+          title="类别筛选"
+          withDivider={false}
+          items={mockNaviCatalogMenu()}
+        />
       </FilterWrapper>
       <Br bottom={40} />
       <FilterWrapper>
diff --git a/src/containers/content/WorksContent/List/OptionTab.js b/src/containers/content/WorksContent/List/OptionTab.tsx
similarity index 59%
rename from src/containers/content/WorksContent/List/OptionTab.js
rename to src/containers/content/WorksContent/List/OptionTab.tsx
index 76a3cfa28..3c99bb0d3 100644
--- a/src/containers/content/WorksContent/List/OptionTab.js
+++ b/src/containers/content/WorksContent/List/OptionTab.tsx
@@ -2,11 +2,19 @@ import React from 'react'
 
 import { Wrapper, ItemWrapper, Text } from '../styles/list/option_tab'
 
-const BestTab = ({ items, activeKey }) => {
+type TProps = {
+  activeKey: string
+  items: {
+    title: string
+    raw: string
+  }[]
+}
+
+const BestTab: React.FC<TProps> = ({ items, activeKey }) => {
   return (
     <Wrapper>
       {items.map((item) => (
-        <ItemWrapper key={item.key} active={item.raw === activeKey}>
+        <ItemWrapper key={item.raw} active={item.raw === activeKey}>
           <Text active={item.raw === activeKey}>{item.title}</Text>
         </ItemWrapper>
       ))}
diff --git a/src/containers/content/WorksContent/List/Trending.js b/src/containers/content/WorksContent/List/Trending.tsx
similarity index 97%
rename from src/containers/content/WorksContent/List/Trending.js
rename to src/containers/content/WorksContent/List/Trending.tsx
index 356fda1f0..56ec791e3 100644
--- a/src/containers/content/WorksContent/List/Trending.js
+++ b/src/containers/content/WorksContent/List/Trending.tsx
@@ -56,7 +56,7 @@ const item = {
   isOpenSource: true,
 }
 
-const Trending = () => {
+const Trending: React.FC = () => {
   const activeKey = 'month'
 
   return (
diff --git a/src/containers/content/WorksContent/List/index.js b/src/containers/content/WorksContent/List/index.tsx
similarity index 98%
rename from src/containers/content/WorksContent/List/index.js
rename to src/containers/content/WorksContent/List/index.tsx
index a645ad9f2..e6689aa15 100644
--- a/src/containers/content/WorksContent/List/index.js
+++ b/src/containers/content/WorksContent/List/index.tsx
@@ -71,7 +71,7 @@ const lists = [
   { ...item, id: 7 },
 ]
 
-const List = () => {
+const List: React.FC = () => {
   return (
     <Wrapper>
       <Trending />
diff --git a/src/containers/content/WorksContent/MileStone/Detail.js b/src/containers/content/WorksContent/MileStone/Detail.tsx
similarity index 90%
rename from src/containers/content/WorksContent/MileStone/Detail.js
rename to src/containers/content/WorksContent/MileStone/Detail.tsx
index b45740db5..01fd66aaa 100644
--- a/src/containers/content/WorksContent/MileStone/Detail.js
+++ b/src/containers/content/WorksContent/MileStone/Detail.tsx
@@ -12,7 +12,7 @@ import {
   CoverImage,
 } from '../styles/mile_stone/detail'
 
-const Detail = () => {
+const Detail: React.FC = () => {
   return (
     <Wrapper>
       <Main>
@@ -29,4 +29,4 @@ const Detail = () => {
   )
 }
 
-export default Detail
+export default React.memo(Detail)
diff --git a/src/containers/content/WorksContent/MileStone/Intro.js b/src/containers/content/WorksContent/MileStone/Intro.tsx
similarity index 91%
rename from src/containers/content/WorksContent/MileStone/Intro.js
rename to src/containers/content/WorksContent/MileStone/Intro.tsx
index d1196bf42..652d5c03b 100644
--- a/src/containers/content/WorksContent/MileStone/Intro.js
+++ b/src/containers/content/WorksContent/MileStone/Intro.tsx
@@ -12,7 +12,7 @@ import {
   LinkBtn,
 } from '../styles/mile_stone/intro'
 
-const Intro = () => {
+const Intro: React.FC = () => {
   return (
     <Wrapper>
       <Main>
@@ -29,4 +29,4 @@ const Intro = () => {
   )
 }
 
-export default Intro
+export default React.memo(Intro)
diff --git a/src/containers/content/WorksContent/MileStone/index.js b/src/containers/content/WorksContent/MileStone/index.tsx
similarity index 84%
rename from src/containers/content/WorksContent/MileStone/index.js
rename to src/containers/content/WorksContent/MileStone/index.tsx
index d177eccc4..b224af6c7 100644
--- a/src/containers/content/WorksContent/MileStone/index.js
+++ b/src/containers/content/WorksContent/MileStone/index.tsx
@@ -5,7 +5,7 @@ import Detail from './Detail'
 
 import { Wrapper, Block } from '../styles/mile_stone'
 
-const MileStone = () => {
+const MileStone: React.FC = () => {
   return (
     <Wrapper>
       <Block>
@@ -24,4 +24,4 @@ const MileStone = () => {
   )
 }
 
-export default MileStone
+export default React.memo(MileStone)
diff --git a/src/containers/content/WorksContent/RightSidebar/InterviewsList.js b/src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx
similarity index 84%
rename from src/containers/content/WorksContent/RightSidebar/InterviewsList.js
rename to src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx
index 9b30d1042..3b2685bd0 100644
--- a/src/containers/content/WorksContent/RightSidebar/InterviewsList.js
+++ b/src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx
@@ -16,7 +16,7 @@ import {
 
 const icon = 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/works/market1.jpeg'
 
-const Interview = () => {
+const Interview: React.FC = () => {
   return (
     <InterviewWrapper>
       <Avatar
@@ -37,9 +37,15 @@ const Interview = () => {
   )
 }
 
-const InterviewsList = () => {
+type TProps = {
+  testid?: string
+}
+
+const InterviewsList: React.FC<TProps> = ({
+  testid = 'works-content-interviews',
+}) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Interview />
       <Interview />
       <Interview />
diff --git a/src/containers/content/WorksContent/RightSidebar/Linkers.js b/src/containers/content/WorksContent/RightSidebar/Linkers.tsx
similarity index 90%
rename from src/containers/content/WorksContent/RightSidebar/Linkers.js
rename to src/containers/content/WorksContent/RightSidebar/Linkers.tsx
index 7993a7ee0..02703699a 100644
--- a/src/containers/content/WorksContent/RightSidebar/Linkers.js
+++ b/src/containers/content/WorksContent/RightSidebar/Linkers.tsx
@@ -28,7 +28,7 @@ const Addr = ({ title, desc }) => {
   )
 }
 
-const MakersInfo = () => {
+const MakersInfo: React.FC = () => {
   return (
     <Wrapper>
       <Addr title="产品猎人" desc="优秀产品/服务的酷导航.." />
@@ -37,4 +37,4 @@ const MakersInfo = () => {
   )
 }
 
-export default MakersInfo
+export default React.memo(MakersInfo)
diff --git a/src/containers/content/WorksContent/RightSidebar/index.js b/src/containers/content/WorksContent/RightSidebar/index.tsx
similarity index 89%
rename from src/containers/content/WorksContent/RightSidebar/index.js
rename to src/containers/content/WorksContent/RightSidebar/index.tsx
index 49c2104c2..3bf5e31bb 100644
--- a/src/containers/content/WorksContent/RightSidebar/index.js
+++ b/src/containers/content/WorksContent/RightSidebar/index.tsx
@@ -34,14 +34,19 @@ const options = [
   },
 ]
 
-const RightSidebar = () => {
+type TProps = {
+  testid?: string
+}
+
+const RightSidebar: React.FC<TProps> = ({
+  testid = 'works-content-right-sidebar',
+}) => {
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       <Linkers />
       <Divider top={18} bottom={22} />
       <PublishBtnWrapper>
         <DropdownButton
-          type="primary"
           options={options}
           onClick={(key) => {
             console.log('key: ', key)
@@ -67,4 +72,4 @@ const RightSidebar = () => {
   )
 }
 
-export default RightSidebar
+export default React.memo(RightSidebar)
diff --git a/src/containers/content/WorksContent/fakeFilterItems.js b/src/containers/content/WorksContent/fakeFilterItems.ts
similarity index 100%
rename from src/containers/content/WorksContent/fakeFilterItems.js
rename to src/containers/content/WorksContent/fakeFilterItems.ts
diff --git a/src/containers/content/WorksContent/index.js b/src/containers/content/WorksContent/index.tsx
similarity index 85%
rename from src/containers/content/WorksContent/index.js
rename to src/containers/content/WorksContent/index.tsx
index 5365b0870..73a6952b0 100755
--- a/src/containers/content/WorksContent/index.js
+++ b/src/containers/content/WorksContent/index.tsx
@@ -11,9 +11,10 @@ import { pluggedIn, buildLog } from '@/utils'
 import Pagi from '@/components/Pagi'
 import AvatarsRow from '@/components/AvatarsRow'
 
+import type { TStore } from './store'
+
 import { VIEW } from './constant'
 
-// import Banner from './Banner'
 import Brand from './Brand'
 import FilterBar from './FilterBar'
 import List from './List'
@@ -66,13 +67,22 @@ const tmpUsers = [
   },
 ]
 
-const WorksContentContainer = ({ worksContent: store, metric }) => {
+type TProps = {
+  worksContent: TStore
+  metric: string
+  testid?: string
+}
+const WorksContentContainer: React.FC<TProps> = ({
+  worksContent: store,
+  metric,
+  testid = 'worksContent',
+}) => {
   useInit(store)
 
   const { activeView } = store
 
   return (
-    <Wrapper testid="worksContent" metric={metric}>
+    <Wrapper testid={testid} metric={metric}>
       <ContentWrapper>
         <LeftSidebarWrapper>
           <Brand />
@@ -93,4 +103,4 @@ const WorksContentContainer = ({ worksContent: store, metric }) => {
   )
 }
 
-export default pluggedIn(WorksContentContainer)
+export default pluggedIn(WorksContentContainer) as React.FC<TProps>
diff --git a/src/containers/content/WorksContent/logic.js b/src/containers/content/WorksContent/logic.ts
similarity index 74%
rename from src/containers/content/WorksContent/logic.js
rename to src/containers/content/WorksContent/logic.ts
index 0aa27a766..1438855d8 100755
--- a/src/containers/content/WorksContent/logic.js
+++ b/src/containers/content/WorksContent/logic.ts
@@ -3,7 +3,9 @@ import { useEffect } from 'react'
 import { buildLog } from '@/utils'
 // import S from './service'
 
-let store = null
+import type { TStore } from './store'
+
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:WorksContent')
@@ -12,7 +14,7 @@ const log = buildLog('L:WorksContent')
  * change the view of main content
  * @param {string} activeView works or milestone
  */
-export const changeView = (activeView) => {
+export const changeView = (activeView: string): void => {
   store.mark({ activeView })
 }
 
@@ -20,7 +22,7 @@ export const changeView = (activeView) => {
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)
diff --git a/src/containers/content/WorksContent/store.js b/src/containers/content/WorksContent/store.tsx
similarity index 61%
rename from src/containers/content/WorksContent/store.js
rename to src/containers/content/WorksContent/store.tsx
index 5b61c0c86..700fd9cd6 100755
--- a/src/containers/content/WorksContent/store.js
+++ b/src/containers/content/WorksContent/store.tsx
@@ -3,7 +3,7 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, Instance } from 'mobx-state-tree'
 
 import { values } from 'ramda'
 import { markStates, buildLog } from '@/utils'
@@ -15,16 +15,11 @@ const log = buildLog('S:WorksContent')
 
 const WorksContent = T.model('WorksContent', {
   activeView: T.optional(T.enumeration(values(VIEW)), VIEW.WORKS),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-  }))
-  .actions((self) => ({
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
+}).actions((self) => ({
+  mark(sobj: Record<string, unknown>): void {
+    markStates(sobj, self)
+  },
+}))
 
+export type TStore = Instance<typeof WorksContent>
 export default WorksContent
diff --git a/src/containers/content/WorksContent/styles/banner/backgrounds.ts b/src/containers/content/WorksContent/styles/banner/backgrounds.ts
deleted file mode 100644
index 75d4b4c12..000000000
--- a/src/containers/content/WorksContent/styles/banner/backgrounds.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import { SIZE } from '@/constant'
-import { theme } from '@/utils'
-
-const getSize = (size) => {
-  switch (size) {
-    case SIZE.SMALL:
-      return '28px'
-
-    case SIZE.LARGE:
-      return '150px'
-
-    default:
-      return '38px'
-  }
-}
-
-const getColor = (color) => {
-  switch (color) {
-    case 'red':
-      return theme('baseColor.red')
-
-    case 'green':
-      return theme('baseColor.green')
-
-    default:
-      return '#003743'
-  }
-}
-
-export const Wrapper = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 240px;
-  /* z-index: 1; */
-`
-type IIcon = {
-  top: string
-  left: string
-  color: string
-  size: string
-  rotate: string
-  opacity: number
-}
-
-export const Icon = styled(Img)<IIcon>`
-  position: absolute;
-  z-index: 1;
-  fill: ${({ color }) => getColor(color)};
-  top: ${({ top }) => top || '10%'};
-  left: ${({ left }) => left || '10%'};
-
-  background: block;
-  width: ${({ size }) => getSize(size)};
-  height: ${({ size }) => getSize(size)};
-  transform: ${({ rotate }) => `rotate(${rotate})` || 'rotate(0deg)'};
-  opacity: ${({ opacity }) => opacity || 1};
-`
diff --git a/src/containers/content/WorksContent/styles/banner/recommendation.ts b/src/containers/content/WorksContent/styles/banner/recommendation.ts
deleted file mode 100644
index a4645952e..000000000
--- a/src/containers/content/WorksContent/styles/banner/recommendation.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-
-import { css, theme } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flexColumn('align-start', 'justify-center')};
-  width: 42%;
-  height: 100%;
-`
-export const Card = styled.div`
-  z-index: 2;
-  ${css.flexColumn('justify-between')};
-  height: 160px;
-  width: 100%;
-  padding: 14px 16px;
-  background: #08333e;
-  margin-bottom: 14px;
-  margin-right: 15px;
-  border-radius: 5px;
-
-  &:nth-child(even) {
-    margin-right: 0;
-  }
-`
-export const IntroWrapper = styled.div`
-  ${css.flex('align-center')};
-`
-export const IntroImg = styled(Img)`
-  ${css.size(65)};
-  border-radius: 5px;
-`
-export const IntroBlock = styled.div`
-  ${css.flexColumnGrow('align-start')};
-  margin-left: 20px;
-`
-export const Title = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-  color: ${theme('thread.articleTitle')};
-`
-export const Desc = styled.div`
-  ${css.flex('align-center')};
-  font-size: 14px;
-  color: ${theme('thread.articleDigest')};
-  height: 32px;
-`
-export const UpInfo = styled.div`
-  ${css.flexColumn('align-both')};
-  align-self: flex-start;
-  margin-top: 5px;
-`
-export const UpIcon = styled(Img)`
-  fill: ${theme('thread.articleTitle')};
-  ${css.size(16)};
-`
-export const UpNumber = styled.div`
-  color: ${theme('thread.articleDigest')};
-  font-size: 16px;
-`
-export const BodyText = styled.div`
-  font-size: 14px;
-  ${css.cutRest('350px')};
-  color: ${theme('thread.articleDigest')};
-`
-export const FooterWrapper = styled.div`
-  ${css.flex('align-center', 'justify-between')};
-  color: ${theme('thread.articleDigest')};
-`
-export const BuildWithWrapper = styled.div`
-  ${css.flex('align-center')};
-`
-const BaseBuildIcon = styled(Img)`
-  ${css.size(14)};
-`
-export const TechIcon = styled(BaseBuildIcon)`
-  margin-right: 5px;
-  filter: saturate(0.8);
-
-  ${Wrapper}:hover & {
-    filter: saturate(1);
-  }
-`
-
-// export const Card = styled.div`
-//   ${css.flexColumn('justify-between')};
-//   width: 100%;
-//   max-width: 500px;
-//   height: 155px;
-//   background: #023744;
-//   padding: 14px 20px;
-//   margin-top: -25px;
-// `
-// export const IntroWrapper = styled.div`
-//   ${css.flex('align-center')};
-// `
-// export const IntroImg = styled(Img)`
-//   width: 65px;
-//   height: 65px;
-//   display: block;
-//   border-radius: 5px;
-// `
-// export const IntroBlock = styled.div`
-//   ${css.flexColumnGrow('align-start')};
-//   margin-left: 20px;
-// `
-// export const Title = styled.div`
-//   font-size: 16px;
-//   font-weight: bold;
-//   color: ${theme('thread.articleTitle')};
-// `
-// export const Desc = styled.div`
-//   ${css.flex('align-center')};
-//   font-size: 14px;
-//   color: ${theme('thread.articleDigest')};
-// `
-// export const UpInfo = styled.div`
-//   ${css.flexColumn('justify-center')};
-// `
-// export const UpIcon = styled(Img)`
-//   fill: ${theme('thread.articleTitle')};
-//   width: 20px;
-//   height: 20px;
-//   display: block;
-// `
-// export const UpNumber = styled.div`
-//   color: ${theme('thread.articleDigest')};
-// `
-// export const BodyText = styled.div`
-//   font-size: 14px;
-//   ${css.cutRest('350px')};
-//   color: ${theme('thread.articleDigest')};
-// `
-// export const FooterWrapper = styled.div`
-//   ${css.flex('align-center', 'justify-between')};
-//   color: ${theme('thread.articleDigest')};
-// `
diff --git a/src/containers/content/WorksContent/styles/brand.ts b/src/containers/content/WorksContent/styles/brand.ts
index b905286ce..48beab26c 100644
--- a/src/containers/content/WorksContent/styles/brand.ts
+++ b/src/containers/content/WorksContent/styles/brand.ts
@@ -11,16 +11,12 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   margin-bottom: 28px;
   margin-top: 8px;
 `
-export const Title = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 18px;
   font-weight: bold;
 `
-export const Desc = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const Desc = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
 `
diff --git a/src/containers/content/WorksContent/styles/index.ts b/src/containers/content/WorksContent/styles/index.ts
index 0337bf966..6195226d5 100755
--- a/src/containers/content/WorksContent/styles/index.ts
+++ b/src/containers/content/WorksContent/styles/index.ts
@@ -12,9 +12,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   margin-top: 30px;
   ${({ metric }) => css.fitContentWidth(metric)};
 `
-export const LeftSidebarWrapper = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const LeftSidebarWrapper = styled.div`
   width: 182px;
 `
 export const ContentWrapper = styled.div`
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
index e08d33542..ff920a270 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
+++ b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
@@ -1,12 +1,9 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const Wrapper = styled.div`
   ${css.flex('align-end', 'justify-between')};
   width: 100%;
   color: ${theme('thread.articleDigest')};