diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts b/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts
index 9400f427b..2da0a3883 100644
--- a/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts
+++ b/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts
@@ -16,7 +16,7 @@ export const ArrowIcon = styled(Img)<{ reverse?: boolean }>`
     fill: ${theme('thread.articleTitle')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Text = styled.div`
   color: ${theme('thread.articleDigest')};
@@ -27,5 +27,5 @@ export const Text = styled.div`
     fill: ${theme('thread.articleTitle')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/containers/content/CoolGuideContent/Content.tsx b/src/containers/content/CoolGuideContent/Content.tsx
index 3a965593f..590f83809 100755
--- a/src/containers/content/CoolGuideContent/Content.tsx
+++ b/src/containers/content/CoolGuideContent/Content.tsx
@@ -14,8 +14,9 @@ import {
   PeopleGallery,
   ImageGallery,
 } from '@/widgets/GalleryHub'
+import NoticeBar from '@/widgets/NoticeBar'
 
-import SearchCover from './SearchCover'
+import HomeCover from './HomeCover'
 import Footer from './Footer'
 
 import { Wrapper, InnerWrapper, NormalListWrapper } from './styles/content'
@@ -28,10 +29,10 @@ const Content: FC<TProps> = ({ displayType }) => {
   let DisplayContent
 
   switch (displayType) {
-    case GUIDE.PREVIEW: {
+    case GUIDE.HOME: {
       DisplayContent = (
         <NormalListWrapper>
-          <SearchCover />
+          <HomeCover />
         </NormalListWrapper>
       )
       break
@@ -70,7 +71,7 @@ const Content: FC<TProps> = ({ displayType }) => {
       DisplayContent = (
         <NormalListWrapper>
           <ProductGallery />
-          <Pagi margin={{ top: '40px', bottom: '60px' }} />
+          <Pagi margin={{ top: '20px', bottom: '20px' }} />
           <Footer />
           <br />
         </NormalListWrapper>
@@ -81,6 +82,14 @@ const Content: FC<TProps> = ({ displayType }) => {
 
   return (
     <Wrapper>
+      {displayType !== GUIDE.HOME && (
+        <NoticeBar
+          type="info"
+          content="当前条目仅作无分类无立场 UI 展示，协作编辑系统、模板等功能仍在开发调试中，欢迎任何形式的参与。"
+          bottom={15}
+          right={10}
+        />
+      )}
       <InnerWrapper>{DisplayContent}</InnerWrapper>
     </Wrapper>
   )
diff --git a/src/containers/content/CoolGuideContent/FilterBar.tsx b/src/containers/content/CoolGuideContent/FilterBar.tsx
index 013d61f1f..650310d18 100644
--- a/src/containers/content/CoolGuideContent/FilterBar.tsx
+++ b/src/containers/content/CoolGuideContent/FilterBar.tsx
@@ -13,11 +13,10 @@ import {
   TopFilter,
   Option,
   OptionItem,
-  // FavoriteIcon,
   ClockIcon,
 } from './styles/filter_bar'
 
-import { topFilterOnChange } from './logic'
+import { topFilterOnChange, goHomeContent } from './logic'
 
 type TProps = {
   topFilter: string
@@ -28,21 +27,18 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
   return (
     <Wrapper testid="filter-bar">
       <TopFilter>
-        <BrandTitle title="酷导航" desc="实用指南，启发灵感，找到有趣" />
+        <BrandTitle
+          title="酷导航"
+          desc="实用指南，启发灵感，找到有趣"
+          onClick={() => goHomeContent()}
+        />
         <Divider />
         {topFilter !== 'all' && (
           <Option onClick={() => topFilterOnChange('all')}>全部</Option>
         )}
-        {/* <Option
-          active={topFilter === 'favorite'}
-          onClick={() => topFilterOnChange('favorite')}
-        >
+        <Option>
           <OptionItem>我的收藏</OptionItem>
-          <FavoriteIcon
-            src={`${ICON_CMD}/navi/heart.svg`}
-            active={topFilter === 'favorite'}
-          />
-        </Option> */}
+        </Option>
         <Option
           active={topFilter === 'latest'}
           onClick={() => topFilterOnChange('latest')}
@@ -55,11 +51,13 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
         </Option>
       </TopFilter>
       <Divider />
-      <Sticky offsetTop={30}>
+      <Sticky offsetTop={100}>
         <Fragment>
           <NaviCatalog
-            title="分类"
-            onSelect={(id: string, type: string) => menuOnSelect(id, type)}
+            title="类别"
+            onSelect={(id: string, type: string) => {
+              menuOnSelect(id, type)
+            }}
             withDivider={false}
             tags={mockNaviCatalogTags()}
           />
diff --git a/src/containers/content/CoolGuideContent/Footer/index.tsx b/src/containers/content/CoolGuideContent/Footer/index.tsx
index c3bd2c7e1..af52c9d63 100755
--- a/src/containers/content/CoolGuideContent/Footer/index.tsx
+++ b/src/containers/content/CoolGuideContent/Footer/index.tsx
@@ -6,7 +6,11 @@
 
 import { FC, memo } from 'react'
 
+import { mockUsers } from '@/utils/mock'
+
 import ArrowButton from '@/widgets/Buttons/ArrowButton'
+import TeamList from '@/widgets/TeamList'
+import { SpaceGrow } from '@/widgets/Common'
 
 import {
   Wrapper,
@@ -14,12 +18,9 @@ import {
   ContributorBlock,
   ContributorsWrapper,
   Desc,
-  Avatar,
+  ButtomWraper,
 } from '../styles/footer'
 
-const FAKE_AVATAR =
-  'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/hot/hackernews.jpeg'
-
 type TProps = {
   mode?: string
 }
@@ -29,26 +30,33 @@ const Footer: FC<TProps> = ({ mode }) => {
     <Wrapper center={mode === 'cover'}>
       <AboutBlock>
         关于酷导航
-        <Desc>共收录信息 3485 条，最后更新：3小时前</Desc>
-        <ArrowButton>更多</ArrowButton>
+        <Desc>
+          收集各种和开发设计群体直接间接相关的，具有一定水准的工具、产品、资源以及视角。
+        </Desc>
+        <ButtomWraper>
+          <ArrowButton>更多</ArrowButton>
+          <SpaceGrow />
+        </ButtomWraper>
       </AboutBlock>
       {mode !== 'cover' && (
         <AboutBlock>
-          关于本周热榜
-          <Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
-          <ArrowButton>参与贡献</ArrowButton>
+          关于本类别
+          <Desc>本类别收录日常使用频率较高的效率工具，最后更新于 5 天前</Desc>
+          <ButtomWraper>
+            <ArrowButton>参与贡献</ArrowButton>
+            <SpaceGrow />
+          </ButtomWraper>
         </AboutBlock>
       )}
       <ContributorBlock>
-        贡献者们
+        贡献者
         <ContributorsWrapper>
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
+          <TeamList users={mockUsers(5)} layout="guide-contribute" />
         </ContributorsWrapper>
-        <ArrowButton>参与贡献</ArrowButton>
+        <ButtomWraper>
+          <ArrowButton>参与贡献</ArrowButton>
+          <SpaceGrow />
+        </ButtomWraper>
       </ContributorBlock>
     </Wrapper>
   )
diff --git a/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx b/src/containers/content/CoolGuideContent/HomeCover/InputBox.tsx
similarity index 96%
rename from src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
rename to src/containers/content/CoolGuideContent/HomeCover/InputBox.tsx
index 90031bc60..aee4cbafc 100644
--- a/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
+++ b/src/containers/content/CoolGuideContent/HomeCover/InputBox.tsx
@@ -6,7 +6,7 @@ import {
   InputMask,
   MaskNumer,
   InputBar,
-} from '../styles/search_cover/input_box'
+} from '../styles/home_cover/input_box'
 
 type TProps = {
   showMask?: boolean
diff --git a/src/containers/content/CoolGuideContent/HomeCover/index.tsx b/src/containers/content/CoolGuideContent/HomeCover/index.tsx
new file mode 100644
index 000000000..d69b5d864
--- /dev/null
+++ b/src/containers/content/CoolGuideContent/HomeCover/index.tsx
@@ -0,0 +1,93 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+// import Footer from '../Footer'
+// import InputBox from './InputBox'
+
+import {
+  Wrapper,
+  Block,
+  Title,
+  Ul,
+  Li,
+  Strike,
+  Bold,
+} from '../styles/home_cover'
+
+type TProps = {
+  testid?: string
+}
+
+const HomeCover: FC<TProps> = ({ testid = 'search-cover' }) => {
+  return (
+    <Wrapper testid={testid}>
+      <Block>
+        <Title>关于酷导航</Title>
+        <Ul>
+          <Li>
+            这里收集各种和开发设计群体直接间接相关的，有<Strike>逼格</Strike>
+            一定水准的工具、产品、资源以及视角。
+          </Li>
+          <Li>
+            每个条目都会有客观的帖子介绍基本概况、使用场景、公认的一些优缺点等等。
+          </Li>
+          <Li>
+            是否收录与所在地域，是否开源，免费或付费等因素无关，但会列出。
+          </Li>
+          <Li>
+            大多数目录的收录标准只有一个：<Bold>The best or the unique</Bold>
+          </Li>
+          <Li>不恰烂钱，不讲人情，你行你上。</Li>
+        </Ul>
+      </Block>
+      <Block>
+        <Title>当前状态</Title>
+        <Ul>
+          <Li>
+            👈 &nbsp;初始分类及 UI 雏形已完成，欢迎体验后
+            <Linker
+              src="/feedback"
+              external={false}
+              text="给我们反馈"
+              inline
+              left={4}
+              right={4}
+            />
+            。
+          </Li>
+          <Li>目前已经完成大部分的后端工作。</Li>
+          <Li>前端富文本编辑/显示模板还有不少工作量</Li>
+          <Li>
+            协作编辑，编辑历史，参与贡献体系等已经基本设计完成，但还未正式编写相关模块。
+          </Li>
+        </Ul>
+      </Block>
+      <Block>
+        <Title>开发计划</Title>
+        <Ul>
+          <Li>
+            收集社区
+            <Linker
+              src="/feedback"
+              external={false}
+              text="建议反馈"
+              inline
+              left={4}
+              right={4}
+            />
+            ，完善设计。
+          </Li>
+          <Li>编码实施。计划在内测阶段完成。</Li>
+        </Ul>
+      </Block>
+      {/* <Br top={10} /> */}
+      {/* <InputBox /> */}
+      {/* <Br top={15} /> */}
+      {/* <Footer mode="cover" /> */}
+    </Wrapper>
+  )
+}
+
+export default memo(HomeCover)
diff --git a/src/containers/content/CoolGuideContent/SearchCover/index.tsx b/src/containers/content/CoolGuideContent/SearchCover/index.tsx
deleted file mode 100644
index 0357295fd..000000000
--- a/src/containers/content/CoolGuideContent/SearchCover/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC, memo } from 'react'
-
-import { Br } from '@/widgets/Common'
-
-import Footer from '../Footer'
-import InputBox from './InputBox'
-
-import { Wrapper, Header, Title, Slogan } from '../styles/search_cover'
-
-type TProps = {
-  testid?: string
-}
-
-const SearchCover: FC<TProps> = ({ testid = 'search-cover' }) => {
-  return (
-    <Wrapper testid={testid}>
-      <Header>
-        <Title>「酷导航」</Title>
-        <Slogan>实用指南，启发灵感，找到有趣</Slogan>
-      </Header>
-      <Br top={10} />
-      <InputBox />
-      <Br top={15} />
-      <Footer mode="cover" />
-    </Wrapper>
-  )
-}
-
-export default memo(SearchCover)
diff --git a/src/containers/content/CoolGuideContent/logic.ts b/src/containers/content/CoolGuideContent/logic.ts
index c39b3ee76..fcacc96de 100755
--- a/src/containers/content/CoolGuideContent/logic.ts
+++ b/src/containers/content/CoolGuideContent/logic.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-import { ERR } from '@/constant'
+import { ERR, GUIDE } from '@/constant'
 import { errRescue } from '@/utils/helper'
 import asyncSuit from '@/utils/async'
 import { buildLog } from '@/utils/logger'
@@ -30,6 +30,10 @@ export const menuOnSelect = (
   store.mark({ activeMenuId, displayType })
 }
 
+export const goHomeContent = (): void => {
+  store.mark({ displayType: GUIDE.HOME })
+}
+
 /**
  * favorite or latestUpdated filter change
  *
diff --git a/src/containers/content/CoolGuideContent/store.ts b/src/containers/content/CoolGuideContent/store.ts
index dd1c91b94..1135c9b48 100755
--- a/src/containers/content/CoolGuideContent/store.ts
+++ b/src/containers/content/CoolGuideContent/store.ts
@@ -14,7 +14,7 @@ const CoolGuideContent = T.model('CoolGuideContent', {
   activeMenuId: T.maybeNull(T.string),
   // initActiveMenuId: T.optional(T.string, ''),
   topFilter: T.optional(T.string, 'all'),
-  displayType: T.optional(T.enumeration(values(GUIDE)), GUIDE.PREVIEW),
+  displayType: T.optional(T.enumeration(values(GUIDE)), GUIDE.HOME),
 }).actions((self) => ({
   markRoute(query): void {
     const root = getParent(self) as TRootStore
diff --git a/src/containers/content/CoolGuideContent/styles/filter_bar.ts b/src/containers/content/CoolGuideContent/styles/filter_bar.ts
index 5c21865b7..51d5407a6 100644
--- a/src/containers/content/CoolGuideContent/styles/filter_bar.ts
+++ b/src/containers/content/CoolGuideContent/styles/filter_bar.ts
@@ -38,7 +38,7 @@ export const Option = styled.div<TActive>`
     cursor: pointer;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const OptionItem = styled.div`
   flex-grow: 1;
@@ -47,7 +47,7 @@ const OptionIconBase = styled(Img)<TActive>`
   ${css.size(12)};
   opacity: ${({ active }) => (active ? '1' : '0')};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const FavoriteIcon = styled(OptionIconBase)`
   fill: ${theme('baseColor.red')};
diff --git a/src/containers/content/CoolGuideContent/styles/footer/index.ts b/src/containers/content/CoolGuideContent/styles/footer/index.ts
index e75cb61b9..b93745d20 100755
--- a/src/containers/content/CoolGuideContent/styles/footer/index.ts
+++ b/src/containers/content/CoolGuideContent/styles/footer/index.ts
@@ -37,17 +37,24 @@ export const ContributorsWrapper = styled.div`
   ${css.flex()};
   margin-top: -35px;
 `
-export const Avatar = styled(Img)`
-  ${css.size(20)};
-  margin-right: 10px;
-  border-radius: 100%;
-`
+
 export const Desc = styled.div`
+  color: ${theme('thread.articleDigest')};
   margin-top: -10px;
-  opacity: 0.6;
+  opacity: 0.8;
+
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
 
   ${Block}:hover & {
-    opacity: 0.8;
+    opacity: 1;
   }
   transition: opacity 0.2s;
 `
+export const ButtomWraper = styled.div`
+  ${css.flex('align-center')};
+`
diff --git a/src/containers/content/CoolGuideContent/styles/home_cover/index.ts b/src/containers/content/CoolGuideContent/styles/home_cover/index.ts
new file mode 100644
index 000000000..055d2fd7a
--- /dev/null
+++ b/src/containers/content/CoolGuideContent/styles/home_cover/index.ts
@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flexColumn('align-both')};
+  width: 100%;
+  padding-right: 2%;
+  min-height: 70vh;
+  margin-top: 30px;
+`
+export const Title = styled.div`
+  font-size: 16px;
+  color: ${theme('thread.articleTitle')};
+  margin-bottom: 15px;
+`
+export const Desc = styled.div`
+  font-size: 14px;
+  color: ${theme('thread.articleDigest')};
+`
+export const Block = styled.div`
+  ${css.flexColumn()};
+  margin-bottom: 30px;
+`
+export const Ul = styled.ul`
+  width: 375px;
+  list-style: disc;
+  color: ${theme('thread.articleDigest')};
+`
+export const Li = styled.li`
+  margin-bottom: 8px;
+  line-height: 1.6;
+  font-size: 14px;
+`
+export const Strike = styled.span`
+  text-decoration: line-through;
+  margin-left: 1px;
+  margin-right: 1px;
+`
+export const Bold = styled.span`
+  color: ${theme('thread.articleTitle')};
+  font-weight: bold;
+`
diff --git a/src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts b/src/containers/content/CoolGuideContent/styles/home_cover/input_box.ts
similarity index 100%
rename from src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts
rename to src/containers/content/CoolGuideContent/styles/home_cover/input_box.ts
diff --git a/src/containers/content/CoolGuideContent/styles/search_cover/index.ts b/src/containers/content/CoolGuideContent/styles/search_cover/index.ts
deleted file mode 100644
index 90b761ba6..000000000
--- a/src/containers/content/CoolGuideContent/styles/search_cover/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-
-import type { TTestable } from '@/spec'
-import { theme } from '@/utils/themes'
-import css from '@/utils/css'
-
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
-  ${css.flexColumn('align-both')};
-  width: 100%;
-  min-height: 70vh;
-  padding-right: 10%;
-`
-export const Header = styled.div`
-  ${css.flexColumn('align-center')};
-  margin-bottom: 20px;
-`
-export const Title = styled.div`
-  font-size: 20px;
-  color: ${theme('thread.articleTitle')};
-`
-export const Slogan = styled.div`
-  font-size: 15px;
-  color: ${theme('thread.articleDigest')};
-  margin-top: 5px;
-`
diff --git a/src/containers/content/ExploreContent/styles/community_card.ts b/src/containers/content/ExploreContent/styles/community_card.ts
index 5128e52fb..2b848f0f2 100755
--- a/src/containers/content/ExploreContent/styles/community_card.ts
+++ b/src/containers/content/ExploreContent/styles/community_card.ts
@@ -34,7 +34,7 @@ export const Wrapper = styled(BaseCard)`
     box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15);
   }
    */
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 
 // fill only works for non-colored svgs
diff --git a/src/containers/content/ExploreContent/styles/index.ts b/src/containers/content/ExploreContent/styles/index.ts
index 5363d658b..80cd41529 100755
--- a/src/containers/content/ExploreContent/styles/index.ts
+++ b/src/containers/content/ExploreContent/styles/index.ts
@@ -11,7 +11,7 @@ export const ContentWrapper = styled.div<{ center: boolean }>`
   ${css.flex('align-both')};
   margin-top: 45px;
   margin-left: ${({ center }) => (center ? '5%' : 'none')};
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const InnerWrapper = styled.div<{ metric: TMetric }>`
   ${css.flex()};
