diff --git a/src/containers/content/TrendingContent/Footer/index.js b/src/containers/content/TrendingContent/Footer/index.js
deleted file mode 100755
index 950dab998..000000000
--- a/src/containers/content/TrendingContent/Footer/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- *
- * Content
- *
- */
-
-import React from 'react'
-
-import ArrowButton from '@/widgets/Buttons/ArrowButton'
-
-import {
-  Wrapper,
-  AboutBlock,
-  ContributorBlock,
-  ContributorsWrapper,
-  Desc,
-  Avatar,
-} from '../styles/footer'
-
-const FAKE_AVATAR =
-  'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/hot/hackernews.jpeg'
-
-const Footer = () => {
-  return (
-    <Wrapper>
-      <AboutBlock>
-        关于酷导航
-        <Desc>共收录信息 3485 条，最后更新：3小时前</Desc>
-        <ArrowButton>参与贡献</ArrowButton>
-      </AboutBlock>
-      <AboutBlock>
-        关于本周热榜
-        <Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
-        <ArrowButton>参与贡献</ArrowButton>
-      </AboutBlock>
-      <ContributorBlock>
-        本条目贡献者
-        <ContributorsWrapper>
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-        </ContributorsWrapper>
-        <ArrowButton>参与贡献</ArrowButton>
-      </ContributorBlock>
-    </Wrapper>
-  )
-}
-
-export default React.memo(Footer)
diff --git a/src/containers/content/TrendingContent/NewsBoard.js b/src/containers/content/TrendingContent/NewsBoard.js
deleted file mode 100755
index 89e699f1f..000000000
--- a/src/containers/content/TrendingContent/NewsBoard.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-
-import CustomScroller from '@/widgets/CustomScroller'
-import FeedsBar from '@/widgets/FeedsBar'
-
-import Footer from './Footer'
-
-import { Wrapper, ShadowBarHolder, FooterWrapper } from './styles/news_board'
-
-const NewsBoard = () => {
-  return (
-    <Wrapper>
-      <CustomScroller
-        direction="horizontal"
-        height="90vh"
-        innerHeight="89vh"
-        shadowSize="large"
-        withBorder
-      >
-        <FeedsBar title="Github Trending" numIndex={0} />
-        <FeedsBar title="国外社区动态" numIndex={1} />
-        <FeedsBar title="国内社区动态" numIndex={2} />
-        <FeedsBar title="象牙塔" numIndex={3} />
-        <FeedsBar title="独立博客" numIndex={4} />
-        <FeedsBar title="播客" numIndex={5} />
-        <ShadowBarHolder />
-      </CustomScroller>
-
-      <FooterWrapper>
-        <Footer />
-      </FooterWrapper>
-    </Wrapper>
-  )
-}
-
-export default React.memo(NewsBoard)
diff --git a/src/containers/content/TrendingContent/NewsBoard.tsx b/src/containers/content/TrendingContent/NewsBoard.tsx
new file mode 100644
index 000000000..73276fe60
--- /dev/null
+++ b/src/containers/content/TrendingContent/NewsBoard.tsx
@@ -0,0 +1,40 @@
+import { FC, memo } from 'react'
+
+import CustomScroller from '@/widgets/CustomScroller'
+import FeedsBar from '@/widgets/FeedsBar'
+import NoticeBar from '@/widgets/NoticeBar'
+
+import { Wrapper, ShadowBarHolder } from './styles/news_board'
+
+const NewsBoard: FC = () => {
+  return (
+    <Wrapper>
+      <CustomScroller
+        direction="horizontal"
+        height="90vh"
+        innerHeight="90vh"
+        shadowSize="large"
+        barSize="medium"
+        withBorder
+      >
+        <FeedsBar title="国外科技动态" />
+        <FeedsBar title="国内科技动态" />
+        <FeedsBar title="Github Trending" />
+        <FeedsBar title="象牙塔" />
+        <FeedsBar title="播客" />
+        <FeedsBar title="奇奇怪怪" />
+        <ShadowBarHolder />
+      </CustomScroller>
+
+      <NoticeBar
+        type="info"
+        content="UI 部分 inspired by TwitterDeck，当前内容仅为展示。自动化采集分类系统仍在开发调试中，欢迎任何形式的参与。"
+        top={15}
+        right={10}
+        noBg
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(NewsBoard)
diff --git a/src/containers/content/TrendingContent/index.js b/src/containers/content/TrendingContent/index.tsx
old mode 100755
new mode 100644
similarity index 69%
rename from src/containers/content/TrendingContent/index.js
rename to src/containers/content/TrendingContent/index.tsx
index a8ef057b3..7ae2da3a4
--- a/src/containers/content/TrendingContent/index.js
+++ b/src/containers/content/TrendingContent/index.tsx
@@ -4,7 +4,10 @@
  *
  */
 
-import React from 'react'
+import { FC } from 'react'
+
+import type { TMetric } from '@/spec'
+import { METRIC } from '@/constant'
 
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
@@ -12,13 +15,22 @@ import { pluggedIn } from '@/utils/mobx'
 import OrButton from '@/widgets/Buttons/OrButton'
 import NewsBoard from './NewsBoard'
 
+import type { TStore } from './store'
 import { Wrapper, InnerWrapper, SwitchBtn, ContentWrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:TrendingContent')
 
-const TrendingContentContainer = ({ trendingContent: store, metric }) => {
+type TProps = {
+  trendingContent?: TStore
+  metric?: TMetric
+}
+
+const TrendingContentContainer: FC<TProps> = ({
+  trendingContent: store,
+  metric = METRIC.TRENDING,
+}) => {
   useInit(store)
 
   return (
@@ -27,17 +39,16 @@ const TrendingContentContainer = ({ trendingContent: store, metric }) => {
         <SwitchBtn>
           <OrButton
             direction="column"
-            type="primary"
-            activeKey="inside"
+            activeKey="outside"
             group={[
-              {
-                key: 'inside',
-                title: '站内',
-              },
               {
                 key: 'outside',
                 title: '站外',
               },
+              {
+                key: 'inside',
+                title: '站内',
+              },
             ]}
           />
         </SwitchBtn>
@@ -49,4 +60,4 @@ const TrendingContentContainer = ({ trendingContent: store, metric }) => {
   )
 }
 
-export default pluggedIn(TrendingContentContainer)
+export default pluggedIn(TrendingContentContainer) as FC<TProps>
diff --git a/src/containers/content/TrendingContent/logic.js b/src/containers/content/TrendingContent/logic.ts
old mode 100755
new mode 100644
similarity index 83%
rename from src/containers/content/TrendingContent/logic.js
rename to src/containers/content/TrendingContent/logic.ts
index fa503a8f5..598188c36
--- a/src/containers/content/TrendingContent/logic.js
+++ b/src/containers/content/TrendingContent/logic.ts
@@ -1,6 +1,8 @@
 import { useEffect } from 'react'
 
 import { buildLog } from '@/utils/logger'
+
+import type { TStore } from './store'
 // import S from './service'
 
 let store = null
@@ -16,7 +18,7 @@ export const someMethod = () => {
 // 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/TrendingContent/store.js b/src/containers/content/TrendingContent/store.tsx
old mode 100755
new mode 100644
similarity index 61%
rename from src/containers/content/TrendingContent/store.js
rename to src/containers/content/TrendingContent/store.tsx
index 163eeaf00..6569829b7
--- a/src/containers/content/TrendingContent/store.js
+++ b/src/containers/content/TrendingContent/store.tsx
@@ -3,15 +3,15 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, Instance } from 'mobx-state-tree'
 
 import { markStates } from '@/utils/mobx'
 
 const TrendingContent = T.model('TrendingContent', {})
   .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
+    // get root() {
+    //   return getParent(self)
+    // },
   }))
   .actions((self) => ({
     mark(sobj) {
@@ -19,4 +19,5 @@ const TrendingContent = T.model('TrendingContent', {})
     },
   }))
 
+export type TStore = Instance<typeof TrendingContent>
 export default TrendingContent
diff --git a/src/containers/content/TrendingContent/styles/index.ts b/src/containers/content/TrendingContent/styles/index.ts
index 790410ea8..7295ab7a7 100755
--- a/src/containers/content/TrendingContent/styles/index.ts
+++ b/src/containers/content/TrendingContent/styles/index.ts
@@ -1,20 +1,23 @@
 import styled from 'styled-components'
 
 // import Img from '@/Img'
-import type { TMetric } from '@/spec'
+import type { TTestable, TMetric } from '@/spec'
 import css from '@/utils/css'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
   ${css.flexColumn('align-both')}
   width: 100%;
 `
+
 export const InnerWrapper = styled.div<{ metric: TMetric }>`
   ${css.flex()};
   padding: 10px 0;
   margin-top: 12px;
   width: 100%;
   ${({ metric }) => css.fitContentWidth(metric)};
-  margin-left: -80px;
+  margin-left: -85px;
 `
 export const SwitchBtn = styled.div`
   margin-right: 15px;
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
index 54679ef03..ddac8244e 100755
--- a/src/pages/trending.tsx
+++ b/src/pages/trending.tsx
@@ -1,9 +1,16 @@
+import { GetServerSideProps } from 'next'
 import { Provider } from 'mobx-react'
 
 import { METRIC } from '@/constant'
 import { P } from '@/schemas'
 
-import { ssrBaseStates, ssrFetchPrepare, ssrRescue, trendingSEO } from '@/utils'
+import {
+  ssrBaseStates,
+  ssrFetchPrepare,
+  refreshIfneed,
+  trendingSEO,
+  ssrError,
+} from '@/utils'
 import GlobalLayout from '@/containers/layout/GlobalLayout'
 import TrendingContent from '@/containers/content/TrendingContent'
 
@@ -11,36 +18,30 @@ import { useStore } from '@/stores/init'
 
 const fetchData = async (context, opt = {}) => {
   const { gqClient } = ssrFetchPrepare(context, opt)
-
   const sessionState = gqClient.request(P.sessionState)
-  const subscribedCommunities = gqClient.request(P.subscribedCommunities, {
-    filter: {
-      page: 1,
-      size: 30,
-    },
-  })
 
   return {
     ...(await sessionState),
-    ...(await subscribedCommunities),
   }
 }
 
-export const getServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   let resp
   try {
     resp = await fetchData(context)
-  } catch ({ response: { errors } }) {
-    if (ssrRescue.hasLoginError(errors)) {
-      resp = await fetchData(context, { tokenExpired: true })
-    }
-  }
+    const { sessionState } = resp
 
-  const initProps = { ...ssrBaseStates(resp) }
+    refreshIfneed(sessionState, '/trending', context)
+  } catch (e) {
+    console.log('#### error from server: ', e)
+    return ssrError(context, 'fetch', 500)
+  }
 
-  return {
-    props: { errorCode: null, namespacesRequired: ['general'], ...initProps },
+  const initProps = {
+    ...ssrBaseStates(resp),
   }
+
+  return { props: { errorCode: null, ...initProps } }
 }
 
 const TrendingPage = (props) => {
diff --git a/src/widgets/Buttons/OrButton/HorizontalButton.tsx b/src/widgets/Buttons/OrButton/HorizontalButton.tsx
index 40bb1fe10..4ac185372 100644
--- a/src/widgets/Buttons/OrButton/HorizontalButton.tsx
+++ b/src/widgets/Buttons/OrButton/HorizontalButton.tsx
@@ -13,7 +13,7 @@ import {
 type TProps = Omit<TButtonProps, 'direction'>
 
 const HorizontalButton: FC<TProps> = ({
-  onClick,
+  onClick = console.log,
   size = SIZE.SMALL,
   activeKey,
   group = [
diff --git a/src/widgets/Buttons/OrButton/VerticalButton.tsx b/src/widgets/Buttons/OrButton/VerticalButton.tsx
index 2be7755c2..f1c4b9367 100644
--- a/src/widgets/Buttons/OrButton/VerticalButton.tsx
+++ b/src/widgets/Buttons/OrButton/VerticalButton.tsx
@@ -13,7 +13,7 @@ import {
 type TProps = Omit<TButtonProps, 'direction'>
 
 const VerticalButton: FC<TProps> = ({
-  onClick,
+  onClick = console.log,
   size = SIZE.SMALL,
   activeKey,
   group = [
diff --git a/src/widgets/Buttons/OrButton/index.tsx b/src/widgets/Buttons/OrButton/index.tsx
index e99a17710..82f788b2f 100644
--- a/src/widgets/Buttons/OrButton/index.tsx
+++ b/src/widgets/Buttons/OrButton/index.tsx
@@ -9,7 +9,7 @@ export type TProps = {
   direction?: 'row' | 'column'
   size?: TSIZE_SM
   activeKey: string
-  onClick: (key: string) => void
+  onClick?: (key: string) => void
   group: {
     key: string
     title: string
diff --git a/src/widgets/CustomScroller/HorizontalScroller.tsx b/src/widgets/CustomScroller/HorizontalScroller.tsx
index 23c810f90..493765f90 100755
--- a/src/widgets/CustomScroller/HorizontalScroller.tsx
+++ b/src/widgets/CustomScroller/HorizontalScroller.tsx
@@ -82,7 +82,7 @@ const HorizontalScroller: FC<TProps> = ({
             onEnter={handleHideLeftShadow}
             onLeave={handleShowLeftShadow}
           />
-          <div>{children}</div>
+          {children}
           <Waypoint
             horizontal
             onEnter={handleHideRightShadow}
diff --git a/src/widgets/CustomScroller/styles/metrics.ts b/src/widgets/CustomScroller/styles/metrics.ts
index e76111db2..f4166c3dc 100755
--- a/src/widgets/CustomScroller/styles/metrics.ts
+++ b/src/widgets/CustomScroller/styles/metrics.ts
@@ -96,6 +96,9 @@ const horizontalScrollbarHeight = (type: string): string => {
     case SIZE.MEDIUM: {
       return '8px;'
     }
+    case SIZE.LARGE: {
+      return '12px;'
+    }
     // default
     default: {
       return '10px'
diff --git a/src/widgets/FeedsBar/List.js b/src/widgets/FeedsBar/List.tsx
old mode 100755
new mode 100644
similarity index 82%
rename from src/widgets/FeedsBar/List.js
rename to src/widgets/FeedsBar/List.tsx
index f61992a3a..e28b2c3ba
--- a/src/widgets/FeedsBar/List.js
+++ b/src/widgets/FeedsBar/List.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils/logger'
@@ -12,7 +12,7 @@ import { buildLog } from '@/utils/logger'
 import CustomScroller from '@/widgets/CustomScroller'
 import { SpaceGrow } from '@/widgets/Common'
 
-import fakeSourceList from './fakeSourceList'
+import { mockList } from './mock'
 
 import {
   ListItemWrapper,
@@ -26,10 +26,11 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:FeedsBar:index')
 
-const List = () => {
+const List: FC = () => {
   // list header(with lable) - 40px
   // source select - 75px
-  const listHeadHeight = '115px'
+  const listHeadHeight = '105px'
+  const items = mockList()
 
   return (
     <CustomScroller
@@ -37,7 +38,7 @@ const List = () => {
       height={`calc(90vh - ${listHeadHeight})`}
       autoHide
     >
-      {fakeSourceList.map((item) => (
+      {items.map((item) => (
         <ListItemWrapper key={item.id}>
           <Header>
             <Icon src={item.icon} />
@@ -53,4 +54,4 @@ const List = () => {
   )
 }
 
-export default React.memo(List)
+export default memo(List)
diff --git a/src/widgets/FeedsBar/SourceSelector.js b/src/widgets/FeedsBar/SourceSelector.tsx
old mode 100755
new mode 100644
similarity index 66%
rename from src/widgets/FeedsBar/SourceSelector.js
rename to src/widgets/FeedsBar/SourceSelector.tsx
index 3ee2a4ca9..0a179df0b
--- a/src/widgets/FeedsBar/SourceSelector.js
+++ b/src/widgets/FeedsBar/SourceSelector.tsx
@@ -4,19 +4,20 @@
  *
  */
 
-import React from 'react'
-// import T from 'prop-types'
+import { FC, memo } from 'react'
 
 import { buildLog } from '@/utils/logger'
 import CustomScroller from '@/widgets/CustomScroller'
 import { Wrapper, Icon, Block, Title } from './styles/source_selector'
 
-import sources from './fakeSources'
+import { mockSource } from './mock'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:SourceSelector:index')
 
-const SourceSelector = () => {
+const SourceSelector: FC = () => {
+  const items = mockSource()
+
   return (
     <Wrapper>
       <CustomScroller
@@ -24,7 +25,7 @@ const SourceSelector = () => {
         innerHeight="70px"
         shadowSize="small"
       >
-        {sources.map((item) => (
+        {items.map((item) => (
           <Block key={item.id}>
             <Icon src={item.icon} />
             <Title>{item.title}</Title>
@@ -35,10 +36,4 @@ const SourceSelector = () => {
   )
 }
 
-SourceSelector.propTypes = {
-  // https://www.npmjs.com/package/prop-types
-}
-
-SourceSelector.defaultProps = {}
-
-export default React.memo(SourceSelector)
+export default memo(SourceSelector)
diff --git a/src/widgets/FeedsBar/fakeSourceList.js b/src/widgets/FeedsBar/fakeSourceList.js
deleted file mode 100755
index b8490c8b1..000000000
--- a/src/widgets/FeedsBar/fakeSourceList.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { ICON_CMD } from '@/config'
-
-const list = [
-  {
-    id: '0',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    source: 'hackernews',
-    createdAt: '3天前',
-    title: 'Thank HN: You helped me get a new job',
-  },
-  {
-    id: '1',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    source: 'techcrunch',
-    createdAt: '3天前',
-    title:
-      'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-  },
-  {
-    id: '2',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    source: 'infoQ 中文站',
-    createdAt: '2天前',
-    title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-  },
-  {
-    id: '3',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    source: 'hackernews',
-    createdAt: '3天前',
-    title: 'Thank HN: You helped me get a new job',
-  },
-  {
-    id: '4',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    source: 'techcrunch',
-    createdAt: '3天前',
-    title:
-      'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-  },
-  {
-    id: '5',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    source: 'infoQ 中文站',
-    createdAt: '2天前',
-    title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-  },
-  {
-    id: '6',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    source: 'hackernews',
-    createdAt: '3天前',
-    title: 'Thank HN: You helped me get a new job',
-  },
-  {
-    id: '7',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    source: 'techcrunch',
-    createdAt: '3天前',
-    title:
-      'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-  },
-  {
-    id: '8',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    source: 'infoQ 中文站',
-    createdAt: '2天前',
-    title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-  },
-  {
-    id: '9',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    source: 'hackernews',
-    createdAt: '3天前',
-    title: 'Thank HN: You helped me get a new job',
-  },
-  {
-    id: '10',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    source: 'techcrunch',
-    createdAt: '3天前',
-    title:
-      'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-  },
-  {
-    id: '11',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    source: 'infoQ 中文站',
-    createdAt: '2天前',
-    title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
-  },
-  {
-    id: '12',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    source: 'hackernews',
-    createdAt: '3天前',
-    title: 'Thank HN: You helped me get a new job',
-  },
-  {
-    id: '13',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    source: 'techcrunch',
-    createdAt: '3天前',
-    title:
-      'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
-  },
-  {
-    id: '14',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    source: 'infoQ 中文站',
-    createdAt: '2天前',
-    title: 'Footer',
-  },
-]
-
-export default list
diff --git a/src/widgets/FeedsBar/fakeSources.js b/src/widgets/FeedsBar/fakeSources.js
deleted file mode 100755
index 86bd15384..000000000
--- a/src/widgets/FeedsBar/fakeSources.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ICON_CMD } from '@/config'
-
-const sources = [
-  {
-    id: '0',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    title: 'techcrunch',
-  },
-  {
-    id: '1',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    title: 'hackernews',
-  },
-  {
-    id: '2',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    title: 'infoQ',
-  },
-  {
-    id: '3',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    title: 'techcrunch',
-  },
-  {
-    id: '4',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    title: 'hackernews',
-  },
-  {
-    id: '5',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    title: 'infoQ',
-  },
-  {
-    id: '21',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    title: 'infoQ',
-  },
-  {
-    id: '31',
-    icon: `${ICON_CMD}/hot/techcrunch.png`,
-    title: 'techcrunch',
-  },
-  {
-    id: '41',
-    icon: `${ICON_CMD}/hot/hackernews.jpeg`,
-    title: 'hackernews',
-  },
-  {
-    id: '51',
-    icon: `${ICON_CMD}/hot/infoq.jpg`,
-    title: 'infoQ',
-  },
-]
-
-export default sources
diff --git a/src/widgets/FeedsBar/index.js b/src/widgets/FeedsBar/index.tsx
old mode 100755
new mode 100644
similarity index 74%
rename from src/widgets/FeedsBar/index.js
rename to src/widgets/FeedsBar/index.tsx
index 3ecdfe9a6..b50ee86e1
--- a/src/widgets/FeedsBar/index.js
+++ b/src/widgets/FeedsBar/index.tsx
@@ -4,8 +4,7 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import { FC, memo } from 'react'
 
 import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils/logger'
@@ -19,7 +18,11 @@ import { Wrapper, Header, FunctionIcon, Title } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:FeedsBar:index')
 
-const FeedsBar = ({ title }) => {
+type TProps = {
+  title: string
+}
+
+const FeedsBar: FC<TProps> = ({ title }) => {
   return (
     <Wrapper>
       <Header>
@@ -33,10 +36,4 @@ const FeedsBar = ({ title }) => {
   )
 }
 
-FeedsBar.propTypes = {
-  title: T.string.isRequired,
-}
-
-FeedsBar.defaultProps = {}
-
-export default React.memo(FeedsBar)
+export default memo(FeedsBar)
diff --git a/src/widgets/FeedsBar/mock.ts b/src/widgets/FeedsBar/mock.ts
new file mode 100644
index 000000000..0cc8663d7
--- /dev/null
+++ b/src/widgets/FeedsBar/mock.ts
@@ -0,0 +1,171 @@
+import { ICON_CMD } from '@/config'
+
+export const mockList = () => {
+  return [
+    {
+      id: '0',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      source: 'hackernews',
+      createdAt: '3天前',
+      title: 'Thank HN: You helped me get a new job',
+    },
+    {
+      id: '1',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      source: 'techcrunch',
+      createdAt: '3天前',
+      title:
+        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
+    },
+    {
+      id: '2',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      source: 'infoQ 中文站',
+      createdAt: '2天前',
+      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
+    },
+    {
+      id: '3',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      source: 'hackernews',
+      createdAt: '3天前',
+      title: 'Thank HN: You helped me get a new job',
+    },
+    {
+      id: '4',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      source: 'techcrunch',
+      createdAt: '3天前',
+      title:
+        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
+    },
+    {
+      id: '5',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      source: 'infoQ 中文站',
+      createdAt: '2天前',
+      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
+    },
+    {
+      id: '6',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      source: 'hackernews',
+      createdAt: '3天前',
+      title: 'Thank HN: You helped me get a new job',
+    },
+    {
+      id: '7',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      source: 'techcrunch',
+      createdAt: '3天前',
+      title:
+        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
+    },
+    {
+      id: '8',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      source: 'infoQ 中文站',
+      createdAt: '2天前',
+      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
+    },
+    {
+      id: '9',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      source: 'hackernews',
+      createdAt: '3天前',
+      title: 'Thank HN: You helped me get a new job',
+    },
+    {
+      id: '10',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      source: 'techcrunch',
+      createdAt: '3天前',
+      title:
+        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
+    },
+    {
+      id: '11',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      source: 'infoQ 中文站',
+      createdAt: '2天前',
+      title: '苹果走钢丝：为iPhone隐私大战FBI，还是屈服于特朗普？',
+    },
+    {
+      id: '12',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      source: 'hackernews',
+      createdAt: '3天前',
+      title: 'Thank HN: You helped me get a new job',
+    },
+    {
+      id: '13',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      source: 'techcrunch',
+      createdAt: '3天前',
+      title:
+        'atch Critical Cryptographic Vulnerability in Microsoft Windows [pdf]',
+    },
+    {
+      id: '14',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      source: 'infoQ 中文站',
+      createdAt: '2天前',
+      title: 'Footer',
+    },
+  ]
+}
+
+export const mockSource = () => {
+  return [
+    {
+      id: '0',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      title: 'techcrunch',
+    },
+    {
+      id: '1',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      title: 'hackernews',
+    },
+    {
+      id: '2',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      title: 'infoQ',
+    },
+    {
+      id: '3',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      title: 'techcrunch',
+    },
+    {
+      id: '4',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      title: 'hackernews',
+    },
+    {
+      id: '5',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      title: 'infoQ',
+    },
+    {
+      id: '21',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      title: 'infoQ',
+    },
+    {
+      id: '31',
+      icon: `${ICON_CMD}/hot/techcrunch.png`,
+      title: 'techcrunch',
+    },
+    {
+      id: '41',
+      icon: `${ICON_CMD}/hot/hackernews.jpeg`,
+      title: 'hackernews',
+    },
+    {
+      id: '51',
+      icon: `${ICON_CMD}/hot/infoq.jpg`,
+      title: 'infoQ',
+    },
+  ]
+}
diff --git a/src/widgets/FeedsBar/styles/source_selector.ts b/src/widgets/FeedsBar/styles/source_selector.ts
index c8d3d91c6..fc78f0cae 100755
--- a/src/widgets/FeedsBar/styles/source_selector.ts
+++ b/src/widgets/FeedsBar/styles/source_selector.ts
@@ -21,6 +21,7 @@ export const Header = styled.div`
 // padding: 10px 2px;
 export const Block = styled.div`
   ${css.flexColumn('align-both')};
+  margin-right: 5px;
 
   &:hover {
     cursor: pointer;
@@ -28,10 +29,10 @@ export const Block = styled.div`
   }
 `
 export const Icon = styled(Img)`
-  ${css.circle(34)};
+  ${css.circle(30)};
 `
 export const Title = styled.div`
-  ${css.cutRest('60px')};
+  ${css.cutRest('50px')};
   text-align: center;
   padding-left: 5px;
   color: ${theme('thread.articleDigest')};