@@ -22,6 +22,6 @@ export const InnerWrapper = styled.div<{ metric: TMetric }>`
 export const ContentsWrapper = styled.div<{ center: boolean }>`
   ${css.flexColumn('justify-center')};
   width: ${({ center }) => (center ? '100%' : 'calc(100% - 140px)')};
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Text = styled.div``
diff --git a/src/containers/content/HaveADrinkContent/Body/Catalog.tsx b/src/containers/content/HaveADrinkContent/Body/Catalog.tsx
index 66fe91dbd..c6124443c 100755
--- a/src/containers/content/HaveADrinkContent/Body/Catalog.tsx
+++ b/src/containers/content/HaveADrinkContent/Body/Catalog.tsx
@@ -85,7 +85,7 @@ const Catalog: FC<TProps> = ({ category }) => {
             <Header>
               <Intro>
                 <Icon src={item.icon} />
-                {item.entries?.length} 条
+                {item.entries?.length} 杯
               </Intro>
               <MenuButton
                 placement="bottom-end"
diff --git a/src/containers/content/HaveADrinkContent/Body/Content.tsx b/src/containers/content/HaveADrinkContent/Body/Content.tsx
index 5a331d817..fc2f462ca 100644
--- a/src/containers/content/HaveADrinkContent/Body/Content.tsx
+++ b/src/containers/content/HaveADrinkContent/Body/Content.tsx
@@ -5,6 +5,8 @@ import Linker from '@/widgets/Linker'
 import type { TDrinkItem } from '../spec'
 import {
   Wrapper,
+  Title,
+  Desc,
   TextWrapper,
   ImageContentWrapper,
   Image,
@@ -30,6 +32,16 @@ const Content: FC<TProps> = ({ item }) => {
     )
   }
 
+  if (item.title) {
+    return (
+      <Wrapper>
+        <Title>{item.title}</Title>
+        <Desc>{item.text}</Desc>
+        {refLink && <Linker src={refLink} hint="参考" top={8} />}
+      </Wrapper>
+    )
+  }
+
   return (
     <Wrapper>
       <TextWrapper>{item.text}</TextWrapper>
diff --git a/src/containers/content/HaveADrinkContent/Body/index.tsx b/src/containers/content/HaveADrinkContent/Body/index.tsx
index 92ce7dcad..35c37bf13 100755
--- a/src/containers/content/HaveADrinkContent/Body/index.tsx
+++ b/src/containers/content/HaveADrinkContent/Body/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import { FC, memo } from 'react'
+import { FC, memo, useCallback } from 'react'
 import { AnimateOnChange } from 'react-animation'
 
 import { buildLog } from '@/utils/logger'
@@ -19,6 +19,7 @@ import Publish from './Publish'
 import Content from './Content'
 
 import { Wrapper, SentenceWrapper, Sentence, Hint } from '../styles/body'
+import { refreshDrink } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
@@ -73,7 +74,7 @@ const View: FC<TViewProps> = ({ view, category, drink, settingOptions }) => {
 
 const Body = (props) => {
   return (
-    <Wrapper>
+    <Wrapper onClick={() => refreshDrink()}>
       <View {...props} />
     </Wrapper>
   )
diff --git a/src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx b/src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx
index f617fedcc..c8efb7b27 100755
--- a/src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx
+++ b/src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx
@@ -12,11 +12,13 @@ import type { TPagiState } from '../spec'
 import {
   Wrapper,
   Text,
-  UnderlineBtn,
   CurNum,
   TotalNum,
   Divider,
+  CategoryBtn,
+  ArrowIcon,
 } from '../styles/header/index_status'
+
 import { setView } from '../logic'
 
 /* eslint-disable-next-line */
@@ -37,7 +39,10 @@ const IndexStatus: FC<TProps> = ({ pagiState, category }) => {
       <TotalNum>{total}</TotalNum>
       <Text>杯</Text>
       &nbsp;
-      <UnderlineBtn onClick={() => setView('catalog')}>{category}</UnderlineBtn>
+      <CategoryBtn onClick={() => setView('catalog')}>
+        {category}
+        <ArrowIcon />
+      </CategoryBtn>
     </Wrapper>
   )
 }
diff --git a/src/containers/content/HaveADrinkContent/demo.ts b/src/containers/content/HaveADrinkContent/demo.ts
index 80fe8d7d8..d7d800f02 100644
--- a/src/containers/content/HaveADrinkContent/demo.ts
+++ b/src/containers/content/HaveADrinkContent/demo.ts
@@ -3,7 +3,7 @@ import { ASSETS_ENDPOINT, ICON_CMD } from '@/config'
 const demo = [
   {
     id: '0',
-    icon: `${ICON_CMD}/drink/it-cold.svg`,
+    icon: `${ICON_CMD}/drink/egg.svg`,
     title: '魔鬼细节',
     desc: '各种产品或服务中的彩蛋和用心细节，情怀改变世界。',
     upvoteAlias: '爱了',
@@ -14,7 +14,7 @@ const demo = [
         images: [],
       },
       {
-        text: 'CoderPlanets 成员在不同的子社区有不同的昵称，比如在首页叫 CPer，Elixir 社区叫 Alchemist， Rust 社区叫  Rustacean 等等。',
+        text: 'CoderPlanets 成员在不同的子社区有不同的昵称，比如在首页叫 CPer，在 Elixir 社区叫 Alchemist， 在 Rust 社区叫  Rustacean 等等。',
       },
       {
         text: 'CoderPlanets 评论表情包中的感谢概念，是一个由爱心抽象出来的大螃蟹钳子，谐音为「谢谢」。',
@@ -26,13 +26,13 @@ const demo = [
         text: 'CoderPlanets 遵循中文排版原则，后端会自动为中英文间插入空格，中文的引号转义为「」等等。',
       },
       {
-        text: 'CoderPlanets 开发时没有使用任何流行的「UI组件库」，几乎所有模块都是量身定制，基本上没有撞衫的可能。',
+        text: 'CoderPlanets 的前端没有使用任何流行的「UI 组件库」，几乎所有组件都是量身定制，基本上没有撞衫的可能。',
       },
     ],
   },
   {
     id: '1',
-    icon: `${ICON_CMD}/drink/it-cold.svg`,
+    icon: `${ICON_CMD}/drink/freeze.svg`,
     title: 'IT 冷知识',
     desc: 'IT 发展史上少为人知的奇闻轶事，散落天涯的江湖传说。',
     upvoteAlias: '学到了',
@@ -52,7 +52,7 @@ const demo = [
         images: [`${ASSETS_ENDPOINT}/ugc/tmp/drink_1.jpg`],
       },
       {
-        text: '早期限于算力，都是用这种没有存储和 OS 的设备连接到中央计算机，现在的 Terminal 就来源于此。',
+        text: '早期限于算力，都是用这种没有存储和 OS 的设备连接到中央计算机，现在我们使用的 Terminal 概念就来源于此。',
         reference: 'https://qr.ae/pGmnPF',
         images: [`${ASSETS_ENDPOINT}/ugc/tmp/Pasted Graphic.png`],
       },
@@ -66,19 +66,19 @@ const demo = [
     upvoteAlias: '喜欢',
     entries: [
       {
-        text: '图像处理算法中使用最广的一幅图片来自《花花公子》杂志',
+        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
       },
     ],
   },
   {
     id: '3',
-    icon: `${ICON_CMD}/drink/number.svg`,
+    icon: `${ICON_CMD}/drink/chart.svg`,
     title: '数据酷',
     desc: '数据胜千言，Data 会说话。',
     upvoteAlias: '喜欢',
     entries: [
       {
-        text: '图像处理算法中使用最广的一幅图片来自《花花公子》杂志',
+        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
       },
     ],
   },
@@ -90,33 +90,46 @@ const demo = [
     upvoteAlias: '喜欢',
     entries: [
       {
-        text: 'why called Tree-Shaking',
-        reference: '',
+        title: 'Tree-Shaking',
+        text: '通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) — 即通过「摇树」把多余的叶子摇下来 ~',
+        reference: 'https://webpack.js.org/guides/tree-shaking/',
       },
       {
-        text: 'why called Cookies',
-        reference: '',
+        title: 'Bread Crumbs',
+        text: '网站上常见的「面包屑」导航。这个概念来自于儿童故事《糖果屋》，他们留下实实在在的面包屑来找到回家的路。',
+        reference: 'https://www.inlife.co.uk/why-are-cookies-called-cookies/',
       },
       {
-        text: 'why called Tor',
-        reference: '',
+        title: 'Tor',
+        text: 'The Onion Router, 洋葱路由的缩写, 它使用像洋葱一样的层状模型保证了匿名和不可追踪，是「暗网」的基础设施之一。',
+        reference: 'https://zh.wikipedia.org/wiki/Tor',
       },
       {
-        text: 'why called Google',
-        reference: '',
+        title: 'Cookies',
+        text: 'Cookies, 网站用于追踪用户行踪的一种机制，就像可以通过分析地上的曲奇饼干碎找出你去过那些地方一样。',
+        reference: 'https://zh.wikipedia.org/zh-hans/Cookie',
+      },
+      {
+        title: 'Googol',
+        text: 'Google 名称的来源，指的是 10 的 100 次幂，用来代表在互联网上可以获得的海量的资源。',
+      },
+      {
+        title: 'Batteries Included',
+        text: '意指一件产品包含了所有必要的东西，开箱即用，最早来源于 Python 社区。',
+        reference: 'https://qr.ae/pGmyXB',
       },
     ],
   },
   {
     id: '5',
-    icon: `${ICON_CMD}/drink/rap.svg`,
+    icon: `${ICON_CMD}/drink/tu.png`,
     title: '流氓产品',
     desc: '互联网厕所，专门记录那些令人作呕的产品及使用体验。',
     upvoteAlias: '吐了',
     entries: [
       {
-        text: 'CSDN red-poket rain',
-        reference: '',
+        text: 'CS*N 会在用户访问该网站后下起满屏幕的红包雨。',
+        images: [`${ASSETS_ENDPOINT}/ugc/tmp/drink_4.png`],
       },
     ],
   },
@@ -128,63 +141,63 @@ const demo = [
     upvoteAlias: '回血了',
     entries: [
       {
-        text: 'People can t do something themselfs, they',
-        reference: '',
+        text: '有梦就去追，没死就别停!',
+      },
+      {
+        text: 'You got a dream, you got to protect it. People can’t do something themselves, they want to tell you you can’t do it. You want something, go get it. Period.',
+        reference:
+          'https://www.goodreads.com/author/quotes/7242582.Pursuit_of_Happyness',
+      },
+      {
+        text: '遇到闪电记得要微笑，因为那是天空在给你拍照。',
       },
     ],
   },
   {
     id: '7',
-    icon: `${ICON_CMD}/drink/zhihu.svg`,
+    icon: `${ICON_CMD}/drink/magic-trick.svg`,
     title: 'Oh My Lang',
     desc: '各种小众语言的巧妙设计有趣特性 ~',
     upvoteAlias: '学到了',
     entries: [
       {
-        text: 'Elixir 中, Pipe',
-        reference: '',
+        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
       },
     ],
   },
   {
     id: '8',
-    icon: `${ICON_CMD}/drink/smile.svg`,
+    icon: `${ICON_CMD}/drink/desk-lamp.svg`,
     title: '晒工台',
     desc: '工作台与装备展示，极客的 DeskPorn ~ ',
     upvoteAlias: '喜欢',
     entries: [
       {
-        text: 'Awesome',
-        reference: '',
-        images: [],
+        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
       },
     ],
   },
   {
     id: '9',
-    icon: `${ICON_CMD}/drink/brain.svg`,
+    icon: `${ICON_CMD}/drink/number.svg`,
     title: 'APP 下架奇谈',
     desc: '应用市场那些奇葩诡异、莫名其妙、哭笑不得的被拒理由。 ',
     upvoteAlias: '惊呆了',
     entries: [
       {
-        text: 'Fuck',
-        reference: '',
-        images: [],
+        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
       },
     ],
   },
   {
     id: '10',
-    icon: `${ICON_CMD}/drink/chicken.svg`,
+    icon: `${ICON_CMD}/drink/editor.svg`,
     title: '编辑器圣战',
     desc: '晒主题，分享配置，使用技巧。',
     upvoteAlias: '喜欢',
     entries: [
       {
-        text: 'Awesome',
-        reference: '',
-        images: [],
+        text: '抱歉，该条目下还没有内容，欢迎任何形式的参与',
       },
     ],
   },
@@ -204,12 +217,46 @@ const demo = [
       {
         text: '比你优秀的人还在努力，你努力有什么用呢？',
       },
+
+      {
+        text: '不要看别人表面上一帆风顺，实际上他们背地里，也是一帆风顺。',
+      },
+      {
+        text: '哪有什么选择恐惧症，还不是因为穷。',
+      },
+      {
+        text: '长得丑就是病，不然整形医院怎么叫医院。',
+      },
+      {
+        text: '做事一定要考虑别人的感受，千万不能让他们太开心了。',
+      },
+      {
+        text: '昨天我去看心理医生，医生说我不是抑郁症，我是真的惨。',
+      },
+      {
+        text: '最好别收拾房间，当房间收拾干净时，你就是房间里唯一的垃圾。',
+      },
+      {
+        text: '只要坚持不走出舒适圈，你就能一直舒适下去。',
+      },
+      {
+        text: '找对象的时候，不要光看对方外表，得先看看自己外表',
+      },
+      {
+        text: '遇到你之前，我的世界是黑白的，遇见你之后全黑了。',
+      },
+      {
+        text: '因为没有钱才上班，现在上了班也没钱，难道有中间商赚差价？',
+      },
+      {
+        text: '以前十块钱能买很多东西，现在不行了，有监控。',
+      },
     ],
   },
 
   {
     id: '12',
-    icon: `${ICON_CMD}/drink/rap.svg`,
+    icon: `${ICON_CMD}/drink/talk.svg`,
     title: '言论收集簿',
     desc: '各大社交平台上给人启发思考的见解言论。',
     upvoteAlias: '赞同',
@@ -222,15 +269,20 @@ const demo = [
   },
   {
     id: '13',
-    icon: `${ICON_CMD}/drink/rap.svg`,
+    icon: `${ICON_CMD}/drink/cupid.svg`,
     title: '交个朋友',
     desc: '不是直播间，是化学实验室 ❤️',
     upvoteAlias: '有感觉',
     entries: [
       {
-        text: '成华区小龙女',
+        text: '我是成华区小龙女，羽毛球爱好者，爱做饭但不爱吃饭。',
         reference: '',
-        images: [],
+        images: [`${ASSETS_ENDPOINT}/ugc/tmp/drink_gugu.png`],
+      },
+      {
+        text: '我是高新区杨过，喜欢骑车，爱好科幻，很高兴认识你。',
+        reference: '',
+        images: [`${ASSETS_ENDPOINT}/ugc/tmp/drink_yangguo.png`],
       },
     ],
   },
diff --git a/src/containers/content/HaveADrinkContent/index.tsx b/src/containers/content/HaveADrinkContent/index.tsx
index 38006dae2..dcd060e35 100755
--- a/src/containers/content/HaveADrinkContent/index.tsx
+++ b/src/containers/content/HaveADrinkContent/index.tsx
@@ -8,7 +8,6 @@ import { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TMetric } from '@/spec'
-import { scrollToTop, lockPage, unlockPage } from '@/utils/dom'
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
@@ -46,12 +45,7 @@ const HaveADrinkContentContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  useShortcut('Space', () => {
-    scrollToTop()
-    lockPage()
-    refreshDrink()
-    setTimeout(() => unlockPage(), 1000)
-  })
+  useShortcut('Space', () => refreshDrink())
 
   const {
     view,
diff --git a/src/containers/content/HaveADrinkContent/logic.ts b/src/containers/content/HaveADrinkContent/logic.ts
index 7f26593df..80abe4acb 100755
--- a/src/containers/content/HaveADrinkContent/logic.ts
+++ b/src/containers/content/HaveADrinkContent/logic.ts
@@ -6,6 +6,7 @@ import { ERR } from '@/constant'
 import { errRescue } from '@/utils/helper'
 import asyncSuit from '@/utils/async'
 import { buildLog } from '@/utils/logger'
+import { scrollToTop, lockPage, unlockPage } from '@/utils/dom'
 
 import { ANIMATE_TIMER_CLASS, VIEW } from './constant'
 import type { TDrinkCategory } from './spec'
@@ -133,7 +134,10 @@ export const refreshDrink = (): void => {
   }
 
   store.mark({ drinkIdx: nextDrinkIdx })
-  // return  pool[drinkIdx]
+
+  scrollToTop()
+  lockPage()
+  setTimeout(() => unlockPage(), 1000)
 }
 
 // ###############################
diff --git a/src/containers/content/HaveADrinkContent/spec.ts b/src/containers/content/HaveADrinkContent/spec.ts
index 405de974a..7117223df 100644
--- a/src/containers/content/HaveADrinkContent/spec.ts
+++ b/src/containers/content/HaveADrinkContent/spec.ts
@@ -10,6 +10,7 @@ export type TSettingOption = {
 export type TInterval = '3s' | '5s' | '10s'
 
 export type TDrinkItem = {
+  title?: string
   text: string
   reference?: string
   images?: string[]
diff --git a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
index 6af5d1975..b24c9ebec 100755
--- a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
+++ b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
@@ -55,7 +55,7 @@ export const Block = styled.div<TActive>`
     border: 1px solid #327faf;
     box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15); /* same with the popover */
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 
 export const Header = styled.div`
@@ -67,11 +67,13 @@ export const Header = styled.div`
 `
 export const Intro = styled.div`
   ${css.flex('align-center')};
+  padding-left: 4px;
 `
 export const Icon = styled(Img)`
   fill: ${theme('thread.articleTitle')};
-  ${css.size(16)};
+  ${css.size(14)};
   margin-right: 8px;
+  filter: saturate(0.5);
 `
 export const MoreIcon = styled(MoreSVG)`
   ${css.size(15)};
diff --git a/src/containers/content/HaveADrinkContent/styles/body/content.ts b/src/containers/content/HaveADrinkContent/styles/body/content.ts
index 1473c59b3..9f9cc4336 100644
--- a/src/containers/content/HaveADrinkContent/styles/body/content.ts
+++ b/src/containers/content/HaveADrinkContent/styles/body/content.ts
@@ -7,6 +7,18 @@ import css from '@/utils/css'
 export const Wrapper = styled.div`
   ${css.flexColumn('align-both')};
 `
+export const Title = styled.div`
+  margin-bottom: 25px;
+  margin-top: -10px;
+  font-weight: bold;
+`
+export const Desc = styled.div`
+  font-size: 18px;
+  opacity: 0.8;
+  padding: 0 10%;
+  margin-bottom: 10px;
+`
+
 export const TextWrapper = styled.div``
 
 export const ImageContentWrapper = styled(Wrapper)`
diff --git a/src/containers/content/HaveADrinkContent/styles/header/index_status.ts b/src/containers/content/HaveADrinkContent/styles/header/index_status.ts
index cda0f0141..a3eb8a7c4 100755
--- a/src/containers/content/HaveADrinkContent/styles/header/index_status.ts
+++ b/src/containers/content/HaveADrinkContent/styles/header/index_status.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 // import Img from '@/Img'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
+import ArrowSVG from '@/icons/ArrowSolid'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')}
@@ -24,13 +25,26 @@ export const Divider = styled.div`
   margin-left: 5px;
   margin-right: 2px;
 `
-export const UnderlineBtn = styled.div`
+export const CategoryBtn = styled.div`
+  ${css.flex('align-center')};
   color: ${theme('button.primary')};
   margin-left: 2px;
   margin-right: 2px;
 
   &:hover {
-    cursor: pointer;
     font-weight: bold;
+    cursor: pointer;
+  }
+`
+export const ArrowIcon = styled(ArrowSVG)`
+  ${css.size(12)};
+  margin-top: 2px;
+  fill: ${theme('button.primary')};
+  margin-left: 4px;
+  transform: rotate(90deg);
+  opacity: 0.6;
+
+  ${CategoryBtn}:hover & {
+    opacity: 1;
   }
 `
diff --git a/src/containers/content/HelpCenterContent/styles/footer/reaction.ts b/src/containers/content/HelpCenterContent/styles/footer/reaction.ts
index ab5b6a8a5..f6f314ea9 100644
--- a/src/containers/content/HelpCenterContent/styles/footer/reaction.ts
+++ b/src/containers/content/HelpCenterContent/styles/footer/reaction.ts
@@ -90,5 +90,5 @@ export const ShareIcon = styled(Img)`
     cursor: pointer;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/containers/content/MeetupsContent/styles/activity_card.ts b/src/containers/content/MeetupsContent/styles/activity_card.ts
index e807bb9cd..5e455bce0 100755
--- a/src/containers/content/MeetupsContent/styles/activity_card.ts
+++ b/src/containers/content/MeetupsContent/styles/activity_card.ts
@@ -30,7 +30,7 @@ export const Wrapper = styled.div<{ finished: boolean }>`
     box-shadow: ${({ finished }) =>
       finished ? 'none' : '0px 7px 20px 10px rgba(0, 0, 0, 0.15)'};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const DatetimeWrapper = styled.div`
   ${css.flexColumn('align-both')}
diff --git a/src/containers/content/MembershipContent/styles/index.ts b/src/containers/content/MembershipContent/styles/index.ts
index 1257cbd52..03c354c7b 100755
--- a/src/containers/content/MembershipContent/styles/index.ts
+++ b/src/containers/content/MembershipContent/styles/index.ts
@@ -70,7 +70,7 @@ export const Dashboard = styled.div<TActive>`
     active ? '1px 1px 20px 0px rgb(37 37 37 / 42%)' : 'none'};
 
   cursor: pointer;
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const CheckerWrapper = styled.div`
   position: absolute;
@@ -90,7 +90,7 @@ export const TypeDesc = styled.div<TActive>`
     opacity: 1;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const TitleDivider = styled.div`
   border-bottom: 1px solid;
diff --git a/src/containers/content/RecipesContent/styles/filter_bar.ts b/src/containers/content/RecipesContent/styles/filter_bar.ts
index c99a5a987..02ec34d8b 100644
--- a/src/containers/content/RecipesContent/styles/filter_bar.ts
+++ b/src/containers/content/RecipesContent/styles/filter_bar.ts
@@ -41,7 +41,7 @@ export const Option = styled.div<TActive>`
     cursor: pointer;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const OptionItem = styled.div`
   flex-grow: 1;
@@ -50,7 +50,7 @@ const OptionIconBase = styled(Img)<TActive>`
   ${css.size(12)};
   opacity: ${({ active }) => (active ? '1' : '0')};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const FavoriteIcon = styled(OptionIconBase)`
   fill: ${theme('baseColor.red')};
diff --git a/src/containers/content/WorksContent/styles/mile_stone/detail.ts b/src/containers/content/WorksContent/styles/mile_stone/detail.ts
index 449886bf2..c85e27ff4 100644
--- a/src/containers/content/WorksContent/styles/mile_stone/detail.ts
+++ b/src/containers/content/WorksContent/styles/mile_stone/detail.ts
@@ -18,7 +18,7 @@ export const Wrapper = styled.div`
   ${Block}:hover & {
     border-left: 1px solid #2d7eb1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Main = styled.div`
   ${css.flexColumn()};
diff --git a/src/containers/content/WorksContent/styles/mile_stone/intro.ts b/src/containers/content/WorksContent/styles/mile_stone/intro.ts
index e62869581..1c09a1b3e 100644
--- a/src/containers/content/WorksContent/styles/mile_stone/intro.ts
+++ b/src/containers/content/WorksContent/styles/mile_stone/intro.ts
@@ -35,7 +35,7 @@ export const More = styled.div`
   ${Block}:hover & {
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const IntroBtn = styled.div`
   color: ${theme('thread.articleDigest')};
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
index 40ea34bb5..448aab043 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
+++ b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
@@ -24,7 +24,7 @@ export const InterviewWrapper = styled.div`
     border-radius: 3px;
     cursor: pointer;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Avatar = styled(Img)`
   ${css.circle(20)};
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
index 45a66537f..600df43a9 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
+++ b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
@@ -26,7 +26,7 @@ export const LinkCardWrapper = styled.div`
     cursor: pointer;
     border-color: #135b74;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Digest = styled.div`
   ${css.flexColumnGrow('align-start')};
diff --git a/src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx b/src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx
index 97d2cd99d..d552ca14d 100755
--- a/src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx
+++ b/src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx
@@ -209,7 +209,7 @@ const BasicInfoPart: FC<TProps> = ({
         <TeamsWrapper>
           <TeamList
             users={teammates}
-            layout="create-works"
+            layout="edit-works"
             onAdd={addTeammate}
             onRemove={removeTeammate}
             onClose={closeSearchedUsers}
diff --git a/src/containers/thread/RoadmapThread/styles/todo_list/index.ts b/src/containers/thread/RoadmapThread/styles/todo_list/index.ts
index 8db152def..ea77b5825 100755
--- a/src/containers/thread/RoadmapThread/styles/todo_list/index.ts
+++ b/src/containers/thread/RoadmapThread/styles/todo_list/index.ts
@@ -27,7 +27,7 @@ export const Label = styled.div`
   ${Wrapper}:hover & {
     font-weight: bold;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Item = styled.div`
   ${css.flex()};
diff --git a/src/containers/tool/ArticleSticker/styles/community_sticker.ts b/src/containers/tool/ArticleSticker/styles/community_sticker.ts
index bf4188f69..70b751379 100644
--- a/src/containers/tool/ArticleSticker/styles/community_sticker.ts
+++ b/src/containers/tool/ArticleSticker/styles/community_sticker.ts
@@ -11,7 +11,7 @@ export const ItemWrapper = styled.div`
 `
 const Icon = styled(Img)`
   ${css.size(22)};
-  transition: all 0.25s;
+  transition: all 0.2s;
   cursor: pointer;
 `
 export const CommunityIcon = styled(Icon)``
diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts
index 3d601bf3d..7ed9d882d 100755
--- a/src/containers/tool/ArticleSticker/styles/index.ts
+++ b/src/containers/tool/ArticleSticker/styles/index.ts
@@ -24,7 +24,7 @@ export const MainWrapper = styled.div`
 `
 const Icon = styled(Img)`
   ${css.size(22)};
-  transition: all 0.25s;
+  transition: all 0.2s;
   cursor: pointer;
 `
 export const CommunityIcon = styled(Icon)``
diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
index 9762352e6..c1efbf8d7 100644
--- a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
+++ b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
@@ -28,7 +28,7 @@ export const TocIcon = styled(Img)`
     fill: ${theme('thread.articleTitle')};
     cursor: pointer;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const TocTitle = styled.div`
   color: ${theme('thread.articleDigest')};
@@ -39,7 +39,7 @@ export const TocTitle = styled.div`
     color: ${theme('thread.articleTitle')};
     cursor: pointer;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 const MenuIcon = styled(Img)`
   fill: ${theme('thread.articleDigest')};
@@ -50,7 +50,7 @@ const MenuIcon = styled(Img)`
     fill: ${theme('thread.articleTitle')};
     cursor: pointer;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const MenuClosedIcon = styled(MenuIcon)`
   margin-top: -3px;
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view/index.ts b/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
index 6cfba3a91..165b59a4b 100644
--- a/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
+++ b/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
@@ -88,7 +88,7 @@ export const IndentLine = styled.div`
     opacity: 1;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const CommentBodyInfo = styled.div`
   ${css.flexColumn()};
diff --git a/src/containers/unit/Comments/styles/list/list.ts b/src/containers/unit/Comments/styles/list/list.ts
index 81f5f6d3b..5cafb12d2 100644
--- a/src/containers/unit/Comments/styles/list/list.ts
+++ b/src/containers/unit/Comments/styles/list/list.ts
@@ -29,5 +29,5 @@ export const IndentLine = styled.div<TIndentLine>`
     border-left-color: ${theme('comment.indentActive')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts b/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts
index ea45652dc..581375a03 100644
--- a/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts
+++ b/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts
@@ -12,7 +12,7 @@ export const Logo = styled(Img)<{ isExpand: boolean }>`
   margin-top: -1px;
   display: block;
   margin-right: ${({ isExpand }) => (isExpand ? '0' : '10px')};
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Title = styled.div<{ isSubscribed: boolean }>`
   ${css.cutRest('50px')};
diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
index f15e9e152..c8ea69dd9 100755
--- a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
+++ b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
@@ -13,7 +13,7 @@ export const Wrapper = styled.div`
   position: relative;
   z-index: ${css.zIndex.sidebar + 1};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const ActiveBar = styled.div<TActive>`
   position: absolute;
diff --git a/src/containers/unit/Sidebar/styles/pull_button.ts b/src/containers/unit/Sidebar/styles/pull_button.ts
index 1fe2fae9f..620ec53f9 100644
--- a/src/containers/unit/Sidebar/styles/pull_button.ts
+++ b/src/containers/unit/Sidebar/styles/pull_button.ts
@@ -37,5 +37,5 @@ export const ArrowIcon = styled(Img)<{ isPulled: boolean }>`
     fill: ${theme('thread.articleTitle')};
     ${css.size(25)};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/containers/unit/TagsBar/DesktopView/TagCount.tsx b/src/containers/unit/TagsBar/DesktopView/TagCount.tsx
index 8d085410d..762fbd28d 100755
--- a/src/containers/unit/TagsBar/DesktopView/TagCount.tsx
+++ b/src/containers/unit/TagsBar/DesktopView/TagCount.tsx
@@ -1,9 +1,12 @@
-import React from 'react'
-
+import { FC, memo } from 'react'
 import { getRandomInt } from '@/utils/helper'
 import { Wrapper, Count, ChartBar } from '../styles/desktop_view/tag_count'
 
-const TagCount = ({ num }) => {
+type TProps = {
+  num: number
+}
+
+const TagCount: FC<TProps> = ({ num }) => {
   const percent = getRandomInt(5, 100) / 100
   return (
     <Wrapper>
@@ -14,4 +17,4 @@ const TagCount = ({ num }) => {
 }
 // <div>只看/不看</div>
 
-export default React.memo(TagCount)
+export default memo(TagCount)
diff --git a/src/pages/cool-guide.tsx b/src/pages/cool-guide.tsx
index 5cc98a993..2eca01193 100755
--- a/src/pages/cool-guide.tsx
+++ b/src/pages/cool-guide.tsx
@@ -1,11 +1,16 @@
-import React from 'react'
+import { GetServerSideProps } from 'next'
 import { Provider } from 'mobx-react'
-import { merge } from 'ramda'
 
 import { SITE_URL } from '@/config'
 import { ROUTE, METRIC } from '@/constant'
 
-import { getJwtToken, makeGQClient, ssrRescue, parseTheme } from '@/utils'
+import {
+  ssrBaseStates,
+  refreshIfneed,
+  ssrFetchPrepare,
+  ssrError,
+  coolGuideSEO,
+} from '@/utils'
 import { P } from '@/schemas'
 
 import GlobalLayout from '@/containers/layout/GlobalLayout'
@@ -13,61 +18,39 @@ import CoolGuideContent from '@/containers/content/CoolGuideContent'
 
 import { useStore } from '@/stores/init'
 
-const fetchData = async (props, opt = {}) => {
-  const { realname } = merge({ realname: true }, opt)
-
-  const token = realname ? getJwtToken(props) : null
-  const gqClient = makeGQClient(token)
-
+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 (props) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   let resp
   try {
-    resp = await fetchData(props)
-  } catch ({ response: { errors } }) {
-    if (ssrRescue.hasLoginError(errors)) {
-      resp = await fetchData(props, { tokenExpired: true })
-    }
+    resp = await fetchData(context)
+    const { sessionState } = resp
+
+    refreshIfneed(sessionState, '/cool-guide', context)
+  } catch (e) {
+    console.log('#### error from server: ', e)
+    return ssrError(context, 'fetch', 500)
   }
 
-  const { sessionState, subscribedCommunities } = resp
   const initProps = {
-    theme: {
-      curTheme: parseTheme(sessionState),
-    },
-    account: {
-      user: sessionState.user || {},
-      isValidSession: sessionState.isValid,
-      userSubscribedCommunities: subscribedCommunities,
-    },
+    ...ssrBaseStates(resp),
   }
 
   return {
-    props: { errorCode: null, namespacesRequired: ['general'], ...initProps },
+    props: { errorCode: null, ...initProps },
   }
 }
 
 const CoolGuidePage = (props) => {
   const store = useStore(props)
-
-  const seoConfig = {
-    url: `${SITE_URL}/${ROUTE.COOL_GUIDE}`,
-    title: '酷导航 | CP',
-    description: 'IT 导航界的特斯拉',
-  }
+  const seoConfig = coolGuideSEO()
 
   return (
     <Provider store={store}>
diff --git a/src/pages/have-a-drink.tsx b/src/pages/have-a-drink.tsx
index fca2469cb..ef7dc0a77 100755
--- a/src/pages/have-a-drink.tsx
+++ b/src/pages/have-a-drink.tsx
@@ -2,7 +2,13 @@ import { Provider } from 'mobx-react'
 
 import { METRIC } from '@/constant'
 
-import { ssrBaseStates, ssrFetchPrepare, ssrRescue, drinkSEO } from '@/utils'
+import {
+  ssrBaseStates,
+  ssrError,
+  ssrFetchPrepare,
+  refreshIfneed,
+  drinkSEO,
+} from '@/utils'
 import { P } from '@/schemas'
 import GlobalLayout from '@/containers/layout/GlobalLayout'
 import HaveADrinkContent from '@/containers/content/HaveADrinkContent'
@@ -11,18 +17,10 @@ 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),
   }
 }
 
@@ -30,10 +28,12 @@ export const 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
+
+    refreshIfneed(sessionState, '/have-a-drink', context)
+  } catch (e) {
+    console.log('#### error from server: ', e)
+    return ssrError(context, 'fetch', 500)
   }
 
   const initProps = {
@@ -41,7 +41,7 @@ export const getServerSideProps = async (context) => {
   }
 
   return {
-    props: { errorCode: null, namespacesRequired: ['general'], ...initProps },
+    props: { errorCode: null, ...initProps },
   }
 }
 
diff --git a/src/pages/support-us.tsx b/src/pages/support-us.tsx
index 077bed9eb..e17909516 100755
--- a/src/pages/support-us.tsx
+++ b/src/pages/support-us.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Provider } from 'mobx-react'
 import { merge } from 'ramda'
 
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
index 90901a0d1..54679ef03 100755
--- a/src/pages/trending.tsx
+++ b/src/pages/trending.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Provider } from 'mobx-react'
 
 import { METRIC } from '@/constant'
diff --git a/src/spec/article.ts b/src/spec/article.ts
index 181697e29..fe2d59cb7 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -211,6 +211,7 @@ export type TUpvoteLayout =
   | 'post-list'
   | 'works-article'
   | 'works-card'
+  | 'guide-list'
 
 export type TCollectionFolder = {
   id: TID
diff --git a/src/spec/gallery.ts b/src/spec/gallery.ts
index c0cc03e7c..3dbe285cc 100644
--- a/src/spec/gallery.ts
+++ b/src/spec/gallery.ts
@@ -1,8 +1,25 @@
-export type TGALLERY_DEFAULT = 'default'
-export type TGALLERY_LIST = 'list'
-export type TGALLERY_MASONRY_COLUMN = 'masonry_column'
-export type TGALLERY_MAIN_COLUMN = 'main_column'
-export type TGALLERY_TWO_COLUMN = 'two_column'
-export type TGALLERY_THREE_COLUMN = 'three_column'
-export type TGALLERY_TEXT_ONLY = 'text_only'
-export type TGALLERY_TEXT_WITH_IMAGE = 'text_with_image'
+import type { TID } from '@/spec'
+
+export type TGalleryDefault = 'default'
+export type TGalleryList = 'list'
+export type TGalleryMasonryCollumn = 'masonry_column'
+export type TGalleryMainColumn = 'main_column'
+export type TGallery2Column = 'two_column'
+export type TGallery3Column = 'three_column'
+export type TGalleryTextOnly = 'text_only'
+export type TGalleryTextWithImage = 'text_with_image'
+
+export type TGallery = {
+  id: TID
+  homeLink?: string
+  title: string
+  desc?: string
+  icon?: string
+  tags?: string[]
+  // people
+  birthPlace?: string
+  nation?: string
+  nationName?: string
+  birthday?: string
+  aka?: string
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index ff220665a..04cfdc4d4 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -103,14 +103,15 @@ export type {
 } from './article'
 
 export type {
-  TGALLERY_DEFAULT,
-  TGALLERY_LIST,
-  TGALLERY_MASONRY_COLUMN,
-  TGALLERY_MAIN_COLUMN,
-  TGALLERY_TWO_COLUMN,
-  TGALLERY_THREE_COLUMN,
-  TGALLERY_TEXT_ONLY,
-  TGALLERY_TEXT_WITH_IMAGE,
+  TGallery,
+  TGalleryDefault,
+  TGalleryList,
+  TGalleryMasonryCollumn,
+  TGalleryMainColumn,
+  TGallery2Column,
+  TGallery3Column,
+  TGalleryTextOnly,
+  TGalleryTextWithImage,
 } from './gallery'
 
 export type { TAccountStore, TViewingStore } from './store'
diff --git a/src/widgets/BlogItem/styles/index.ts b/src/widgets/BlogItem/styles/index.ts
index 61bc9a8a0..a1760d144 100755
--- a/src/widgets/BlogItem/styles/index.ts
+++ b/src/widgets/BlogItem/styles/index.ts
@@ -21,7 +21,7 @@ export const Wrapper = styled.article<TWrapper>`
   border-bottom: ${({ c11n }) => (c11n.contentDivider ? '1px solid' : '0')};
   border-bottom-color: ${theme('thread.articleDivider')};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Main = styled.div`
   ${css.flexColumnGrow()};
diff --git a/src/widgets/BrandTitle/index.tsx b/src/widgets/BrandTitle/index.tsx
index dd275f3ef..780b1ada9 100755
--- a/src/widgets/BrandTitle/index.tsx
+++ b/src/widgets/BrandTitle/index.tsx
@@ -20,6 +20,7 @@ type TProps = {
   desc?: string
   mBottom?: number
   fontSize?: number
+  onClick?: () => void
 }
 
 const BrandTitle: FC<TProps> = ({
@@ -28,9 +29,10 @@ const BrandTitle: FC<TProps> = ({
   desc = 'what for?',
   mBottom = 10,
   fontSize = 18,
+  onClick = log,
 }) => {
   return (
-    <Wrapper testid={testid} mBottom={mBottom}>
+    <Wrapper testid={testid} mBottom={mBottom} onClick={() => onClick?.()}>
       <Title>
         <BrandText fontSize={fontSize}>{title}</BrandText>
         <SpaceGrow />
diff --git a/src/widgets/BrandTitle/styles/index.ts b/src/widgets/BrandTitle/styles/index.ts
index 1a41bdd77..144117e88 100755
--- a/src/widgets/BrandTitle/styles/index.ts
+++ b/src/widgets/BrandTitle/styles/index.ts
@@ -14,6 +14,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 export const Title = styled.div`
   ${css.flex()};
+  cursor: pointer;
 `
 export const Desc = styled.div`
   color: ${theme('thread.articleDigest')};
diff --git a/src/widgets/Buttons/styles/arrow_link.ts b/src/widgets/Buttons/styles/arrow_link.ts
index d5edec3f3..3d7799092 100644
--- a/src/widgets/Buttons/styles/arrow_link.ts
+++ b/src/widgets/Buttons/styles/arrow_link.ts
@@ -10,7 +10,7 @@ export const Wrapper = styled.a`
   text-decoration: none;
   cursor: pointer;
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 type TText = { hoverColor: string; size: string }
 export const Text = styled.div<TText>`
diff --git a/src/widgets/Buttons/styles/dropdown_button/option_panel.ts b/src/widgets/Buttons/styles/dropdown_button/option_panel.ts
index 73544ac70..df30eb7ec 100644
--- a/src/widgets/Buttons/styles/dropdown_button/option_panel.ts
+++ b/src/widgets/Buttons/styles/dropdown_button/option_panel.ts
@@ -26,7 +26,7 @@ export const Block = styled.div`
     background: #0d3e4e;
     cursor: pointer;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const BlockA = styled(Block)`
   text-decoration: none;
diff --git a/src/widgets/Buttons/styles/fancy_publish_button.ts b/src/widgets/Buttons/styles/fancy_publish_button.ts
index 9fcc984f8..5df3d92de 100755
--- a/src/widgets/Buttons/styles/fancy_publish_button.ts
+++ b/src/widgets/Buttons/styles/fancy_publish_button.ts
@@ -113,5 +113,5 @@ export const Icon = styled(Img)`
     width: 18px;
     height: 18px;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/Charger/styles/index.ts b/src/widgets/Charger/styles/index.ts
index 30f02eb77..7afe2c4d2 100755
--- a/src/widgets/Charger/styles/index.ts
+++ b/src/widgets/Charger/styles/index.ts
@@ -205,5 +205,5 @@ export const MoneySign = styled(Img)`
     ${css.size(12)};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/EmailSubscriber/styles/default_layout/active_view.ts b/src/widgets/EmailSubscriber/styles/default_layout/active_view.ts
index 3193e683e..3837dbf5f 100644
--- a/src/widgets/EmailSubscriber/styles/default_layout/active_view.ts
+++ b/src/widgets/EmailSubscriber/styles/default_layout/active_view.ts
@@ -69,7 +69,7 @@ export const SubscribeBtnWrapper = styled.div`
   margin-left: -15px;
 `
 export const SubscribeBtn = styled(Button)`
-  transition: all 0.25s;
+  transition: all 0.2s;
   margin-left: 14px;
 `
 export const Cancel = styled.div`
diff --git a/src/widgets/ExpandIcon/styles/index.ts b/src/widgets/ExpandIcon/styles/index.ts
index ad2861ac1..2dc825018 100755
--- a/src/widgets/ExpandIcon/styles/index.ts
+++ b/src/widgets/ExpandIcon/styles/index.ts
@@ -44,7 +44,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
     border-radius: 5px;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Icon = styled(Img)<TIcon>`
   fill: ${({ active, type }) =>
@@ -64,7 +64,7 @@ export const Icon = styled(Img)<TIcon>`
     height: ${({ active, size }) =>
       active ? getActiveIconSize(size) : getNormalIconSize(size)};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 
 export const Text = styled.div<TText>`
@@ -82,5 +82,5 @@ export const Text = styled.div<TText>`
     /* opacity: 1; */
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/FeedsBar/styles/index.ts b/src/widgets/FeedsBar/styles/index.ts
index 67eddf4fa..75ad129f6 100755
--- a/src/widgets/FeedsBar/styles/index.ts
+++ b/src/widgets/FeedsBar/styles/index.ts
@@ -47,7 +47,7 @@ export const Title = styled.div`
   ${Wrapper}:hover & {
     font-weight: bold;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 // color: #cecece;
 // padding: 8px 10px;
diff --git a/src/widgets/FiltersMenu/styles/filter/tag.ts b/src/widgets/FiltersMenu/styles/filter/tag.ts
index 91ae5f13a..c3d181d56 100644
--- a/src/widgets/FiltersMenu/styles/filter/tag.ts
+++ b/src/widgets/FiltersMenu/styles/filter/tag.ts
@@ -51,5 +51,5 @@ export const Title = styled.div<TTitle>`
       active ? activeColor : theme('thread.articleTitle')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/GalleryHub/InlineTags.js b/src/widgets/GalleryHub/InlineTags.tsx
old mode 100755
new mode 100644
similarity index 54%
rename from src/widgets/GalleryHub/InlineTags.js
rename to src/widgets/GalleryHub/InlineTags.tsx
index 752349133..85b8bb230
--- a/src/widgets/GalleryHub/InlineTags.js
+++ b/src/widgets/GalleryHub/InlineTags.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { Wrapper, Tag } from './styles/inline_tags'
 
-const InlineTags = ({ items }) => {
+type TProps = {
+  items: string[]
+}
+
+const InlineTags: FC<TProps> = ({ items }) => {
   return (
     <Wrapper>
       {items.map((item) => (
@@ -12,4 +16,4 @@ const InlineTags = ({ items }) => {
   )
 }
 
-export default React.memo(InlineTags)
+export default memo(InlineTags)
diff --git a/src/widgets/GalleryHub/PeopleGallery/CardHeader.js b/src/widgets/GalleryHub/PeopleGallery/CardHeader.tsx
similarity index 64%
rename from src/widgets/GalleryHub/PeopleGallery/CardHeader.js
rename to src/widgets/GalleryHub/PeopleGallery/CardHeader.tsx
index c42cbe51f..3ef278eea 100644
--- a/src/widgets/GalleryHub/PeopleGallery/CardHeader.js
+++ b/src/widgets/GalleryHub/PeopleGallery/CardHeader.tsx
@@ -1,4 +1,6 @@
-import React from 'react'
+import { FC, memo } from 'react'
+
+import type { TGallery } from '@/spec'
 
 import { ICON, ASSETS_ENDPOINT } from '@/config'
 import Tooltip from '@/widgets/Tooltip'
@@ -7,21 +9,29 @@ import {
   Wrapper,
   NationsWrapper,
   NationFlag,
+  NationName,
   MoreIcon,
   MenuItem,
 } from '../styles/people_gallery/card_header'
 
-const CardHeader = ({ item }) => {
+type TProps = {
+  item: TGallery
+}
+
+const CardHeader: FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <NationsWrapper>
         <NationFlag
           src={`${ASSETS_ENDPOINT}/navi/nation/${item.birthPlace}.png`}
-          marginRight={item.birthPlace !== item.nationality}
         />
-        {item.birthPlace !== item.nationality && (
+        {item.birthPlace === item.nation && (
+          <NationName>{item.nationName}</NationName>
+        )}
+
+        {item.birthPlace !== item.nation && (
           <NationFlag
-            src={`${ASSETS_ENDPOINT}/navi/nation/${item.nationality}.png`}
+            src={`${ASSETS_ENDPOINT}/navi/nation/${item.nation}.png`}
           />
         )}
       </NationsWrapper>
@@ -41,4 +51,4 @@ const CardHeader = ({ item }) => {
   )
 }
 
-export default React.memo(CardHeader)
+export default memo(CardHeader)
diff --git a/src/widgets/GalleryHub/PeopleGallery/DeveloperGallery.js b/src/widgets/GalleryHub/PeopleGallery/DeveloperGallery.tsx
similarity index 51%
rename from src/widgets/GalleryHub/PeopleGallery/DeveloperGallery.js
rename to src/widgets/GalleryHub/PeopleGallery/DeveloperGallery.tsx
index 89e70538f..7aa168b4b 100644
--- a/src/widgets/GalleryHub/PeopleGallery/DeveloperGallery.js
+++ b/src/widgets/GalleryHub/PeopleGallery/DeveloperGallery.tsx
@@ -4,14 +4,16 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import { FC, memo } from 'react'
 
+import type { TGallery } from '@/spec'
 import { ICON, ASSETS_ENDPOINT } from '@/config'
 import { cutRest } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 
 import IconText from '@/widgets/IconText'
+
+import { mockDevelopers } from '../mock'
 import CardHeader from './CardHeader'
 
 import {
@@ -31,42 +33,11 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:ProductGallery:index')
 
-const tmpItems = [
-  {
-    id: '0',
-    birthPlace: 'china',
-    nationality: 'american',
-    title: '姚期智',
-    desc: '图灵奖首位的华人学者，主要研究计算理论及其在密码学和量子计算中的应用',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/yao-qi-zhi.jpg',
-  },
-  {
-    id: '1',
-    birthPlace: 'american',
-    nationality: 'american',
-    title: 'Charles P. Thacker',
-    desc: '程序员，架构师，working at @Groupher',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/yao-qi-zhi.jpg',
-  },
-  {
-    id: '2',
-    birthPlace: 'american',
-    nationality: 'american',
-    title: 'Richard Matthew Stallman',
-    desc: '最性感的开发者社区',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/rms.png',
-  },
-  {
-    id: '3',
-    birthPlace: 'american',
-    nationality: 'american',
-    title: 'Richard Matthew Stallman',
-    desc: '最性感的开发者社区',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/rms.png',
-  },
-]
+type TProps = {
+  items?: TGallery[]
+}
 
-const DeveloperGallery = ({ items }) => {
+const DeveloperGallery: FC<TProps> = ({ items = mockDevelopers() }) => {
   return (
     <Wrapper>
       {items.map((item, index) => (
@@ -98,12 +69,4 @@ const DeveloperGallery = ({ items }) => {
   )
 }
 
-DeveloperGallery.propTypes = {
-  items: T.arrayOf(T.object),
-}
-
-DeveloperGallery.defaultProps = {
-  items: tmpItems,
-}
-
-export default React.memo(DeveloperGallery)
+export default memo(DeveloperGallery)
diff --git a/src/widgets/GalleryHub/PeopleGallery/FamePeopleGallery.js b/src/widgets/GalleryHub/PeopleGallery/FamePeopleGallery.js
deleted file mode 100755
index f9ecf7284..000000000
--- a/src/widgets/GalleryHub/PeopleGallery/FamePeopleGallery.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- *
- * FamePeopleList
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { ICON } from '@/config'
-import { cutRest } from '@/utils/helper'
-import { buildLog } from '@/utils/logger'
-
-import IconText from '@/widgets/IconText'
-import CardHeader from './CardHeader'
-
-import {
-  Wrapper,
-  Block,
-  Body,
-  Intro,
-  Avatar,
-  Title,
-  Birthday,
-  AKA,
-  Digest,
-  Footer,
-} from '../styles/people_gallery/fame_people_gallery'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:ProductGallery:index')
-
-const tmpItems = [
-  {
-    id: '0',
-    addr: 'Andrew Chi-Chih Yao',
-    birthPlace: 'china',
-    nationality: 'american',
-    title: '姚期智',
-    birthday: '1946-12-24 / 55岁',
-    desc: '图灵奖首位的华人学者，主要研究计算理论及其在密码学和量子计算中的应用',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/yao-qi-zhi.jpg',
-  },
-  {
-    id: '1',
-    addr: '查尔斯·萨克尔',
-    birthPlace: 'american',
-    nationality: 'american',
-    title: 'Charles P. Thacker',
-    birthday: '1946-12-24 / 55岁',
-    desc: '最性感的开发者社区',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/yao-qi-zhi.jpg',
-  },
-  {
-    id: '2',
-    addr: '理查德·马修·斯托曼',
-    birthPlace: 'american',
-    nationality: 'american',
-    title: 'Richard Matthew Stallman',
-    birthday: '1946-12-24 / 55岁',
-    desc: '最性感的开发者社区',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/rms.png',
-  },
-]
-
-const FamePeopleList = ({ items }) => {
-  return (
-    <Wrapper>
-      {items.map((item, index) => (
-        <Block
-          key={item.id}
-          borderTop={index <= 2}
-          borderRight={(index + 1) % 3 !== 0}
-        >
-          <CardHeader item={item} />
-          <Body>
-            <Avatar src={item.icon} />
-            <Intro>
-              <Title>{item.title}</Title>
-              <AKA>({item.addr})</AKA>
-              <Birthday>{item.birthday}</Birthday>
-            </Intro>
-          </Body>
-
-          <Digest>{cutRest(item.desc, 50)}</Digest>
-
-          <Footer>
-            <IconText iconSrc={`${ICON}/article/heart-solid.svg`}>22</IconText>
-            <IconText iconSrc={`${ICON}/article/viewed.svg`}>3343</IconText>
-          </Footer>
-        </Block>
-      ))}
-    </Wrapper>
-  )
-}
-
-FamePeopleList.propTypes = {
-  items: T.arrayOf(T.object),
-}
-
-FamePeopleList.defaultProps = {
-  items: tmpItems,
-}
-
-export default React.memo(FamePeopleList)
diff --git a/src/widgets/GalleryHub/PeopleGallery/FamePeopleGallery.tsx b/src/widgets/GalleryHub/PeopleGallery/FamePeopleGallery.tsx
new file mode 100644
index 000000000..005c02c24
--- /dev/null
+++ b/src/widgets/GalleryHub/PeopleGallery/FamePeopleGallery.tsx
@@ -0,0 +1,82 @@
+/*
+ *
+ * FamePeopleList
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TGallery } from '@/spec'
+import { ICON } from '@/config'
+import { getRandomInt } from '@/utils/helper'
+import { buildLog } from '@/utils/logger'
+
+import Upvote from '@/widgets/Upvote'
+import IconText from '@/widgets/IconText'
+import { SpaceGrow } from '@/widgets/Common'
+
+import { mockFameous } from '../mock'
+import CardHeader from './CardHeader'
+
+import {
+  Wrapper,
+  Block,
+  Body,
+  Intro,
+  Avatar,
+  Title,
+  Birthday,
+  AKA,
+  Digest,
+  Footer,
+  CommentWrapper,
+} from '../styles/people_gallery/fame_people_gallery'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ProductGallery:index')
+
+type TProps = {
+  items?: TGallery[]
+}
+
+const FamePeopleList: FC<TProps> = ({ items = mockFameous() }) => {
+  return (
+    <Wrapper>
+      {items.map((item, index) => (
+        <Block
+          key={item.id}
+          borderTop={index <= 2}
+          borderRight={(index + 1) % 3 !== 0}
+        >
+          <CardHeader item={item} />
+          <Body>
+            <Avatar src={item.icon} />
+            <Intro>
+              <Title>{item.title}</Title>
+              <AKA>({item.aka})</AKA>
+              <Birthday>{item.birthday}</Birthday>
+            </Intro>
+          </Body>
+
+          <Digest>{item.desc}</Digest>
+          <SpaceGrow />
+
+          <Footer>
+            <Upvote
+              count={getRandomInt(10, 100)}
+              avatarList={[]}
+              type="guide-list"
+            />
+            <CommentWrapper>
+              <IconText iconSrc={`${ICON}/article/comment.svg`} size="medium">
+                {getRandomInt(10, 100)}
+              </IconText>
+            </CommentWrapper>
+          </Footer>
+        </Block>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(FamePeopleList)
diff --git a/src/widgets/GalleryHub/PeopleGallery/index.js b/src/widgets/GalleryHub/PeopleGallery/index.js
deleted file mode 100644
index 3277f741b..000000000
--- a/src/widgets/GalleryHub/PeopleGallery/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import T from 'prop-types'
-
-import DeveloperGallery from './DeveloperGallery'
-import FamePeopleGallery from './FamePeopleGallery'
-
-const PeopleGallery = ({ type, ...restProps }) => {
-  switch (type) {
-    case 'developer': {
-      return <DeveloperGallery {...restProps} />
-    }
-    default: {
-      return <FamePeopleGallery {...restProps} />
-    }
-  }
-}
-
-PeopleGallery.propTypes = {
-  type: T.oneOf(['developer', 'famous']),
-}
-
-PeopleGallery.defaultProps = {}
-
-export default React.memo(PeopleGallery)
diff --git a/src/widgets/GalleryHub/PeopleGallery/index.tsx b/src/widgets/GalleryHub/PeopleGallery/index.tsx
new file mode 100644
index 000000000..af02b3171
--- /dev/null
+++ b/src/widgets/GalleryHub/PeopleGallery/index.tsx
@@ -0,0 +1,22 @@
+import { FC, memo } from 'react'
+
+// import DeveloperGallery from './DeveloperGallery'
+import FamePeopleGallery from './FamePeopleGallery'
+
+type TProps = {
+  type: 'developer' | 'famous'
+}
+
+const PeopleGallery: FC<TProps> = ({ type }) => {
+  return <FamePeopleGallery />
+  // switch (type) {
+  //   case 'developer': {
+  //     return <DeveloperGallery {...restProps} />
+  //   }
+  //   default: {
+  //     return <FamePeopleGallery {...restProps} />
+  //   }
+  // }
+}
+
+export default memo(PeopleGallery)
diff --git a/src/widgets/GalleryHub/ProductGallery.js b/src/widgets/GalleryHub/ProductGallery.js
deleted file mode 100755
index f37547af8..000000000
--- a/src/widgets/GalleryHub/ProductGallery.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- *
- * ProductGallery
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-import { isEmpty } from 'ramda'
-
-import { ICON } from '@/config'
-import { cutRest } from '@/utils/helper'
-import { buildLog } from '@/utils/logger'
-
-import ArrowButton from '@/widgets/Buttons/ArrowButton'
-
-import IconText from '@/widgets/IconText'
-import InlineTags from './InlineTags'
-
-import {
-  Wrapper,
-  Block,
-  Header,
-  LinkHead,
-  LinkerWrapper,
-  IntroHead,
-  Icon,
-  Title,
-  Desc,
-  Footer,
-} from './styles/product_gallery'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:ProductGallery:index')
-
-const tmpItems = [
-  {
-    id: '0',
-    addr: 'coderplanets.com',
-    title: 'javascript',
-    // desc: '最性感的开发者社区',
-    tags: ['最性感', '开发者', '更好运'],
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
-  },
-  {
-    id: '1',
-    addr: 'elixir.com',
-    title: 'elixir',
-    // desc: '最性感的开发者社区',
-    tags: ['最性感1', '开发者', '更好运1', '最性感2', '开发者2', '更好运2'],
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/elixir.png',
-  },
-  {
-    id: '2',
-    addr: 'clojure-lang.com',
-    title: 'clojure',
-    desc: '最性感的开发者社区少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
-  },
-  {
-    id: '3',
-    addr: 'javascript.com',
-    title: 'Teambition',
-    desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
-  },
-  {
-    id: '4',
-    addr: 'sspai.com',
-    title: '少数派',
-    desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
-  },
-  {
-    id: '5',
-    addr: 'whatthefuck.com',
-    title: 'whatever',
-    desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
-  },
-  {
-    id: '6',
-    addr: 'javascript.com',
-    title: 'Teambition',
-    desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
-  },
-  {
-    id: '7',
-    addr: 'sspai.com',
-    title: '少数派',
-    desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
-  },
-  {
-    id: '8',
-    addr: 'whatthefuck.com',
-    title: 'whatever',
-    desc: '最性感的开发者社区',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
-  },
-  {
-    id: '9',
-    addr: 'sspai.com',
-    title: '少数派',
-    desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
-  },
-]
-
-const ProductGallery = ({ items }) => {
-  return (
-    <Wrapper>
-      {items.map((item, index) => (
-        <Block
-          key={item.id}
-          borderTop={index <= 2}
-          borderRight={(index + 1) % 3 !== 0}
-        >
-          <Header>
-            <LinkHead>
-              <div>{item.addr}</div>
-              <LinkerWrapper>
-                <ArrowButton size="tiny">直接访问</ArrowButton>
-              </LinkerWrapper>
-            </LinkHead>
-            <IntroHead>
-              <Icon src={item.icon} />
-              <Title>{item.title}</Title>
-            </IntroHead>
-          </Header>
-
-          {item.desc && <Desc>{cutRest(item.desc, 50)}</Desc>}
-          {!item.desc && !isEmpty(item.tags) && (
-            <InlineTags items={item.tags} />
-          )}
-
-          <Footer>
-            <IconText iconSrc={`${ICON}/shape/vote-up.svg`}>22</IconText>
-            <IconText iconSrc={`${ICON}/shape/vote-up.svg`}>22</IconText>
-          </Footer>
-        </Block>
-      ))}
-    </Wrapper>
-  )
-}
-
-ProductGallery.propTypes = {
-  items: T.arrayOf(T.object),
-}
-
-ProductGallery.defaultProps = {
-  items: tmpItems,
-}
-
-export default React.memo(ProductGallery)
diff --git a/src/widgets/GalleryHub/ProductGallery.tsx b/src/widgets/GalleryHub/ProductGallery.tsx
new file mode 100644
index 000000000..d1031d26b
--- /dev/null
+++ b/src/widgets/GalleryHub/ProductGallery.tsx
@@ -0,0 +1,82 @@
+/*
+ *
+ * ProductGallery
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TGallery } from '@/spec'
+import { ICON } from '@/config'
+import { cutRest, getRandomInt } from '@/utils/helper'
+import { buildLog } from '@/utils/logger'
+
+import Linker from '@/widgets/Linker'
+import Upvote from '@/widgets/Upvote'
+import IconText from '@/widgets/IconText'
+import { SpaceGrow } from '@/widgets/Common'
+
+import InlineTags from './InlineTags'
+
+import { mockProducts } from './mock'
+import {
+  Wrapper,
+  Block,
+  Header,
+  LinkHead,
+  IntroHead,
+  Icon,
+  Title,
+  Desc,
+  Footer,
+  CommentWrapper,
+} from './styles/product_gallery'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ProductGallery:index')
+
+type TProps = {
+  items?: TGallery[]
+}
+
+const ProductGallery: FC<TProps> = ({ items = mockProducts() }) => {
+  return (
+    <Wrapper>
+      {items.map((item, index) => (
+        <Block
+          key={item.id}
+          borderTop={index <= 2}
+          borderRight={(index + 1) % 3 !== 0}
+        >
+          <Header>
+            <LinkHead>
+              <Linker src={item.homeLink} plainColor />
+            </LinkHead>
+            <IntroHead>
+              <Icon src={item.icon} />
+              <Title>{item.title}</Title>
+            </IntroHead>
+          </Header>
+
+          {item.desc && <Desc>{cutRest(item.desc, 50)}</Desc>}
+          {item.tags && <InlineTags items={item.tags} />}
+          <SpaceGrow />
+          <Footer>
+            <Upvote
+              count={getRandomInt(10, 100)}
+              avatarList={[]}
+              type="guide-list"
+            />
+            <CommentWrapper>
+              <IconText iconSrc={`${ICON}/article/comment.svg`} size="medium">
+                {getRandomInt(10, 100)}
+              </IconText>
+            </CommentWrapper>
+          </Footer>
+        </Block>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(ProductGallery) as FC<TProps>
diff --git a/src/widgets/GalleryHub/index.js b/src/widgets/GalleryHub/index.tsx
old mode 100755
new mode 100644
similarity index 100%
rename from src/widgets/GalleryHub/index.js
rename to src/widgets/GalleryHub/index.tsx
diff --git a/src/widgets/GalleryHub/mock.ts b/src/widgets/GalleryHub/mock.ts
new file mode 100644
index 000000000..613be8245
--- /dev/null
+++ b/src/widgets/GalleryHub/mock.ts
@@ -0,0 +1,223 @@
+import { ASSETS_ENDPOINT } from '@/config'
+import type { TGallery } from '@/spec'
+
+export const mockProducts = (): TGallery[] => {
+  return [
+    {
+      id: '0',
+      homeLink: 'https://www.icloud.com/notes',
+      title: 'Notes',
+      desc: '苹果自带的笔记应用，使用方便，功能完善，iCloud 自动同步。',
+      tags: ['Apple 生态'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-apple-notes.png`,
+    },
+    {
+      id: '1',
+      homeLink: 'https://sipapp.io',
+      title: 'Sip',
+      desc: 'Mac 下的一款多功能取色器，简洁专注，功能强大。',
+      tags: ['Mac', '可试用 / 付费', '取色'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-sip.svg`,
+    },
+    {
+      id: '2',
+      homeLink: 'https://proxyman.io',
+      title: 'Proxyman',
+      desc: 'Mac 下 HTTP(s) 抓包工具，使用简单，设计精美。',
+      tags: ['Mac', '付费'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-proxyman.png`,
+    },
+    {
+      id: '3',
+      homeLink: 'https://convertio.co/zh',
+      title: 'Convertio',
+      desc: '格式转换服务，支持超过 2500 种格式之间的相互转换.',
+      tags: ['Web'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-convertio.png`,
+    },
+    {
+      id: '4',
+      homeLink: 'https://plausible.io',
+      title: 'Plausible Analytics',
+      desc: '尊重隐私的 Google Analysis 替代品，可独立部署。',
+      tags: ['SaaS', '隐私保护', '欧洲'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-plausible.png`,
+    },
+    {
+      id: '5',
+      homeLink: 'https://www.frame.io/',
+      title: 'Frame.io',
+      tags: ['视频协作', 'Adobe'],
+      desc: '视频工作流协作平台。支持团队间分享，剪辑，沟通，转码，版本控制等。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-frameio.png`,
+    },
+    {
+      id: '6',
+      homeLink: 'https://www.typeform.com',
+      title: 'Typeform',
+      desc: '在线问卷，调查工具，自定义功能强大，可集成至多种流行平台。',
+      tags: ['SaaS', '西班牙'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-typeform.png`,
+    },
+    {
+      id: '7',
+      homeLink: 'http://remixicon.com/',
+      title: 'Remixicon',
+      desc: '为设计师和开发者创作的 neutral 风格的图标集，简单而优雅。',
+      tags: ['免费开源', '国货'],
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-remixicon.png`,
+    },
+  ]
+}
+
+export const mockFameous = (): TGallery[] => {
+  return [
+    {
+      id: '0',
+      aka: 'Andrew Chi-Chih Yao',
+      birthPlace: 'china',
+      nation: 'american',
+      nationName: '中国',
+      title: '姚期智',
+      birthday: '1946 / 74岁',
+      desc: '图灵奖首位的华人学者，主要研究计算理论及其在密码学和量子计算中的应用。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-yqz.jpeg`,
+    },
+    {
+      id: '1',
+      aka: '布莱姆·米勒',
+      birthPlace: 'dutch',
+      nation: 'dutch',
+      nationName: '荷兰',
+      title: 'Bram Moolenaar',
+      birthday: '1961 / 60 岁',
+      desc: 'vim、A-A-P 作者，也是编程语言Zimbu 的开发者。他也协助CAcert的开发。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-bm.jpeg`,
+    },
+    {
+      id: '2',
+      aka: '理查德·马修·斯托曼',
+      birthPlace: 'american',
+      nation: 'american',
+      nationName: '美国',
+      title: 'Richard Matthew Stallman',
+      birthday: '1953 / 68岁',
+      desc: '发起了GNU项目，并成立了自由软件基金会。他开发了GCC、GDB、GNU Emacs，同时编写了GNU通用公共许可协议。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-rms.png`,
+    },
+    {
+      id: '3',
+      aka: '法布里斯·贝拉',
+      birthPlace: 'franch',
+      nation: 'franch',
+      nationName: '法国',
+      title: 'Fabrice Bellard',
+      birthday: '1972 / 49 岁',
+      desc: '因 FFmpeg、QEMU 等项目而闻名业内。他也是最快圆周率算法贝拉公式、TCCBOOT 和 TCC 等项目的作者。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-fb.jpeg`,
+    },
+    {
+      id: '4',
+      aka: 'Matz / まつもとゆきひろ',
+      birthPlace: 'japan',
+      nation: 'japan',
+      nationName: '日本',
+      title: '松本行弘',
+      birthday: '1965 / 56 岁',
+      desc: 'Ruby 程序设计语言的主要设计者和实现者。 自 2011 年起，松本行弘在 Heroku 担任首席 Ruby 架构师，同时他也是乐天技术研究所的成员。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-sbxh.jpeg`,
+    },
+    {
+      id: '5',
+      aka: '罗伯托·耶鲁萨林斯希',
+      birthPlace: 'brazil',
+      nation: 'brazil',
+      nationName: '巴西',
+      title: 'Roberto Ierusalimschy',
+      birthday: '1953 / 68 岁',
+      desc: 'Lua 语言作者。他拥有里约热内卢天主教大学计算机科学博士学位，并出任该校信息学副教授。他于1992年在滑铁卢大学做博士后， 2012年在史丹佛大学做客座教授。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-ri.jpeg`,
+    },
+    {
+      id: '5',
+      aka: '乔·阿姆斯特朗',
+      birthPlace: 'england',
+      nation: 'england',
+      nationName: '英国',
+      title: 'Joe Armstrong',
+      birthday: '1950 - 2019 / 69 岁',
+      desc: 'Erlang 编程语言的设计者与主架构师，也是开放电信平台的主要架构师。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-ja.jpeg`,
+    },
+    {
+      id: '6',
+      aka: '林纳斯·托瓦兹',
+      birthPlace: 'finland',
+      nation: 'american',
+      nationName: '芬兰',
+      title: 'Linus Torvalds',
+      birthday: '1969 / 51 岁',
+      desc: 'Linux 内核的首要架构师与项目协调者，是当今世界最著名的电脑程序员、黑客之一。他还发起了开源项目Git，并为主要的开发者。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-lt.jpeg`,
+    },
+    {
+      id: '7',
+      aka: '安德斯·海尔斯伯格',
+      birthPlace: 'denmark',
+      nation: 'denmark',
+      nationName: '丹麦',
+      title: 'Anders Hejlsberg',
+      birthday: '1960 / 60 岁',
+      desc: 'Borland Turbo Pascal 编译器的主要作者。进入微软公司后，先后主持了Visual J++、.Net， C# 和 TypeScript。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-ah.jpeg`,
+    },
+    {
+      id: '8',
+      aka: '詹姆斯·高斯林',
+      birthPlace: 'canada',
+      nation: 'canada',
+      nationName: '加拿大',
+      title: 'James Gosling',
+      birthday: '1955 / 66 岁',
+      desc: 'Java编程语言的共同创始人之一，一般公认他为 “Java之父”。',
+      icon: `${ASSETS_ENDPOINT}/ugc/tmp/guide-people-jg.jpeg`,
+    },
+  ]
+}
+
+export const mockDevelopers = (): TGallery[] => {
+  return [
+    {
+      id: '0',
+      birthPlace: 'china',
+      nation: 'american',
+      title: '姚期智',
+      desc: '图灵奖首位的华人学者，主要研究计算理论及其在密码学和量子计算中的应用',
+      icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/yao-qi-zhi.jpg',
+    },
+    {
+      id: '1',
+      birthPlace: 'american',
+      nation: 'american',
+      title: 'Charles P. Thacker',
+      desc: '程序员，架构师，working at @Groupher',
+      icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/yao-qi-zhi.jpg',
+    },
+    {
+      id: '2',
+      birthPlace: 'american',
+      nation: 'american',
+      title: 'Richard Matthew Stallman',
+      desc: '最性感的开发者社区',
+      icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/rms.png',
+    },
+    {
+      id: '3',
+      birthPlace: 'american',
+      nation: 'american',
+      title: 'Richard Matthew Stallman',
+      desc: '最性感的开发者社区',
+      icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/fame-people/rms.png',
+    },
+  ]
+}
diff --git a/src/widgets/GalleryHub/styles/directory_gallery.ts b/src/widgets/GalleryHub/styles/directory_gallery.ts
index a321fd2b0..d4743b362 100644
--- a/src/widgets/GalleryHub/styles/directory_gallery.ts
+++ b/src/widgets/GalleryHub/styles/directory_gallery.ts
@@ -33,7 +33,7 @@ export const Block = styled.div<TBlock>`
     border-color: ${({ clickable }) => (clickable ? '#074c61' : '#0d4353')};
     cursor: ${({ clickable }) => (clickable ? 'pointer' : 'normal')};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Header = styled.div`
   ${css.flexColumn()};
diff --git a/src/widgets/GalleryHub/styles/friends_gallery.ts b/src/widgets/GalleryHub/styles/friends_gallery.ts
index c3a4b0134..9da5f4624 100644
--- a/src/widgets/GalleryHub/styles/friends_gallery.ts
+++ b/src/widgets/GalleryHub/styles/friends_gallery.ts
@@ -30,7 +30,7 @@ export const Block = styled.div<{ column: number }>`
     cursor: pointer;
     padding-top: 8px;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
   transition-delay: 0.2s;
 `
 export const Header = styled.div`
@@ -57,7 +57,7 @@ export const Title = styled.div`
     padding-top: 0;
     border-color: transparent;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
   transition-delay: 0.2s;
 `
 export const LinkWrapper = styled.div`
@@ -67,6 +67,6 @@ export const LinkWrapper = styled.div`
   ${Block}:hover & {
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
   transition-delay: 0.2s;
 `
diff --git a/src/widgets/GalleryHub/styles/image_gallery/index.ts b/src/widgets/GalleryHub/styles/image_gallery/index.ts
index 4bbc64293..bcdc528d3 100755
--- a/src/widgets/GalleryHub/styles/image_gallery/index.ts
+++ b/src/widgets/GalleryHub/styles/image_gallery/index.ts
@@ -33,7 +33,7 @@ export const BlockBase = styled.div<{ borderTop: boolean }>`
     background: #04313e;
     border-color: #074c61;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const ImageWrapper = styled.div`
   height: 240px;
@@ -51,7 +51,7 @@ export const ImageBase = styled(Img)`
     color: ${theme('thread.articleTitle')};
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const IntroBase = styled.div`
   ${css.flexColumn()};
diff --git a/src/widgets/GalleryHub/styles/inline_tags.ts b/src/widgets/GalleryHub/styles/inline_tags.ts
index 86f367933..98239826f 100755
--- a/src/widgets/GalleryHub/styles/inline_tags.ts
+++ b/src/widgets/GalleryHub/styles/inline_tags.ts
@@ -6,10 +6,10 @@ import css from '@/utils/css'
 export const Wrapper = styled.div`
   ${css.flex()};
   flex-wrap: wrap;
-  min-height: 64px;
+  margin-top: 18px;
 `
 export const Tag = styled.div`
-  font-size: 14px;
+  font-size: 13px;
   margin-right: 10px;
   margin-bottom: 10px;
   border: 1px solid;
diff --git a/src/widgets/GalleryHub/styles/people_gallery/card_header.ts b/src/widgets/GalleryHub/styles/people_gallery/card_header.ts
index a6d78d3f1..26527e622 100644
--- a/src/widgets/GalleryHub/styles/people_gallery/card_header.ts
+++ b/src/widgets/GalleryHub/styles/people_gallery/card_header.ts
@@ -11,15 +11,20 @@ export const Wrapper = styled.div`
 `
 export const NationsWrapper = styled.div`
   ${css.flex('align-center')};
-  opacity: 0.8;
+  margin-left: 5px;
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
-export const NationFlag = styled(Img)<{ marginRight: boolean }>`
+export const NationFlag = styled(Img)`
   width: 16px;
   display: block;
   border-radius: 3px;
-  margin-right: ${({ marginRight }) => (marginRight ? '5px' : '0')};
+  margin-right: 8px;
+  filter: saturate(0.5);
+`
+export const NationName = styled.div`
+  font-size: 12px;
+  fill: ${theme('thread.articleDigest')};
 `
 export const MoreIcon = styled(Img)`
   ${css.size(16)};
diff --git a/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts b/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts
index 78ac87cd3..dbcb17200 100644
--- a/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts
+++ b/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts
@@ -48,7 +48,7 @@ export const Digest = styled.div`
     color: ${theme('thread.articleTitle')};
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const SocialWrapper = styled.div`
   margin-top: 8px;
@@ -59,7 +59,7 @@ export const SocialWrapper = styled.div`
     color: ${theme('thread.articleTitle')};
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const WorksWrapper = styled.div`
   ${css.flex('align-center')}
diff --git a/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts b/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts
index 67d6ed574..c427237cd 100755
--- a/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts
+++ b/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts
@@ -24,6 +24,7 @@ export const Body = styled.div`
 `
 export const Avatar = styled(Img)`
   ${css.circle(60)};
+  object-fit: cover;
 `
 export const Intro = styled.div`
   ${css.flexColumn()};
@@ -46,19 +47,24 @@ export const Birthday = styled.div`
   color: ${theme('thread.articleDigest')};
 `
 export const Digest = styled.div`
-  flex-grow: 1;
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
-  height: 65px;
   opacity: 0.9;
   margin-top: 20px;
   cursor: pointer;
 
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+
   ${Block}:hover & {
     color: ${theme('thread.articleTitle')};
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Footer = styled(FooterBase)`
   opacity: 0.8;
@@ -67,3 +73,7 @@ export const Footer = styled(FooterBase)`
     opacity: 1;
   }
 `
+
+export const CommentWrapper = styled.div`
+  margin-bottom: 3px;
+`
diff --git a/src/widgets/GalleryHub/styles/people_gallery/index.ts b/src/widgets/GalleryHub/styles/people_gallery/index.ts
index 14112a4d6..985b16caf 100644
--- a/src/widgets/GalleryHub/styles/people_gallery/index.ts
+++ b/src/widgets/GalleryHub/styles/people_gallery/index.ts
@@ -22,7 +22,7 @@ export const Block = styled.div<TBlock>`
     background: #04313e;
     border-color: #074c61;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 
 export const Footer = styled.div`
diff --git a/src/widgets/GalleryHub/styles/product_gallery.ts b/src/widgets/GalleryHub/styles/product_gallery.ts
index 218403ab6..0938f05ef 100755
--- a/src/widgets/GalleryHub/styles/product_gallery.ts
+++ b/src/widgets/GalleryHub/styles/product_gallery.ts
@@ -30,7 +30,7 @@ export const Block = styled.div<TBlock>`
     background: #04313e;
     border-color: #074c61;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Header = styled.div`
   ${css.flexColumn()};
@@ -40,15 +40,7 @@ export const LinkHead = styled.div`
   font-size: 12px;
   margin-bottom: 5px;
 `
-export const LinkerWrapper = styled.div`
-  width: 70px;
-  opacity: 0;
 
-  ${LinkHead}:hover & {
-    opacity: 1;
-  }
-  transition: opacity 0.3s;
-`
 export const IntroHead = styled.div`
   ${css.flex('align-center')};
   &:hover {
@@ -56,19 +48,24 @@ export const IntroHead = styled.div`
   }
 `
 export const Icon = styled(Img)`
-  ${css.circle(20)};
+  ${css.size(20)};
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 20px;
-  margin-left: 8px;
+  margin-left: 10px;
   cursor: pointer;
 `
 export const Desc = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
-  margin-top: -15px;
-  height: 65px;
+  margin-top: 15px;
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
   opacity: 0.9;
   cursor: pointer;
 
@@ -76,11 +73,11 @@ export const Desc = styled.div`
     color: ${theme('thread.articleTitle')};
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Footer = styled.div`
-  ${css.flex('align-center', 'justify-between')};
-  &:hover {
-    cursor: pointer;
-  }
+  ${css.flex('align-end', 'justify-between')};
+`
+export const CommentWrapper = styled.div`
+  margin-bottom: 3px;
 `
diff --git a/src/widgets/GalleryHub/styles/snippet_gallery.ts b/src/widgets/GalleryHub/styles/snippet_gallery.ts
index 1d1faeea6..45c851f9b 100644
--- a/src/widgets/GalleryHub/styles/snippet_gallery.ts
+++ b/src/widgets/GalleryHub/styles/snippet_gallery.ts
@@ -30,7 +30,7 @@ export const Block = styled.div<TBlock>`
     background: #04313e;
     border-color: #074c61;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Header = styled.div`
   ${css.flexColumn()};
diff --git a/src/widgets/GalleryHub/styles/sponsor_gallery.ts b/src/widgets/GalleryHub/styles/sponsor_gallery.ts
index cec36e175..5645c0fc6 100755
--- a/src/widgets/GalleryHub/styles/sponsor_gallery.ts
+++ b/src/widgets/GalleryHub/styles/sponsor_gallery.ts
@@ -32,7 +32,7 @@ export const Block = styled.div<TBlock>`
     cursor: pointer;
     padding-top: 12px;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
   transition-delay: 0.2s;
 `
 export const Header = styled.div`
@@ -60,7 +60,7 @@ export const Title = styled.div<{ level: string }>`
     padding-top: 0;
     border-color: transparent;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
   transition-delay: 0.2s;
 `
 export const IntroImg = styled(Img)`
@@ -89,6 +89,6 @@ export const LinkWrapper = styled.div`
   ${Block}:hover & {
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
   transition-delay: 0.2s;
 `
diff --git a/src/widgets/Input/styles/index.ts b/src/widgets/Input/styles/index.ts
index 7ed5a266a..b1339f933 100755
--- a/src/widgets/Input/styles/index.ts
+++ b/src/widgets/Input/styles/index.ts
@@ -57,7 +57,7 @@ export const baseInput = `
   background-image: none;
   border: 1px solid;
   border-radius: 5px;
-  transition: all 0.25s;
+  transition: all 0.2s;
   -webkit-appearance: none; 
 `
 export const InputWrapper = styled.input<IInput>`
diff --git a/src/widgets/Linker/ExternalLink.tsx b/src/widgets/Linker/ExternalLink.tsx
index 5672a8175..47d64fbb3 100644
--- a/src/widgets/Linker/ExternalLink.tsx
+++ b/src/widgets/Linker/ExternalLink.tsx
@@ -7,9 +7,10 @@ import Tooltip from '@/widgets/Tooltip'
 type TProps = {
   src: string
   hint?: string | null
+  plainColor: boolean
 }
 
-const ExternalLink: FC<TProps> = ({ src, hint }) => {
+const ExternalLink: FC<TProps> = ({ src, hint, plainColor }) => {
   const displayLimit = 25
 
   return (
@@ -17,11 +18,11 @@ const ExternalLink: FC<TProps> = ({ src, hint }) => {
       {hint && <Hint>{hint}</Hint>}
       <LinkIcon />
       {src.length < displayLimit ? (
-        <Source href={src} target="_blank">
+        <Source href={src} target="_blank" plainColor={plainColor}>
           {cutRest(src, 28)}
         </Source>
       ) : (
-        <Source href={src} target="_blank">
+        <Source href={src} target="_blank" plainColor={plainColor}>
           <Tooltip
             content={<PopHint>{src}</PopHint>}
             placement="bottom"
diff --git a/src/widgets/Linker/index.tsx b/src/widgets/Linker/index.tsx
index 7e89d09cc..6b6706cc8 100755
--- a/src/widgets/Linker/index.tsx
+++ b/src/widgets/Linker/index.tsx
@@ -25,6 +25,7 @@ type TProps = TSpace & {
   external?: boolean
   openInNewTab?: boolean
   inline?: boolean
+  plainColor?: boolean
 }
 
 const Linker: FC<TProps> = ({
@@ -35,12 +36,13 @@ const Linker: FC<TProps> = ({
   external = true,
   openInNewTab = true,
   inline = false,
+  plainColor = false,
   ...restProps
 }) => {
   return (
     <Wrapper testid={testid} inline={inline} {...restProps}>
       {external ? (
-        <ExternalLink src={src} hint={hint} />
+        <ExternalLink src={src} hint={hint} plainColor={plainColor} />
       ) : (
         <InternalLink src={src} text={text} openInNewTab={openInNewTab} />
       )}
diff --git a/src/widgets/Linker/styles/external_link.ts b/src/widgets/Linker/styles/external_link.ts
index f1fbd63db..c727e1843 100644
--- a/src/widgets/Linker/styles/external_link.ts
+++ b/src/widgets/Linker/styles/external_link.ts
@@ -8,14 +8,17 @@ import LinkSVG from '@/icons/Link'
 export const Hint = styled.div`
   font-size: 12px;
   color: ${theme('thread.articleDigest')};
+  opacity: 0.8;
   margin-right: 5px;
+  margin-top: 2px;
 `
 export const LinkIcon = styled(LinkSVG)`
   ${css.size(15)};
   fill: ${theme('thread.articleDigest')};
 `
-export const Source = styled.a`
-  color: #119396;
+export const Source = styled.a<{ plainColor: boolean }>`
+  color: ${({ plainColor }) =>
+    plainColor ? theme('thread.articleDigest') : '#119396'};
   font-size: 13px;
   margin-left: 3px;
   text-decoration: none;
diff --git a/src/widgets/LinksCard/styles/item.ts b/src/widgets/LinksCard/styles/item.ts
index 6ce4ae7b3..3a5990586 100644
--- a/src/widgets/LinksCard/styles/item.ts
+++ b/src/widgets/LinksCard/styles/item.ts
@@ -25,7 +25,7 @@ export const Reaction = styled.div`
   ${Wrapper}:hover & {
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Icon = styled(Img)`
   fill: ${theme('banner.desc')};
diff --git a/src/widgets/NaviCatalog/index.tsx b/src/widgets/NaviCatalog/index.tsx
index c9058a56e..5bc45cdc3 100755
--- a/src/widgets/NaviCatalog/index.tsx
+++ b/src/widgets/NaviCatalog/index.tsx
@@ -154,8 +154,6 @@ const NaviCatalog: FC<TProps> = ({
 
   const handleMenuItemSelect = useCallback(
     (item) => {
-      console.log('handleMenuItemSelect item: ', item)
-
       // 如果重复点击，则忽略
       if (find(propEq('id', item.id), viewPath)) return
 
diff --git a/src/widgets/NaviCatalog/styles/header.ts b/src/widgets/NaviCatalog/styles/header.ts
index c7898b70f..002d12744 100644
--- a/src/widgets/NaviCatalog/styles/header.ts
+++ b/src/widgets/NaviCatalog/styles/header.ts
@@ -56,4 +56,5 @@ export const ResetIcon = styled(Img)`
 export const HelpHint = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 12px;
+  padding: 2px 5px;
 `
diff --git a/src/widgets/PagedArticles/styles/community_recommends.ts b/src/widgets/PagedArticles/styles/community_recommends.ts
index 7d58c8f17..d147116d3 100755
--- a/src/widgets/PagedArticles/styles/community_recommends.ts
+++ b/src/widgets/PagedArticles/styles/community_recommends.ts
@@ -49,7 +49,7 @@ export const Community = styled.div`
   :last-child {
     margin-right: 0;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 
   ${css.media.mobile`
     margin-right: 12px;
diff --git a/src/widgets/Pagi/styles/index.ts b/src/widgets/Pagi/styles/index.ts
index 1577b554a..229198e75 100755
--- a/src/widgets/Pagi/styles/index.ts
+++ b/src/widgets/Pagi/styles/index.ts
@@ -39,7 +39,7 @@ export const BottomMsg = styled.div`
 export const CommonCenterArrowIcon = styled(Img)`
   fill: #196780;
   ${css.size(30)};
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const CommonBottomArrowIcon = styled(Img)`
   fill: #196780;
diff --git a/src/widgets/Pagi/styles/next/bottom.ts b/src/widgets/Pagi/styles/next/bottom.ts
index 89a5a5475..60c244911 100755
--- a/src/widgets/Pagi/styles/next/bottom.ts
+++ b/src/widgets/Pagi/styles/next/bottom.ts
@@ -32,7 +32,7 @@ export const NaviInfo = styled.div<{ disabled?: boolean }>`
   ${Wrapper}:hover & {
     margin-right: ${({ disabled }) => (disabled ? '8px' : '14px')};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 
   ${css.media.mobile`
     margin-right: 5px;
diff --git a/src/widgets/Pagi/styles/next/center.ts b/src/widgets/Pagi/styles/next/center.ts
index cbea915d6..ee89ea7c8 100755
--- a/src/widgets/Pagi/styles/next/center.ts
+++ b/src/widgets/Pagi/styles/next/center.ts
@@ -26,7 +26,7 @@ export const NaviInfo = styled.div<{ disabled?: boolean }>`
   ${Wrapper}:hover & {
     margin-right: ${({ disabled }) => (disabled ? '10px' : '8px')};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 
   ${css.media.mobile`
     margin-right: 5px;
diff --git a/src/widgets/Pagi/styles/perv/bottom.ts b/src/widgets/Pagi/styles/perv/bottom.ts
index 7a9d70343..e6e504851 100755
--- a/src/widgets/Pagi/styles/perv/bottom.ts
+++ b/src/widgets/Pagi/styles/perv/bottom.ts
@@ -32,7 +32,7 @@ export const NaviInfo = styled.div<{ disabled?: boolean }>`
     margin-left: ${({ disabled }) => (disabled ? '8px' : '14px')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 
   ${css.media.mobile`
     margin-left: 5px;
diff --git a/src/widgets/PostItem/styles/index.ts b/src/widgets/PostItem/styles/index.ts
index 4a00b2733..064892dfe 100755
--- a/src/widgets/PostItem/styles/index.ts
+++ b/src/widgets/PostItem/styles/index.ts
@@ -21,7 +21,7 @@ export const Wrapper = styled.article<TWrapper>`
   border-bottom: ${({ c11n }) => (c11n.contentDivider ? '1px solid' : '0')};
   border-bottom-color: ${theme('thread.articleDivider')};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Main = styled.div`
   ${css.flexColumnGrow()};
diff --git a/src/widgets/PromotionList/styles/index.ts b/src/widgets/PromotionList/styles/index.ts
index 4266c40e9..232674dac 100755
--- a/src/widgets/PromotionList/styles/index.ts
+++ b/src/widgets/PromotionList/styles/index.ts
@@ -29,5 +29,5 @@ export const MoreHint = styled.div`
   ${Header}:hover & {
     opacity: 1;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/RadarItem/styles/index.ts b/src/widgets/RadarItem/styles/index.ts
index 03525a10f..eb31341b8 100755
--- a/src/widgets/RadarItem/styles/index.ts
+++ b/src/widgets/RadarItem/styles/index.ts
@@ -24,7 +24,7 @@ export const Wrapper = styled.article<TWrapper>`
   padding-top: 16px;
   opacity: ${({ entry, c11n }) => getOpacity(entry, c11n)};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 
   &:hover {
     border-color: #124d61;
diff --git a/src/widgets/RepoItem/styles/index.ts b/src/widgets/RepoItem/styles/index.ts
index 0f3272783..162404210 100755
--- a/src/widgets/RepoItem/styles/index.ts
+++ b/src/widgets/RepoItem/styles/index.ts
@@ -15,7 +15,7 @@ export const Wrapper = styled.article<{ opacity: number }>`
   border-bottom-color: ${theme('thread.articleSpliter')};
   opacity: ${({ opacity }) => opacity};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const BodyDigest = styled.li`
   color: ${theme('thread.articleDigest')};
diff --git a/src/widgets/Switcher/styles/icon_selector.ts b/src/widgets/Switcher/styles/icon_selector.ts
index 9deb5ccb2..2b4b8217f 100644
--- a/src/widgets/Switcher/styles/icon_selector.ts
+++ b/src/widgets/Switcher/styles/icon_selector.ts
@@ -37,7 +37,7 @@ export const Tabs = styled.div`
   ${AccessZone}:hover & {
     border-color: #003b4a;
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Label = styled.label`
   ${css.flex('align-both')};
@@ -62,7 +62,7 @@ export const Icon = styled(Img)<{ checked: boolean }>`
   width: ${({ checked }) => (checked ? '14px' : '12px')};
   height: ${({ checked }) => (checked ? '14px' : '12px')};
   display: block;
-  transition: all 0.25s;
+  transition: all 0.2s;
 
   &:hover {
     fill: #66b5e8;
diff --git a/src/widgets/Switcher/styles/pagi_option_selector/gallery_base.ts b/src/widgets/Switcher/styles/pagi_option_selector/gallery_base.ts
index d5e7ded6a..f00c4cbb6 100644
--- a/src/widgets/Switcher/styles/pagi_option_selector/gallery_base.ts
+++ b/src/widgets/Switcher/styles/pagi_option_selector/gallery_base.ts
@@ -20,5 +20,5 @@ export const SwitchBarBase = styled.div<TActive>`
     background: #3680ad;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/Switcher/styles/tabs/mobile_view/expand_view.ts b/src/widgets/Switcher/styles/tabs/mobile_view/expand_view.ts
index 42535d802..da6c6cbbb 100644
--- a/src/widgets/Switcher/styles/tabs/mobile_view/expand_view.ts
+++ b/src/widgets/Switcher/styles/tabs/mobile_view/expand_view.ts
@@ -15,7 +15,7 @@ export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({
   font-size: 13px;
   margin-top: 20px;
   min-height: 75px;
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Nav = styled(NavBase)`
   overflow-x: scroll;
diff --git a/src/widgets/Switcher/styles/tabs/tab_item.ts b/src/widgets/Switcher/styles/tabs/tab_item.ts
index dc582eac7..423208082 100644
--- a/src/widgets/Switcher/styles/tabs/tab_item.ts
+++ b/src/widgets/Switcher/styles/tabs/tab_item.ts
@@ -37,7 +37,7 @@ export const Wrapper = styled.div<TTab>`
     margin-right: ${() => getMarginRight('', true, false)};
   `};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const ActiveLineWrapper = styled.div`
   position: absolute;
diff --git a/src/widgets/TeamList/List/CreateWorksLayout.tsx b/src/widgets/TeamList/List/EditWorksLayout.tsx
similarity index 86%
rename from src/widgets/TeamList/List/CreateWorksLayout.tsx
rename to src/widgets/TeamList/List/EditWorksLayout.tsx
index 80b88fa7e..b8ec5af3d 100644
--- a/src/widgets/TeamList/List/CreateWorksLayout.tsx
+++ b/src/widgets/TeamList/List/EditWorksLayout.tsx
@@ -16,7 +16,7 @@ import {
   Avatar,
   SettingWrapper,
   SettingIcon,
-} from '../styles/list/create_works_layout'
+} from '../styles/list/edit_works_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:TeamList:index')
@@ -27,7 +27,7 @@ type TProps = {
   onSetting: () => void
 }
 
-const CreateWorksLayout: FC<TProps> = ({
+const EditWorksLayout: FC<TProps> = ({
   users,
   withSetter = false,
   onSetting,
@@ -46,4 +46,4 @@ const CreateWorksLayout: FC<TProps> = ({
   )
 }
 
-export default memo(CreateWorksLayout)
+export default memo(EditWorksLayout)
diff --git a/src/widgets/TeamList/List/GuideLayout.tsx b/src/widgets/TeamList/List/GuideLayout.tsx
new file mode 100644
index 000000000..fec4b7570
--- /dev/null
+++ b/src/widgets/TeamList/List/GuideLayout.tsx
@@ -0,0 +1,45 @@
+/*
+ *
+ * TeamList
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TUser } from '@/spec'
+import { ICON } from '@/config'
+import { buildLog } from '@/utils/logger'
+
+// import Setter from './Setter'
+import {
+  Wrapper,
+  Avatar,
+  SettingWrapper,
+  SettingIcon,
+} from '../styles/list/guide_layout'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:TeamList:index')
+
+type TProps = {
+  users: TUser[]
+  withSetter?: boolean
+  onSetting: () => void
+}
+
+const GuideLayout: FC<TProps> = ({ users, withSetter = false, onSetting }) => {
+  return (
+    <Wrapper>
+      {users.map((user) => (
+        <Avatar key={user.id} src={user.avatar} />
+      ))}
+      {withSetter && (
+        <SettingWrapper onClick={onSetting}>
+          <SettingIcon src={`${ICON}/shape/settings.svg`} />
+        </SettingWrapper>
+      )}
+    </Wrapper>
+  )
+}
+
+export default memo(GuideLayout)
diff --git a/src/widgets/TeamList/List/index.tsx b/src/widgets/TeamList/List/index.tsx
index a80648bf3..6c8eb80c6 100644
--- a/src/widgets/TeamList/List/index.tsx
+++ b/src/widgets/TeamList/List/index.tsx
@@ -2,9 +2,11 @@ import { FC } from 'react'
 
 import type { TUser } from '@/spec'
 import type { TLayout } from '../spec'
+import { LAYOUT } from '../constant'
 
-import CreateWorksLayout from './CreateWorksLayout'
+import EditWorksLayout from './EditWorksLayout'
 import WorksLayout from './WorksLayout'
+import GuideLayout from './GuideLayout'
 // create-works, works, guide-contribute
 
 type TProps = {
@@ -16,7 +18,7 @@ type TProps = {
 
 const Layout: FC<TProps> = ({ layout, users, withSetter, onSetting }) => {
   switch (layout) {
-    case 'works': {
+    case LAYOUT.WORKS: {
       return (
         <WorksLayout
           users={users}
@@ -26,9 +28,19 @@ const Layout: FC<TProps> = ({ layout, users, withSetter, onSetting }) => {
       )
     }
 
+    case LAYOUT.GUIDE_CONTRIBUTE: {
+      return (
+        <GuideLayout
+          users={users}
+          withSetter={withSetter}
+          onSetting={onSetting}
+        />
+      )
+    }
+
     default: {
       return (
-        <CreateWorksLayout
+        <EditWorksLayout
           users={users}
           withSetter={withSetter}
           onSetting={onSetting}
diff --git a/src/widgets/TeamList/UserItem.tsx b/src/widgets/TeamList/UserItem.tsx
index 881fe5cb3..e7cf2b9b3 100644
--- a/src/widgets/TeamList/UserItem.tsx
+++ b/src/widgets/TeamList/UserItem.tsx
@@ -6,15 +6,7 @@ import { ICON } from '@/config'
 import { SpaceGrow } from '@/widgets/Common'
 import Tooltip from '@/widgets/Tooltip'
 
-import {
-  Wrapper,
-  Avatar,
-  Intro,
-  Name,
-  Bio,
-  CheckWrapper,
-  RemoveIcon,
-} from './styles/user_item'
+import { Wrapper, Avatar, Intro, Name, Bio } from './styles/user_item'
 
 type TProps = {
   user: TUser
diff --git a/src/widgets/TeamList/constant.ts b/src/widgets/TeamList/constant.ts
new file mode 100644
index 000000000..96d72bf72
--- /dev/null
+++ b/src/widgets/TeamList/constant.ts
@@ -0,0 +1,9 @@
+import type { TLayout } from './spec'
+
+export const LAYOUT = {
+  EDIT_WORKS: 'edit-works' as TLayout,
+  WORKS: 'works' as TLayout,
+  GUIDE_CONTRIBUTE: 'guide-contribute' as TLayout,
+}
+
+export const holder = 1
diff --git a/src/widgets/TeamList/index.tsx b/src/widgets/TeamList/index.tsx
index 3b55d8d56..67737ac87 100644
--- a/src/widgets/TeamList/index.tsx
+++ b/src/widgets/TeamList/index.tsx
@@ -28,7 +28,7 @@ type TProps = {
   onAdd?: (u: TUser) => void
   onClose?: () => void
   onSearch?: (username: string) => void
-  searchedUsers: TUser[]
+  searchedUsers?: TUser[]
 }
 
 let Setter: FC<TSetter> = () => null
diff --git a/src/widgets/TeamList/spec.ts b/src/widgets/TeamList/spec.ts
index 11a23cdd3..fa8c77e42 100644
--- a/src/widgets/TeamList/spec.ts
+++ b/src/widgets/TeamList/spec.ts
@@ -1,2 +1,2 @@
 export type TView = 'list' | 'search'
-export type TLayout = 'create-works' | 'works' | 'guide-contribute'
+export type TLayout = 'edit-works' | 'works' | 'guide-contribute'
diff --git a/src/widgets/TeamList/styles/list/create_works_layout.ts b/src/widgets/TeamList/styles/list/edit_works_layout.ts
similarity index 100%
rename from src/widgets/TeamList/styles/list/create_works_layout.ts
rename to src/widgets/TeamList/styles/list/edit_works_layout.ts
diff --git a/src/widgets/TeamList/styles/list/guide_layout.ts b/src/widgets/TeamList/styles/list/guide_layout.ts
new file mode 100644
index 000000000..62286c16d
--- /dev/null
+++ b/src/widgets/TeamList/styles/list/guide_layout.ts
@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+import Img from '@/Img'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const SettingWrapper = styled.div`
+  ${css.circle(36)};
+  ${css.flex('align-both')};
+
+  background: #03343f;
+  &:hover {
+    border-color: #005759;
+    cursor: pointer;
+  }
+`
+export const Avatar = styled(Img)`
+  ${css.circle(18)};
+  margin-right: 12px;
+`
+export const SettingIcon = styled(Img)`
+  ${css.size(15)};
+  fill: ${theme('thread.articleDigest')};
+
+  ${Wrapper}:hover & {
+    fill: ${theme('thread.articleTitle')};
+  }
+`
diff --git a/src/widgets/TeamList/styles/user_item.ts b/src/widgets/TeamList/styles/user_item.ts
index ace038344..890c90b1f 100644
--- a/src/widgets/TeamList/styles/user_item.ts
+++ b/src/widgets/TeamList/styles/user_item.ts
@@ -40,17 +40,3 @@ export const Bio = styled.div`
     opacity: 0.8;
   }
 `
-export const CheckWrapper = styled.div`
-  margin-top: 5px;
-`
-export const RemoveIcon = styled(Img)`
-  ${css.size(14)};
-  fill: ${theme('baseColor.red')};
-  margin-top: 5px;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-    cursor: pointer;
-  }
-`
diff --git a/src/widgets/TheAvatar/styles/index.ts b/src/widgets/TheAvatar/styles/index.ts
index bfa0b7fdb..cc26c2c1b 100755
--- a/src/widgets/TheAvatar/styles/index.ts
+++ b/src/widgets/TheAvatar/styles/index.ts
@@ -19,5 +19,5 @@ export const Tail = styled(Img)`
   transform: rotate(-10deg);
   z-index: 1;
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
diff --git a/src/widgets/Upvote/Desc.tsx b/src/widgets/Upvote/Desc.tsx
index 59bb731e5..37407f154 100644
--- a/src/widgets/Upvote/Desc.tsx
+++ b/src/widgets/Upvote/Desc.tsx
@@ -38,12 +38,10 @@ const Desc: FC<TProps> = ({
     <DescWrapper>
       {!noOne && !onlyOne && count > avatarsRowLimit && (
         <DescWrapper>
-          <Space left={3} />
           <Text>等</Text>
           <Maybe test={showCount}>
             <Space left={4} />
             <AnimatedCount count={count} active={viewerHasUpvoted} />
-            <Space left={4} />
             <Text>人</Text>
           </Maybe>
         </DescWrapper>
diff --git a/src/widgets/Upvote/GuideListLayout.tsx b/src/widgets/Upvote/GuideListLayout.tsx
new file mode 100644
index 000000000..6e3459bb2
--- /dev/null
+++ b/src/widgets/Upvote/GuideListLayout.tsx
@@ -0,0 +1,48 @@
+/*
+ *
+ * Upvote
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+
+import AnimatedCount from '@/widgets/AnimatedCount'
+import UpvoteBtn from './UpvoteBtn'
+
+import { Wrapper, UpWrapper, CountWrapper } from './styles/guide_list_layout'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Upvote:index')
+
+type TProps = {
+  testid?: string
+  count?: number
+  viewerHasUpvoted?: boolean
+  onAction?: (viewerHasUpvoted: boolean) => void
+}
+
+const Upvote: FC<TProps> = ({
+  testid = 'upvote',
+  count = 0,
+  viewerHasUpvoted = false,
+  onAction = log,
+}) => {
+  return (
+    <Wrapper testid={testid}>
+      <UpWrapper>
+        <UpvoteBtn
+          viewerHasUpvoted={viewerHasUpvoted}
+          onAction={onAction}
+          count={count}
+        />
+      </UpWrapper>
+      <CountWrapper>
+        <AnimatedCount count={count} active={viewerHasUpvoted} />
+      </CountWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Upvote)
diff --git a/src/widgets/Upvote/index.tsx b/src/widgets/Upvote/index.tsx
index 176ebc2b5..976d7077d 100755
--- a/src/widgets/Upvote/index.tsx
+++ b/src/widgets/Upvote/index.tsx
@@ -13,6 +13,7 @@ import { buildLog } from '@/utils/logger'
 import DefaultLayout from './DefaultLayout'
 import CommentLayout from './CommentLayout'
 import PostListLayout from './PostListLayout'
+import GuideListLayout from './GuideListLayout'
 import BlogListLayout from './BlogListLayout'
 import ArticleLayout from './ArticleLayout'
 import WorksArticleLayout from './WorksArticleLayout'
@@ -40,6 +41,9 @@ const Upvote: FC<TProps> = ({ type = UPVOTE_LAYOUT.DEFAULT, ...restProps }) => {
     case UPVOTE_LAYOUT.POST_LIST: {
       return <PostListLayout {...restProps} />
     }
+    case UPVOTE_LAYOUT.GUIDE_LIST: {
+      return <GuideListLayout {...restProps} />
+    }
     case UPVOTE_LAYOUT.BLOG_LIST: {
       return <BlogListLayout {...restProps} />
     }
diff --git a/src/widgets/Upvote/styles/default_layout.ts b/src/widgets/Upvote/styles/default_layout.ts
index ab21e7ee1..a75956a22 100755
--- a/src/widgets/Upvote/styles/default_layout.ts
+++ b/src/widgets/Upvote/styles/default_layout.ts
@@ -19,5 +19,5 @@ export const DescWrapper = styled.div`
 export const Text = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
-  margin-top: 1px;
+  margin-left: 4px;
 `
diff --git a/src/widgets/Upvote/styles/guide_list_layout.ts b/src/widgets/Upvote/styles/guide_list_layout.ts
new file mode 100644
index 000000000..dba3724d9
--- /dev/null
+++ b/src/widgets/Upvote/styles/guide_list_layout.ts
@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+import css from '@/utils/css'
+
+type TInnerWrapper = {
+  testid: string
+}
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TInnerWrapper>`
+  ${css.flex('align-both')};
+  margin-left: -10px;
+`
+export const UpWrapper = styled.div`
+  margin-left: 7px;
+  transform: scale(0.9);
+`
+export const CountWrapper = styled.div`
+  margin-top: -6px;
+`
diff --git a/utils/constant/gallery.ts b/utils/constant/gallery.ts
index d95eef48c..60037e77a 100644
--- a/utils/constant/gallery.ts
+++ b/utils/constant/gallery.ts
@@ -1,23 +1,23 @@
 import type {
-  TGALLERY_DEFAULT,
-  TGALLERY_LIST,
-  TGALLERY_MASONRY_COLUMN,
-  TGALLERY_MAIN_COLUMN,
-  TGALLERY_TWO_COLUMN,
-  TGALLERY_THREE_COLUMN,
-  TGALLERY_TEXT_ONLY,
-  TGALLERY_TEXT_WITH_IMAGE,
+  TGalleryDefault,
+  TGalleryList,
+  TGalleryMasonryCollumn,
+  TGalleryMainColumn,
+  TGallery2Column,
+  TGallery3Column,
+  TGalleryTextOnly,
+  TGalleryTextWithImage,
 } from '@/spec'
 
 const GALLERY = {
-  DEFAULT: 'default' as TGALLERY_DEFAULT,
-  LIST: 'list' as TGALLERY_LIST,
-  MASONRY_COLUMN: 'masonry_column' as TGALLERY_MASONRY_COLUMN,
-  MAIN_COLUMN: 'main_column' as TGALLERY_MAIN_COLUMN,
-  TWO_COLUMN: 'two_column' as TGALLERY_TWO_COLUMN,
-  THREE_COLUMN: 'three_column' as TGALLERY_THREE_COLUMN,
-  TEXT_ONLY: 'text_only' as TGALLERY_TEXT_ONLY,
-  TEXT_WITH_IMAGE: 'text_with_image' as TGALLERY_TEXT_WITH_IMAGE,
+  DEFAULT: 'default' as TGalleryDefault,
+  LIST: 'list' as TGalleryList,
+  MASONRY_COLUMN: 'masonry_column' as TGalleryMasonryCollumn,
+  MAIN_COLUMN: 'main_column' as TGalleryMainColumn,
+  TWO_COLUMN: 'two_column' as TGallery2Column,
+  THREE_COLUMN: 'three_column' as TGallery3Column,
+  TEXT_ONLY: 'text_only' as TGalleryTextOnly,
+  TEXT_WITH_IMAGE: 'text_with_image' as TGalleryTextWithImage,
 }
 
 export default GALLERY
diff --git a/utils/constant/guide.ts b/utils/constant/guide.ts
index feca82735..aaa27c460 100755
--- a/utils/constant/guide.ts
+++ b/utils/constant/guide.ts
@@ -1,5 +1,5 @@
 const GUIDE = {
-  PREVIEW: 'PREVIEW',
+  HOME: 'HOME',
   DEFAULT: 'DEFAULT',
   FAME_PEOPLE: 'FAME_PEOPLE',
   DEVELOPER: 'DEVELOPER',
diff --git a/utils/constant/layout.ts b/utils/constant/layout.ts
index ad5cc067d..190a79d84 100644
--- a/utils/constant/layout.ts
+++ b/utils/constant/layout.ts
@@ -8,6 +8,7 @@ export const UPVOTE_LAYOUT = {
   BLOG_LIST: 'blog-list' as TUpvoteLayout,
   WORKS_ARTICLE: 'works-article' as TUpvoteLayout,
   WORKS_CARD: 'works-card' as TUpvoteLayout,
+  GUIDE_LIST: 'guide-list' as TUpvoteLayout,
 }
 
 export const holder = 1
diff --git a/utils/index.ts b/utils/index.ts
index 71b579b9e..26264c6f2 100755
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -143,7 +143,7 @@ export { default as BStore } from './bstore'
 export { Trans } from './i18n'
 export { default as GA } from './analytics'
 
-export { mockImage, mockImages, mockNaviCatalogMenu, mockWorks } from './mock'
+export { mockImage, mockImages, mockWorks } from './mock'
 
 export {
   communitySEO,
@@ -154,6 +154,7 @@ export {
   sponsorSEO,
   trendingSEO,
   drinkSEO,
+  coolGuideSEO,
   articleSEO,
   articlePublishSEO,
   articleUpdateSEO,
diff --git a/utils/mock.ts b/utils/mock.ts
index 78ddb395c..01d9fa92b 100644
--- a/utils/mock.ts
+++ b/utils/mock.ts
@@ -1,6 +1,5 @@
 import type { TUser, TTag, TCommunity, TFilterTag, TNaviTag } from '@/spec'
 import { SITE_LOGO, ICON, ICON_BASE, ICON_CMD, ASSETS_ENDPOINT } from '@/config'
-import uid from '@/utils/uid'
 
 import { getRandomInt } from './helper'
 
@@ -373,992 +372,1013 @@ export const mockFilterMenuTags = (): TFilterTag[] => {
 
 export const mockNaviCatalogTags = (): TNaviTag[] => {
   return [
+    // 生产力 start
     {
-      id: uid.gen(),
+      id: 'productivity',
       raw: 'productivity',
       title: '生产力',
       icon: `${ICON_CMD}/navi/tool.svg`,
       extra: ['生产力'],
     },
     {
-      id: uid.gen(),
-      raw: 'cmd',
-      title: '命令行',
-      icon: `${ICON_CMD}/navi/shell.svg`,
-      extra: ['生产力', '命令行'],
+      id: 'efficiency',
+      raw: 'efficiency',
+      title: '效率工具',
+      extra: ['生产力', '效率工具'],
     },
     {
-      id: uid.gen(),
-      raw: 'efficiency-tools',
-      title: '工作效率',
-      icon: `${ICON_CMD}/navi/timer.svg`,
-      extra: ['生产力', '工作效率'],
+      id: 'manage',
+      raw: 'manage',
+      title: '项目管理',
+      extra: ['生产力', '效率工具', '项目管理'],
     },
     {
-      id: uid.gen(),
-      raw: 'gtd',
-      title: 'GTD 工具',
-      extra: ['生产力', '工作效率', ''],
+      id: 'remote',
+      raw: 'remote',
+      title: '远程协作',
+      extra: ['生产力', '效率工具', '远程协作'],
     },
     {
-      id: uid.gen(),
-      raw: 'manage',
-      title: '项目管理',
-      extra: ['生产力', '工作效率', ''],
+      id: 'browser',
+      raw: 'browser',
+      title: '浏览器插件',
+      extra: ['生产力', '效率工具', '浏览器插件'],
     },
     {
-      id: uid.gen(),
-      raw: 'editor',
-      title: '编辑器圣战',
-      extra: ['生产力', '工作效率', ''],
+      id: 'diagram',
+      raw: 'diagram',
+      title: '流程图',
+      extra: ['生产力', '效率工具', '流程图'],
+    },
+    {
+      id: 'GTD',
+      raw: 'GTD',
+      title: 'GTD',
+      extra: ['生产力', '效率工具', 'GTD'],
     },
     {
-      id: uid.gen(),
-      raw: 'writing',
+      id: 'notes',
+      raw: 'notes',
       title: '写作 / 笔记',
-      extra: ['生产力', '工作效率', ''],
+      extra: ['生产力', '效率工具', '写作 / 笔记'],
+    },
+
+    {
+      id: 'mate',
+      raw: 'mate',
+      title: '开发伴侣',
+      extra: ['生产力', '开发伴侣'],
+    },
+    {
+      id: 'cmd',
+      raw: 'cmd',
+      title: '命令行',
+      icon: `${ICON_CMD}/navi/shell.svg`,
+      extra: ['生产力', '开发伴侣', '命令行'],
     },
     {
-      id: uid.gen(),
+      id: 'convert',
       raw: 'convert',
       title: '格式转换',
-      extra: ['生产力', '工作效率', ''],
+      extra: ['生产力', '开发伴侣', '格式转换'],
+    },
+
+    {
+      id: 'editor',
+      raw: 'editor',
+      title: '编辑器',
+      extra: ['生产力', '开发伴侣', '编辑器'],
+    },
+
+    {
+      id: 'docs',
+      raw: 'docs',
+      title: '文档生成',
+      extra: ['生产力', '开发伴侣', '文档生成'],
+    },
+
+    {
+      id: 'capture',
+      raw: 'capture',
+      title: '抓包工具',
+      extra: ['生产力', '开发伴侣', '抓包工具'],
+    },
+
+    {
+      id: 'radar',
+      raw: 'radar',
+      title: '信息获取',
+      extra: ['生产力', '信息获取'],
+    },
+
+    {
+      id: 'email',
+      raw: 'email',
+      title: '邮件管理',
+      extra: ['生产力', '信息获取', '邮件管理'],
+    },
+
+    {
+      id: 'podcast',
+      raw: 'podcast',
+      title: '播客',
+      extra: ['生产力', '信息获取', '播客'],
+    },
+
+    {
+      id: 'ref',
+      raw: 'ref',
+      title: '论文 / 文献',
+      extra: ['生产力', '信息获取', '论文 / 文献'],
     },
+
+    {
+      id: 'privacy',
+      raw: 'privacy',
+      title: '隐私 & 安全',
+      extra: ['生产力', '隐私 & 安全'],
+    },
+
     {
-      id: uid.gen(),
+      id: 'design',
+      raw: 'design',
+      title: '设计工具',
+      extra: ['生产力', '设计工具'],
+    },
+
+    {
+      id: 'opendata',
+      raw: 'opendata',
+      title: '公共数据',
+      extra: ['生产力', '公共数据'],
+    },
+    // 生产力 end
+    // ----------------
+    // 设计灵感 start
+    {
+      id: 'design-idea',
       raw: 'design-idea',
       title: '设计灵感',
       icon: `${ICON_CMD}/navi/light.svg`,
       extra: ['设计灵感'],
     },
     {
-      id: uid.gen(),
+      id: 'ixd',
+      raw: 'ixd',
+      title: '人机交互',
+      icon: `${ICON_CMD}/navi/light.svg`,
+      extra: ['设计灵感', '人机交互'],
+    },
+    {
+      id: 'sci-fi',
       raw: 'sci-fi',
       title: '科幻世界',
       icon: `${ICON_CMD}/navi/sci-fi.svg`,
-      // displayType: 'IMAGE',
-      extra: ['设计灵感', '科幻世界'],
+      displayType: 'IMAGE',
+      extra: ['设计灵感', '人机交互', '科电视界'],
+    },
+    {
+      id: 'software',
+      raw: 'software',
+      title: '软件交互',
+      extra: ['设计灵感', '人机交互', '软件交互'],
+    },
+    {
+      id: 'board',
+      raw: 'board',
+      title: '仪表盘',
+      extra: ['设计灵感', '人机交互', '仪表盘'],
+    },
+    {
+      id: 'map',
+      raw: 'map',
+      title: '地图导航',
+      extra: ['设计灵感', '人机交互', '地图导航'],
+    },
+    {
+      id: 'others',
+      raw: 'others',
+      title: '奇奇怪怪',
+      extra: ['设计灵感', '人机交互', '奇奇怪怪'],
+    },
+    {
+      id: 'font',
+      raw: 'font',
+      title: '字体与排版',
+      extra: ['设计灵感', '字体与排版'],
+    },
+    {
+      id: 'sign',
+      raw: 'sign',
+      title: '店铺招牌',
+      extra: ['设计灵感', '字体与排版', '店铺招牌'],
+    },
+    {
+      id: 'slogan',
+      raw: 'slogan',
+      title: '标语横幅',
+      extra: ['设计灵感', '字体与排版', '标语横幅'],
+    },
+    {
+      id: 'draft',
+      raw: 'draft',
+      title: '设计手稿',
+      extra: ['设计灵感', '字体与排版', '设计手稿'],
+    },
+    {
+      id: 'columns',
+      raw: 'columns',
+      title: '画报杂志',
+      extra: ['设计灵感', '字体与排版', '画报杂志'],
+    },
+    {
+      id: 'logo',
+      raw: 'logo',
+      title: 'Logo 与徽章',
+      extra: ['设计灵感', 'Logo 与徽章'],
+    },
+    {
+      id: 'logo',
+      raw: 'logo',
+      title: '赛事 / 活动',
+      extra: ['设计灵感', 'Logo 与徽章', '赛事活动'],
+    },
+    {
+      id: 'logo',
+      raw: 'logo',
+      title: '商业品牌',
+      extra: ['设计灵感', 'Logo 与徽章', '商业品牌'],
+    },
+    {
+      id: 'badge',
+      raw: 'badge',
+      title: '队徽',
+      extra: ['设计灵感', 'Logo 与徽章', '队徽'],
+    },
+    {
+      id: 'badge2',
+      raw: 'badge2',
+      title: '家族徽章',
+      extra: ['设计灵感', 'Logo 与徽章', '家族徽章'],
     },
     {
-      id: uid.gen(),
+      id: 'badge3',
+      raw: 'badge3',
+      title: '行业证章',
+      extra: ['设计灵感', 'Logo 与徽章', '行业证章'],
+    },
+    {
+      id: 'Partten',
+      raw: 'Partten',
+      title: 'Partten',
+      extra: ['设计灵感', 'Partten'],
+    },
+    {
+      id: 'carpet',
+      raw: 'carpet',
+      title: '地毯',
+      extra: ['设计灵感', 'Partten', '地毯'],
+    },
+    {
+      id: 'glass',
+      raw: 'glass',
+      title: '彩色玻璃',
+      extra: ['设计灵感', 'Partten', '彩色玻璃'],
+    },
+    {
+      id: 'footbal',
+      raw: 'football',
+      title: '足球',
+      extra: ['设计灵感', 'Partten', '足球'],
+    },
+    {
+      id: 'board',
+      raw: 'board',
+      title: '冲浪 / 滑雪板',
+      extra: ['设计灵感', 'Partten', '冲浪 / 滑雪板'],
+    },
+    {
+      id: 'CropCircles',
+      raw: 'CropCircles',
+      title: '麦田怪圈',
+      extra: ['设计灵感', 'Partten', '麦田怪圈'],
+    },
+    {
+      id: 'rpartten',
+      raw: 'rpartten',
+      title: '背景图样',
+      extra: ['设计灵感', 'Partten', '背景图样'],
+    },
+    {
+      id: 'camouflage',
+      raw: 'camouflage',
+      title: '迷彩',
+      extra: ['设计灵感', 'Partten', '迷彩'],
+    },
+    {
+      id: 'snowflake',
+      raw: 'snowflake',
+      title: '雪花',
+      extra: ['设计灵感', 'Partten', '雪花'],
+    },
+    {
+      id: 'space',
+      raw: 'space',
+      title: '宇宙空间',
+      extra: ['设计灵感', 'Partten', '宇宙空间'],
+    },
+    {
+      id: 'others',
+      raw: 'others',
+      title: '奇奇怪怪',
+      extra: ['设计灵感', 'Partten', '奇奇怪怪'],
+    },
+    {
+      id: 'arch',
       raw: 'arch',
       title: '建筑之美',
       icon: `${ICON_CMD}/navi/bricks.svg`,
       extra: ['设计灵感', '建筑之美'],
     },
-  ]
-}
-
-export const mockNaviCatalogMenu = (): TNaviTag[] => {
-  return [
     {
-      id: 'aa', // uid.gen(),
-      raw: uid.gen(),
-      title: '生产力',
+      id: 'religion',
+      raw: 'religion',
+      title: '宗教建筑',
+      extra: ['设计灵感', '建筑之美', '宗教建筑'],
+    },
+    {
+      id: 'landmark',
+      raw: 'landmark',
+      title: '城市地标',
+      extra: ['设计灵感', '建筑之美', '城市地标'],
+    },
+    {
+      id: 'arena',
+      raw: 'arena',
+      title: '竞技场',
+      extra: ['设计灵感', '建筑之美', '竞技场'],
+    },
+    {
+      id: 'house',
+      raw: 'house',
+      title: '乡村',
+      extra: ['设计灵感', '建筑之美', '乡村'],
+    },
+    {
+      id: 'museum',
+      raw: 'museum',
+      title: '博物馆',
+      extra: ['设计灵感', '建筑之美', '博物馆'],
+    },
+    {
+      id: 'briage',
+      raw: 'briage',
+      title: '桥梁',
+      extra: ['设计灵感', '建筑之美', '桥梁'],
+    },
+    {
+      id: 'briage',
+      raw: 'future',
+      title: '概念设计',
+      extra: ['设计灵感', '建筑之美', '概念设计'],
+    },
+    {
+      id: 'briage',
+      raw: 'future',
+      title: '未来主义',
+      extra: ['设计灵感', '建筑之美', '未来主义'],
+    },
+    {
+      id: 'space',
+      raw: 'space',
+      title: '公共空间',
+      extra: ['设计灵感', '公共空间'],
+    },
+    {
+      id: 'library',
+      raw: 'library',
+      title: '公共空间',
+      extra: ['设计灵感', '公共空间', '图书馆'],
+    },
+    {
+      id: 'rest',
+      raw: 'rest',
+      title: '餐厅',
+      extra: ['设计灵感', '公共空间', '餐厅'],
+    },
+    {
+      id: 'office',
+      raw: 'office',
+      title: '办公室',
+      extra: ['设计灵感', '公共空间', '办公室'],
+    },
+    {
+      id: 'designset',
+      raw: 'designset',
+      title: '美剧布景',
+      extra: ['设计灵感', '公共空间', '美剧布景'],
+    },
+    {
+      id: 'hotel',
+      raw: 'hotel',
+      title: '酒店大堂',
+      extra: ['设计灵感', '公共空间', '酒店大堂'],
+    },
+    {
+      id: 'palace',
+      raw: 'palace',
+      title: '宫殿',
+      extra: ['设计灵感', '公共空间', '宫殿'],
+    },
+    {
+      id: 'cloth',
+      raw: 'cloth',
+      title: '服饰控',
+      icon: `${ICON_CMD}/navi/cloth.svg`,
+      extra: ['设计灵感', '服饰控'],
+    },
+    {
+      id: 'ancient',
+      raw: 'ancient',
+      title: '中世纪',
+      extra: ['设计灵感', '服饰控', '中世纪'],
+    },
+    {
+      id: 'ancient',
+      raw: 'ancient',
+      title: '中世纪',
+      extra: ['设计灵感', '服饰控', '中世纪'],
+    },
+    {
+      id: 'uniform',
+      raw: 'uniform',
+      title: '行业制服',
+      extra: ['设计灵感', '服饰控', '行业制服'], // '军装', '足球队服'
+    },
+    {
+      id: 'mechanical',
+      raw: 'mechanical',
+      title: '机械迷',
+      extra: ['设计灵感', '机械迷'],
+    },
+    {
+      id: 'car',
+      raw: 'car',
+      title: '机械迷',
+      extra: ['设计灵感', '机械迷', '汽车'],
+    },
+    {
+      id: 'moto',
+      raw: 'moto',
+      title: '机械迷',
+      extra: ['设计灵感', '机械迷', '摩托'],
+    },
+    {
+      id: 'spacei',
+      raw: 'spacei',
+      title: '航天器',
+      extra: ['设计灵感', '机械迷', '航天器'],
+    },
+    {
+      id: 'aireforce',
+      raw: 'aireforce',
+      title: '战斗机',
+      extra: ['设计灵感', '机械迷', '战斗机'],
+    },
+    {
+      id: 'muscle',
+      raw: 'muscle',
+      title: '工程机械',
+      extra: ['设计灵感', '机械迷', '工程机械'],
+    },
+    {
+      id: 'id',
+      raw: 'id',
+      title: '工业设计',
+      extra: ['设计灵感', '工业设计'],
+    },
+    {
+      id: 'shoe',
+      raw: 'shoe',
+      title: '球鞋',
+      extra: ['设计灵感', '工业设计', '球鞋'],
+    },
+    {
+      id: 'kitchen',
+      raw: 'kitchen',
+      title: '厨具',
+      extra: ['设计灵感', '工业设计', '厨具'],
+    },
+    {
+      id: 'hardware',
+      raw: 'hardware',
+      title: '五金工具',
+      extra: ['设计灵感', '工业设计', '五金工具'],
+    },
+    {
+      id: 'video',
+      raw: 'video',
+      title: '视频短片',
+      extra: ['设计灵感', '视频短片'],
+    },
+    {
+      id: 'ad',
+      raw: 'ad',
+      title: '优秀广告',
+      extra: ['设计灵感', '视频短片', '优秀广告'],
+    },
+    {
+      id: 'tv',
+      raw: 'tv',
+      title: '美剧片头',
+      extra: ['设计灵感', '视频短片', '美剧片头'],
+    },
+    // 设计灵感 end
+    // ----------------
+    // 技术选型 start
+    {
+      id: 'techselection',
+      raw: 'techselection',
+      title: '技术选型',
       icon: `${ICON_CMD}/navi/tool.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '命令行',
-          icon: `${ICON_CMD}/navi/shell.svg`,
-          childMenu: [],
-        },
-        {
-          id: 'bb', // uid.gen(),
-          raw: uid.gen(),
-          title: '工作效率',
-          icon: `${ICON_CMD}/navi/timer.svg`,
-          childMenu: [
-            {
-              id: 'cc', // uid.gen(),
-              raw: uid.gen(),
-              title: 'GTD 工具',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '项目管理',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '编辑器圣战',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: 'Github',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '写作 / 笔记',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '格式转换',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '信息获取',
-          icon: `${ICON_CMD}/navi/grab_info.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: 'RSS',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '电子邮件',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '播客',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '搜索引擎',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '翻译工具',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '隐私 & 安全',
-          icon: `${ICON_CMD}/navi/awesome.svg`,
-          childMenu: [],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '界面设计',
-          icon: `${ICON_CMD}/navi/ruler.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '原型设计',
-              icon: `${ICON_CMD}/navi/china.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '幻灯片制作',
-              icon: `${ICON_CMD}/navi/china.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '图标',
-              icon: `${ICON_CMD}/navi/china.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '配色',
-              icon: `${ICON_CMD}/navi/china.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '字体',
-              icon: `${ICON_CMD}/navi/china.svg`,
-            },
-          ],
-        },
-
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '建站工具',
-          icon: `${ICON_CMD}/navi/cloud.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '博客',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: 'CMS',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '官网',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '论坛',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '公共数据源',
-          icon: `${ICON_CMD}/navi/data.svg`,
-          childMenu: [],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '运营分析',
-          icon: `${ICON_CMD}/navi/monitor.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '访问统计',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '问卷调查',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '多媒体',
-          icon: `${ICON_CMD}/navi/media.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '视频',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '音频',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '奇奇怪怪',
-          icon: `${ICON_CMD}/navi/webapp.svg`,
-          childMenu: [],
-        },
-      ],
-    },
-    {
-      // 非 IT，设计类的网站
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '设计灵感',
-      icon: `${ICON_CMD}/navi/light.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '科幻世界',
-          icon: `${ICON_CMD}/navi/sci-fi.svg`,
-          displayType: 'IMAGE',
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '建筑之美',
-          icon: `${ICON_CMD}/navi/bricks.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '宗教建筑',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '乡村',
-              childMenu: [
-                {
-                  id: uid.gen(),
-                  raw: uid.gen(),
-                  icon: `${ICON_CMD}/navi/bricks.svg`,
-                  title: '小卖部',
-                },
-              ],
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '城市地标',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '竞技场',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '博物馆',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '火车站',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '桥梁',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '未来主义',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '奇奇怪怪',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '公共空间',
-          icon: `${ICON_CMD}/navi/space_in.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              // https://www.zhihu.com/search?type=content&q=%E5%9B%BE%E4%B9%A6%E9%A6%86%20%E5%86%85%E9%83%A8%E8%AE%BE%E8%AE%A1
-              title: '图书馆',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '餐厅', // 酒店内，游艇内，等等, google、亚马逊，微软 办公室等等
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '办公室', // google、亚马逊，微软 办公室等等
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '美剧布景',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '酒店大堂',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '宫殿',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '会展中心',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '超级工厂',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '飞机场',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '服饰控',
-          icon: `${ICON_CMD}/navi/cloth.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '中国风',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '古罗马',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '军装',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '文字与排版',
-          icon: `${ICON_CMD}/navi/text.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '文章排版',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '店铺招牌',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '标语条幅', // 脱欧大巴等等
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '车机系统',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'LOGO',
-          icon: `${ICON_CMD}/navi/logo.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'Pattens',
-          icon: `${ICON_CMD}/navi/pattern.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '地毯',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '彩色玻璃',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '背景图案',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '微生物',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '滑雪 | 冲浪板',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '足球',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '迷彩',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '雪花',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '宇宙空间',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '奇奇怪怪',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '创意广告',
-          icon: `${ICON_CMD}/navi/ad.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '工业设计',
-          icon: `${ICON_CMD}/navi/industry_design.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '日用品',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '球鞋',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '奇奇怪怪',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '机械迷',
-          icon: `${ICON_CMD}/navi/mechanical.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '汽车', // 工程车，特种车，F1...
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '摩托',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '航天器', // 月球车
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '战斗机',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '发动机',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '奇奇怪怪',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '魔鬼细节',
-          icon: `${ICON_CMD}/navi/ghost.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '网站 / App',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '奇奇怪怪',
-          icon: `${ICON_CMD}/navi/others.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '地图控',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '车机系统',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '涂鸦',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '井盖',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      id: 'ktd',
-      raw: 'ktd',
+      extra: ['技术选型'],
+    },
+    {
+      id: 'web',
+      raw: 'web',
+      title: '网站开发',
+      icon: `${ICON_CMD}/navi/tool.svg`,
+      extra: ['技术选型', '网站开发'],
+    },
+    {
+      id: 'ue',
+      raw: 'ue',
+      title: '界面框架',
+      extra: ['技术选型', '网站开发', '界面框架'],
+    },
+    {
+      id: 'richeditor',
+      raw: 'richeditor',
+      title: '富文本编辑',
+      extra: ['技术选型', '网站开发', '富文本编辑'],
+    },
+    {
+      id: 'visualization',
+      raw: 'visualization',
+      title: '可视化',
+      extra: ['技术选型', '网站开发', '可视化'],
+    },
+    {
+      id: 'devops',
+      raw: 'devops',
+      title: '运维分析',
+      extra: ['技术选型', '网站开发', '运维分析'],
+    },
+    {
+      id: 'buildsite',
+      raw: 'buildsite',
+      title: '建站工具',
+      extra: ['技术选型', '建站工具'],
+    },
+    {
+      id: 'blog',
+      raw: 'blog',
+      title: '博客',
+      extra: ['技术选型', '建站工具', '博客'],
+    },
+    {
+      id: 'home',
+      raw: 'home',
+      title: '官网',
+      extra: ['技术选型', '建站工具', '官网'],
+    },
+    {
+      id: 'cms',
+      raw: 'cms',
+      title: 'CMS',
+      extra: ['技术选型', '建站工具', 'CMS'],
+    },
+    {
+      id: 'forum',
+      raw: 'forum',
+      title: '社区',
+      extra: ['技术选型', '建站工具', '社区'],
+    },
+    {
+      id: 'app',
+      raw: 'app',
+      title: '移动 App',
+      extra: ['技术选型', '移动 App'],
+    },
+    {
+      id: 'ai',
+      raw: 'ai',
+      title: '人工智能',
+      extra: ['技术选型', '人工智能'],
+    },
+    {
+      id: 'ml',
+      raw: 'ml',
+      title: '机器学习',
+      extra: ['技术选型', '人工智能', '机器学习'],
+    },
+    {
+      id: 'picprocess',
+      raw: 'picprocess',
+      title: '图像处理',
+      extra: ['技术选型', '人工智能', '图像处理'],
+    },
+    {
+      id: 'voice',
+      raw: 'voice',
+      title: '语音识别',
+      extra: ['技术选型', '人工智能', '语音识别'],
+    },
+    {
+      id: 'nlp',
+      raw: 'nlp',
+      title: '自然语言处理',
+      extra: ['技术选型', '人工智能', '自然语言处理'],
+    },
+    {
+      id: 'db',
+      raw: 'db',
+      title: '数据库',
+      extra: ['技术选型', '数据库'],
+    },
+    {
+      id: 'db1',
+      raw: 'db1',
+      title: '数据库',
+      extra: ['技术选型', '数据库', '关系型数据库'],
+    },
+    {
+      id: 'db2',
+      raw: 'db2',
+      title: '数据库',
+      extra: ['技术选型', '数据库', '文档数据库'],
+    },
+    {
+      id: 'db3',
+      raw: 'db3',
+      title: '数据库',
+      extra: ['技术选型', '数据库', '图数据库'],
+    },
+    {
+      id: 'db4',
+      raw: 'db5',
+      title: '数据库',
+      extra: ['技术选型', '数据库', '时序数据库'],
+    },
+    {
+      id: 'dataanalysis',
+      raw: 'dataanalysis',
+      title: '数据分析',
+      extra: ['技术选型', '数据分析'],
+    },
+    {
+      id: 'devops',
+      raw: 'devops',
+      title: '测试运维',
+      extra: ['技术选型', '测试运维'],
+    },
+    {
+      id: 'embed',
+      raw: 'embed',
+      title: '嵌入式',
+      extra: ['技术选型', '嵌入式'],
+    },
+    {
+      id: 'blockchain',
+      raw: 'blockchain',
+      title: '区块链',
+      extra: ['技术选型', '区块链'],
+    },
+    // 技术选型 end
+    // ----------------
+    // 酷团队 start
+    {
+      id: 'teams',
+      raw: 'teams',
       title: '酷团队',
       icon: `${ICON_CMD}/navi/group.svg`,
-      childMenu: [],
+      extra: ['酷团队'],
     },
-
+    // 酷团队 end
+    // ----------------
+    // 计算机名人堂 start
     {
-      id: uid.gen(),
-      raw: uid.gen(),
+      id: 'hallOfFame',
+      raw: 'hallOfFame',
       title: '计算机名人堂',
       icon: `${ICON_CMD}/navi/lighthouse.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '图灵奖',
-          displayType: 'FAME_PEOPLE',
-          icon: `${ICON_CMD}/navi/crown.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'TopCoder',
-          icon: `${ICON_CMD}/navi/top.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '语言之父',
-          icon: `${ICON_CMD}/navi/founder.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '商业领袖',
-          icon: `${ICON_CMD}/navi/leader.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '学术界',
-          icon: `${ICON_CMD}/navi/phd.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '工业界',
-          icon: `${ICON_CMD}/navi/industry.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '前端',
-              icon: `${ICON_CMD}/navi/hammer.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '后端',
-              icon: `${ICON_CMD}/navi/hammer.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: 'xx端',
-              icon: `${ICON_CMD}/navi/hammer.svg`,
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '黑客列传',
-          icon: `${ICON_CMD}/navi/hacker.svg`,
-        },
-      ],
-    },
-    {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '独立开发者',
-      icon: `${ICON_CMD}/navi/hammer.svg`,
-      childMenu: [],
-    },
-    {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '教程 / 101', // 技术书籍，中文文档, 翻译(放标签里吧), 国外网校, 比如 https://web.stanford.edu/class/cs224n/
-      icon: `${ICON_CMD}/navi/glasses.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '前端',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'iOS',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'Android',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '后端',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '设计',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '产品',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '奇奇怪怪',
-          icon: `${ICON_CMD}/navi/others.svg`,
-        },
-      ],
-    },
-    {
-      id: 'ac', // uid.gen(),
-      raw: 'toto',
-      title: '领域发现',
-      icon: `${ICON_CMD}/navi/door.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '设计师',
-          icon: `${ICON_CMD}/navi/sci-fi.svg`,
-          displayType: 'IMAGE',
-          // 归类: https://tympanus.net/codrops/
-          // css tricks ...
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '开发者社区',
-          icon: `${ICON_CMD}/navi/sci-fi.svg`,
-          displayType: 'IMAGE',
-        },
-      ],
-    },
-    {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '优质信息源',
-      icon: `${ICON_CMD}/navi/subscribe.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '周刊 / 月报',
-          icon: `${ICON_CMD}/navi/news-paper.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'Medium',
-          icon: `${ICON_CMD}/navi/medium.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: 'Twitter',
-          icon: `${ICON_CMD}/navi/twitter.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '专栏类',
-          icon: `${ICON_CMD}/navi/columns.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '知乎',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '网易？',
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '播客类',
-          icon: `${ICON_CMD}/navi/podcast.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '技术类',
-              icon: `${ICON_CMD}/navi/tips.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '设计类',
-              icon: `${ICON_CMD}/navi/tips.svg`,
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '杂谈类',
-              icon: `${ICON_CMD}/navi/tips.svg`,
-            },
-          ],
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '视频类',
-          icon: `${ICON_CMD}/navi/twitter.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '独立博客',
-          icon: `${ICON_CMD}/navi/blog.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '团队博客',
-          icon: `${ICON_CMD}/navi/team.svg`,
-          childMenu: [
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '全部',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '大前端',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: '设计师',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: 'iOS',
-            },
-            {
-              id: uid.gen(),
-              raw: uid.gen(),
-              title: 'Android',
-            },
-          ],
-        },
-        // {
-        //   id: uid.gen(),
-        // raw: uid.gen(),
-        //   title: '微信公众号',
-        //   icon: `${ICON_CMD}/navi/weichat_gzh.svg`,
-        // },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '泛科技媒体',
-          icon: `${ICON_CMD}/navi/macphone.svg`,
-        },
-      ],
-    },
-    {
-      id: '41',
+      extra: ['计算机名人堂'],
+    },
+    {
+      id: 'TuringAward',
+      raw: 'TuringAward',
+      title: '图灵奖',
+      displayType: 'FAME_PEOPLE',
+      icon: `${ICON_CMD}/navi/crown.svg`,
+      extra: ['计算机名人堂', '图灵奖'],
+    },
+    {
+      id: 'topCoder',
+      raw: 'topCoder',
+      title: 'TopCoder',
+      icon: `${ICON_CMD}/navi/top.svg`,
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', 'TopCoder'],
+    },
+    {
+      id: 'fatherOf',
+      raw: 'fatherOf',
+      title: '语言之父',
+      displayType: 'FAME_PEOPLE',
+      icon: `${ICON_CMD}/navi/founder.svg`,
+      extra: ['计算机名人堂', '语言之父'],
+    },
+    {
+      id: 'edu',
+      raw: 'edu',
+      title: '学术界',
+      icon: `${ICON_CMD}/navi/phd.svg`,
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '学术界'],
+    },
+    {
+      id: 'industry',
+      raw: 'industry',
+      title: '工业界',
+      icon: `${ICON_CMD}/navi/industry.svg`,
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '工业界'],
+    },
+    {
+      id: 'frontend',
+      raw: 'frontend',
+      title: '前端',
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '工业界', '前端'],
+    },
+    {
+      id: 'backend',
+      raw: 'backend',
+      title: '后端',
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '工业界', '后端'],
+    },
+    {
+      id: 'client',
+      raw: 'client',
+      title: '客户端',
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '工业界', '客户端'],
+    },
+    {
+      id: 'hacker',
+      raw: 'hacker',
+      title: '黑客列传',
+      icon: `${ICON_CMD}/navi/hacker.svg`,
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '黑客列传'],
+    },
+    {
+      id: 'leader',
+      raw: 'leader',
+      title: '商业领袖',
+      icon: `${ICON_CMD}/navi/leader.svg`,
+      displayType: 'FAME_PEOPLE',
+      extra: ['计算机名人堂', '商业领袖'],
+    },
+    // 计算机名人堂 end
+    // ----------------
+    // 博物馆 start
+    {
+      id: 'museum',
+      raw: 'museum',
       title: 'IT 博物馆',
-      raw: 'raw',
-      icon: `${ICON_CMD}/navi_translate.svg`,
-      childMenu: [],
+      icon: `${ICON_CMD}/navi/lighthouse.svg`,
+      extra: ['博物馆'],
     },
+    // 博物馆 end
+    // ----------------
+    // 教程 / 101 start
+    // 路线图谱，视频课程，技术书籍，社区文档, 高校教学，新手项目, 比如 https://web.stanford.edu/class/cs224n/
     {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '酷发明',
-      icon: `${ICON_CMD}/navi/experiment.svg`,
-      childMenu: [],
+      id: '101',
+      raw: '101',
+      title: '教程 / 101',
+      icon: `${ICON_CMD}/navi/phd.svg`,
+      extra: ['101'],
     },
     {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '排行榜',
-      icon: `${ICON_CMD}/navi/experiment.svg`,
-      childMenu: [],
+      id: 'roadmap',
+      raw: 'roadmap',
+      title: '路线图谱',
+      extra: ['101', '路线图谱'],
     },
-
     {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '影剧 / Talks',
+      id: 'video',
+      raw: 'video',
+      title: '视频课程',
+      extra: ['101', '视频课程'],
+    },
+    {
+      id: 'book',
+      raw: 'book',
+      title: '技术书籍',
+      extra: ['101', '技术书籍'],
+    },
+    {
+      id: 'docs',
+      raw: 'docs',
+      title: '社区文档',
+      extra: ['101', '社区文档'],
+    },
+    {
+      id: 'edu',
+      raw: 'edu',
+      title: '高校教学',
+      extra: ['101', '高校教学'],
+    },
+    {
+      id: 'bootstrap',
+      raw: 'bootstrap',
+      title: '新手项目',
+      extra: ['101', '新手项目'],
+    },
+    // 教程 / 101 end
+    // ----------------
+    // Conf / Talks start
+    {
+      id: 'talks',
+      raw: 'talks',
+      title: 'Conf / Talks',
       icon: `${ICON_CMD}/navi/movie.svg`,
-      childMenu: [],
+      extra: ['source'],
     },
+    // Conf / Talks end
+    // ----------------
 
+    // 优质信息源 start
+    {
+      id: 'source',
+      raw: 'source',
+      title: '优质信息源',
+      icon: `${ICON_CMD}/navi/subscribe.svg`,
+      extra: ['优质信息源'],
+    },
+    {
+      id: 'blog',
+      raw: 'blog',
+      title: '个人博客',
+      icon: `${ICON_CMD}/navi/blog.svg`,
+      extra: ['优质信息源', '个人博客'],
+    },
+    {
+      id: 'media',
+      raw: 'media',
+      title: '科技媒体',
+      icon: `${ICON_CMD}/navi/macphone.svg`,
+      extra: ['优质信息源', '科技媒体'],
+    },
+    {
+      id: 'twitter',
+      raw: 'twitter',
+      title: 'Twitter',
+      icon: `${ICON_CMD}/navi/twitter.svg`,
+      extra: ['优质信息源', 'Twitter'],
+    },
     {
-      id: uid.gen(),
-      raw: uid.gen(),
-      title: '找到组织', // 红蓝粉
-      icon: `${ICON_CMD}/navi/sport.svg`,
-      childMenu: [
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '足球',
-          icon: `${ICON_CMD}/navi/sport.svg`,
-        },
-        {
-          id: uid.gen(),
-          raw: uid.gen(),
-          title: '篮球',
-          icon: `${ICON_CMD}/navi/sport.svg`,
-        },
-      ],
+      id: 'weekly',
+      raw: 'weekly',
+      title: '周刊 / 月报',
+      icon: `${ICON_CMD}/navi/news-paper.svg`,
+      extra: ['优质信息源', '周刊 / 月报'],
+    },
+    {
+      id: 'podcast',
+      raw: 'podcast',
+      title: '播客',
+      icon: `${ICON_CMD}/navi/podcast.svg`,
+      extra: ['优质信息源', '播客'],
+    },
+
+    // 优质信息源 end
+    // ----------------
+    // 领域发现 start
+    {
+      id: 'domain', // uid.gen(),
+      raw: 'domain',
+      title: '跨界发现',
+      icon: `${ICON_CMD}/navi/door.svg`,
+      extra: ['跨界发现'],
+    },
+    {
+      id: 'industry',
+      raw: 'industry',
+      title: '工业软件',
+      extra: ['跨界发现', '工业软件'],
+    },
+    {
+      id: 'sport',
+      raw: 'sport',
+      title: '体育产业',
+      extra: ['跨界发现', '体育产业'],
+    },
+    {
+      id: 'cg',
+      raw: 'cg',
+      title: 'CG 动画',
+      extra: ['跨界发现', 'CG 动画'],
+    },
+    {
+      id: 'game',
+      raw: 'game',
+      title: '游戏制作',
+      extra: ['跨界发现', '游戏制作'],
+    },
+    {
+      id: 'si',
+      raw: 'si',
+      title: '科学研究',
+      extra: ['跨界发现', '科学研究'],
+    },
+    {
+      id: 'others',
+      raw: 'others',
+      title: '奇奇怪怪',
+      extra: ['跨界发现', '奇奇怪怪'],
     },
 
+    // 领域发现 end
+    // ----------------
+    // TopN start
+    {
+      id: 'topn',
+      raw: 'topn',
+      title: 'TopN',
+      icon: `${ICON_CMD}/navi/subscribe.svg`,
+      extra: ['topn'],
+    },
+    // TopN end
+    // ----------------
+    // 下班后 start
+    {
+      id: 'afterwork',
+      raw: 'afterwork',
+      title: '下班后',
+      icon: `${ICON_CMD}/navi/subscribe.svg`,
+      extra: ['下班后'],
+    },
     {
-      id: uid.gen(),
-      raw: uid.gen(),
+      id: 'sideproject',
+      raw: 'sideproject',
+      title: '副业组队',
+      extra: ['下班后', '副业组队'],
+    },
+    {
+      id: 'sport',
+      raw: 'sport',
+      title: '体育运动',
+      extra: ['下班后', '体育运动'],
+    },
+    {
+      id: 'fun',
+      raw: 'fun',
       title: '摸鱼指南',
-      icon: `${ICON_CMD}/navi/sport.svg`,
-      childMenu: [],
+      extra: ['下班后', '摸鱼指南'],
+    },
+    {
+      id: 'urbanlegend',
+      raw: 'urbanlegend',
+      title: '都市传说',
+      extra: ['下班后', '摸鱼指南', '都市传说'],
+    },
+    {
+      id: 'ereview',
+      raw: 'review',
+      title: '数码测评',
+      extra: ['下班后', '摸鱼指南', '数码测评'],
+    },
+    {
+      id: 'mreview',
+      raw: 'review',
+      title: '影 / 剧评',
+      extra: ['下班后', '摸鱼指南', '影 / 剧评'],
+    },
+    {
+      id: 'eat',
+      raw: 'eat',
+      title: '逛吃',
+      extra: ['下班后', '摸鱼指南', '逛吃'],
+    },
+    {
+      id: 'others',
+      raw: 'others',
+      title: '奇奇怪怪',
+      extra: ['下班后', '摸鱼指南', '奇奇怪怪'],
     },
   ]
 }
diff --git a/utils/seo.ts b/utils/seo.ts
index 736a96a74..c4fd2b558 100644
--- a/utils/seo.ts
+++ b/utils/seo.ts
@@ -83,6 +83,14 @@ export const drinkSEO = (): TSEO => {
   }
 }
 
+export const coolGuideSEO = (): TSEO => {
+  return {
+    url: `${SITE_URL}/${ROUTE.COOL_GUIDE}`,
+    title: '酷导航 | CP',
+    description: 'IT 导航界的特斯拉',
+  }
+}
+
 export const articleSEO = (
   thread: TThread = THREAD.POST,
   article: TArticle,