diff --git a/src/components/Buttons/ArrowLink.tsx b/src/components/Buttons/ArrowLink.tsx
index 374d85255..a6d90d9da 100644
--- a/src/components/Buttons/ArrowLink.tsx
+++ b/src/components/Buttons/ArrowLink.tsx
@@ -17,11 +17,11 @@ import { Wrapper, Text, RightIcon } from './styles/arrow_link'
 const log = buildLog('c:Buttons:ArrowLink')
 
 type TProps = {
-  className: string
+  className?: string
   children?: React.ReactNode
   size?: TSIZE
   href: string
-  target: '_blank' | ''
+  target?: '_blank' | ''
   color?: string
   hoverColor?: string
 }
diff --git a/src/components/CommunityFaceLogo/index.js b/src/components/CommunityFaceLogo/index.js
deleted file mode 100755
index 5742dfe7e..000000000
--- a/src/components/CommunityFaceLogo/index.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- *
- * CommunityFaceLogo
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-import { isEmpty } from 'ramda'
-
-import { HCN } from '@/constant'
-import { ICON_BASE } from '@/config'
-import { buildLog } from '@/utils'
-
-import { Logo } from './styles'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:CommunityFaceLogo:index')
-
-const CommunityFaceLogo = ({ noFill, src, raw, loading, className }) => {
-  if (raw === HCN || isEmpty(src)) {
-    return (
-      <Logo
-        src={`${ICON_BASE}/site_logo.svg`}
-        raw={raw}
-        className={className}
-      />
-    )
-  }
-
-  return (
-    <Logo
-      noFill={noFill}
-      src={src}
-      raw={raw}
-      loading={loading}
-      className={className}
-    />
-  )
-}
-
-CommunityFaceLogo.propTypes = {
-  noFill: T.bool,
-  src: T.string,
-  raw: T.string,
-  // just for clean styled-component warnings
-  className: T.string,
-  loading: T.any,
-}
-
-CommunityFaceLogo.defaultProps = {
-  src: '',
-  raw: HCN,
-  noFill: false,
-  className: 'community-facelogo-class',
-  loading: null,
-}
-
-export default React.memo(CommunityFaceLogo)
diff --git a/src/components/CommunityFaceLogo/index.tsx b/src/components/CommunityFaceLogo/index.tsx
new file mode 100755
index 000000000..c3ea8191a
--- /dev/null
+++ b/src/components/CommunityFaceLogo/index.tsx
@@ -0,0 +1,49 @@
+/*
+ *
+ * CommunityFaceLogo
+ *
+ */
+
+import React from 'react'
+import { isEmpty } from 'ramda'
+
+import { HCN } from '@/constant'
+// import { ICON_BASE } from '@/config'
+import { buildLog } from '@/utils'
+
+import { Logo, HomeLogo } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:CommunityFaceLogo:index')
+
+type TProps = {
+  noFill?: boolean
+  src?: string
+  raw?: string
+  loading?: boolean | null
+  className?: string
+}
+
+const CommunityFaceLogo: React.FC<TProps> = ({
+  noFill = false,
+  src = '',
+  raw = HCN,
+  loading,
+  className = 'community-facelogo-class',
+}) => {
+  if (raw === HCN || isEmpty(src)) {
+    return (
+      <HomeLogo
+        // src={`${ICON_BASE}/site_logo.svg`}
+        src="https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/static/new-logo.jpg"
+        className={className}
+      />
+    )
+  }
+
+  return (
+    <Logo noFill={noFill} src={src} loading={loading} className={className} />
+  )
+}
+
+export default React.memo(CommunityFaceLogo)
diff --git a/src/components/CommunityFaceLogo/styles/index.ts b/src/components/CommunityFaceLogo/styles/index.ts
index 6416c7e95..d70948d6c 100755
--- a/src/components/CommunityFaceLogo/styles/index.ts
+++ b/src/components/CommunityFaceLogo/styles/index.ts
@@ -3,9 +3,11 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 import Img from '@/Img'
 
-export const Logo = styled(Img)<{ nonFill: boolean }>`
-  fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))};
+export const Logo = styled(Img)<{ noFill?: boolean }>`
+  fill: ${({ noFill }) => (noFill ? '' : theme('banner.desc'))};
   display: block;
 `
 
-export const holder = 1
+export const HomeLogo = styled(Logo)`
+  transform: rotate(20deg);
+`
diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.js b/src/containers/unit/Footer/DesktopView/BottomInfo.js
deleted file mode 100755
index 9ac7538d0..000000000
--- a/src/containers/unit/Footer/DesktopView/BottomInfo.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { ROUTE } from '@/constant'
-
-import {
-  Wrapper,
-  InnerWrapper,
-  Links,
-  Site,
-  MoreText,
-} from '../styles/desktop_view/bottom_info'
-
-const FRIENDS = [
-  {
-    title: 'aab',
-    link: 'https://cps.fun',
-  },
-  {
-    title: 'bbb',
-    link: 'https://cps.fun',
-  },
-  {
-    title: 'ccc',
-    link: 'https://cps.fun',
-  },
-  {
-    title: 'ddd',
-    link: 'https://cps.fun',
-  },
-  {
-    title: '暗黑设计',
-    link: 'https://cps.fun',
-  },
-]
-
-const BottomInfo = ({ layout, metric }) => (
-  <Wrapper>
-    <InnerWrapper layout={layout} metric={metric}>
-      <Links>
-        {FRIENDS.map((site, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Site key={index} href={site.link}>
-            {site.title}
-          </Site>
-        ))}
-      </Links>
-      <Link href={`/${ROUTE.SPONSOR}`} passHref>
-        <MoreText href={ROUTE.SPONSOR}>更多赞助商</MoreText>
-      </Link>
-    </InnerWrapper>
-  </Wrapper>
-)
-
-export default React.memo(BottomInfo)
diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx
new file mode 100755
index 000000000..ede53870a
--- /dev/null
+++ b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { ROUTE } from '@/constant'
+
+import {
+  Wrapper,
+  InnerWrapper,
+  BeianLink,
+  CompanyLink,
+} from '../styles/desktop_view/bottom_info'
+
+const BottomInfo: React.FC = () => (
+  <Wrapper>
+    <InnerWrapper>
+      <CompanyLink href={ROUTE.SPONSOR}>
+        Groupher @ 2021. 保留所有权利。
+      </CompanyLink>
+      <BeianLink href="http://beian.miit.gov.cn">蜀ICP备17043722号-4</BeianLink>
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default React.memo(BottomInfo)
diff --git a/src/containers/unit/Footer/DesktopView/BriefView.js b/src/containers/unit/Footer/DesktopView/BriefView.tsx
similarity index 54%
rename from src/containers/unit/Footer/DesktopView/BriefView.js
rename to src/containers/unit/Footer/DesktopView/BriefView.tsx
index 924660277..d0f78fba3 100755
--- a/src/containers/unit/Footer/DesktopView/BriefView.js
+++ b/src/containers/unit/Footer/DesktopView/BriefView.tsx
@@ -1,76 +1,72 @@
 import React from 'react'
 
-import { ISSUE_ADDR, ICON_CMD, API_SERVER_ADDR } from '@/config'
+import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config'
+
+import TopInfo from './TopInfo'
+import BottomInfo from './BottomInfo'
 
 import {
   Wrapper,
   InnerWrapper,
   MainInfos,
   BaseInfo,
-  Divider,
   Item,
-  Support,
-  CenterLogosWrapper,
-  SiteLogo,
-  LogoDivider,
-  GithubLogo,
 } from '../styles/desktop_view/brief_view'
 
-import { toggleSponsorHelper, toggleBusBanner } from '../logic'
+type TProps = {
+  curView: string // todo
+  metric: string
+}
 
-const BriefView = ({ curView, metric }) => {
+const BriefView: React.FC<TProps> = ({ curView, metric }) => {
   return (
-    <Wrapper>
-      <InnerWrapper metric={metric}>
+    <Wrapper metric={metric}>
+      <InnerWrapper>
+        <TopInfo noBottomBorder />
         <MainInfos center={curView === 'BRIEF' || false}>
           <BaseInfo>
             <Item href="/home/post/1" rel="noopener noreferrer" target="_blank">
               关于
             </Item>
-            <Divider>|</Divider>
             <Item
               href="/cps-support/posts"
               rel="noopener noreferrer"
               target="_blank"
             >
-              使用指南
+              创建社区
             </Item>
-            <Divider>|</Divider>
             <Item
-              href={`${ISSUE_ADDR}`}
+              href="/cps-support/posts"
               rel="noopener noreferrer"
               target="_blank"
             >
-              反馈与建议
+              加入我们
             </Item>
-            <CenterLogosWrapper>
-              <SiteLogo />
-              <LogoDivider radius={4} space={10} />
-              <GithubLogo src={`${ICON_CMD}/github.svg`} />
-            </CenterLogosWrapper>
             <Item
               href={`${API_SERVER_ADDR}`}
               rel="noopener noreferrer"
               target="_blank"
             >
-              API
+              OpenSource
+            </Item>
+            <Item
+              href={`${API_SERVER_ADDR}`}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              特别感谢
             </Item>
-            <Divider>|</Divider>
-            <Item onClick={toggleBusBanner}>商务合作</Item>
-
-            <Divider>|</Divider>
-            <Support onClick={toggleSponsorHelper}>打赏</Support>
-            <Divider>|</Divider>
             <Item
-              href={`${ISSUE_ADDR}/269`}
+              href={`${ISSUE_ADDR}`}
               rel="noopener noreferrer"
               target="_blank"
             >
-              客户端
+              反馈与建议
             </Item>
           </BaseInfo>
         </MainInfos>
       </InnerWrapper>
+      <BottomInfo />
     </Wrapper>
   )
 }
diff --git a/src/containers/unit/Footer/DesktopView/BusinessNote.js b/src/containers/unit/Footer/DesktopView/BusinessNote.js
deleted file mode 100755
index a99d2bd12..000000000
--- a/src/containers/unit/Footer/DesktopView/BusinessNote.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD, EMAIL_BUSINESS } from '@/config'
-import {
-  Wrapper,
-  MailIcon,
-  Title,
-  MailLink,
-} from '../styles/desktop_view/business_note'
-
-const BusinessNote = () => (
-  <Wrapper>
-    <MailIcon src={`${ICON_CMD}/business_mail.svg`} />
-    <Title>希望 coderplanets 能与您一起成长</Title>
-    <MailLink href={`mailto:${EMAIL_BUSINESS}`}>{`${EMAIL_BUSINESS}`}</MailLink>
-  </Wrapper>
-)
-
-export default React.memo(BusinessNote)
diff --git a/src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js b/src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js
deleted file mode 100644
index d1b8a3b14..000000000
--- a/src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { useDevice } from '@/hooks'
-import EmailSubscriber from '@/components/EmailSubscriber'
-
-import SocialList from '../../SocialList'
-import {
-  Wrapper,
-  InnerWrapper,
-} from '../../styles/desktop_view/digest_view/contact_bar'
-
-const ContactBar = ({ layout, metric }) => {
-  const { isMobile } = useDevice()
-
-  return (
-    <Wrapper>
-      <InnerWrapper layout={layout} isMobile={isMobile} metric={metric}>
-        <SocialList />
-        {!isMobile && (
-          <EmailSubscriber type="simple" placeholder="订阅社区动态" />
-        )}
-      </InnerWrapper>
-    </Wrapper>
-  )
-}
-
-export default React.memo(ContactBar)
diff --git a/src/containers/unit/Footer/DesktopView/DigestView/index.js b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx
similarity index 51%
rename from src/containers/unit/Footer/DesktopView/DigestView/index.js
rename to src/containers/unit/Footer/DesktopView/DigestView/index.tsx
index 6147fe31b..b2f73dbe9 100644
--- a/src/containers/unit/Footer/DesktopView/DigestView/index.js
+++ b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx
@@ -1,21 +1,18 @@
 import React from 'react'
 import { useTheme } from 'styled-components'
 
+import type { TThemeMap } from '@/spec'
 import { GITHUB, API_SERVER_ADDR, ISSUE_ADDR, BUILD_VERSION } from '@/config'
 import { ROUTE } from '@/constant'
 
+import TopInfo from '../TopInfo'
 import BottomInfo from '../BottomInfo'
-import ContactBar from './ContactBar'
+import SocialList from '../../SocialList'
 
 import {
   Wrapper,
   InnerWrapper,
   MainInfos,
-  MainColumn,
-  SiteInfo,
-  SiteTitle,
-  SiteDesc,
-  SiteLogo,
   Column,
   Title,
   Body,
@@ -23,10 +20,12 @@ import {
   LinkItem,
 } from '../../styles/desktop_view/digest_view'
 
-import { toggleBusBanner } from '../../logic'
+type TProps = {
+  metric: string
+}
 
-const DigestView = ({ layout, metric }) => {
-  const theme = useTheme()
+const DigestView: React.FC<TProps> = ({ metric }) => {
+  const theme = useTheme() as TThemeMap
 
   const linkColors = {
     color: theme.footer.text,
@@ -35,68 +34,76 @@ const DigestView = ({ layout, metric }) => {
 
   return (
     <Wrapper metric={metric}>
-      <InnerWrapper layout={layout}>
+      <InnerWrapper>
+        <TopInfo />
         <MainInfos>
-          <MainColumn>
-            <SiteInfo>
-              <SiteLogo />
-            </SiteInfo>
-            <div>
-              <SiteTitle>coderplanets</SiteTitle>
-              <SiteDesc
-                href="https://github.com/groupher"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Power By Groupher | 2020
-              </SiteDesc>
-              <SiteDesc
-                href="http://beian.miit.gov.cn"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                蜀ICP备17043722号-4
-              </SiteDesc>
-            </div>
-          </MainColumn>
           <Column>
-            <Title>About</Title>
+            <Title>网站地图</Title>
             <Body>
               <LinkItem href="/home/post/1" {...linkColors}>
-                关于本站
+                子社区
               </LinkItem>
               <LinkItem href={`${ISSUE_ADDR}`} {...linkColors}>
-                反馈与建议
+                作品集市
               </LinkItem>
               <LinkItem href="https://github.com/coderplanets" {...linkColors}>
-                加入我们
+                酷导航
               </LinkItem>
               <LinkItem href="/cps-support/posts" {...linkColors}>
-                使用指南
+                来一杯
               </LinkItem>
               <LinkItem href={`${ROUTE.FRIENDS}`} {...linkColors}>
-                友情链接
+                活动
+              </LinkItem>
+              <LinkItem href={`${ROUTE.FRIENDS}`} {...linkColors}>
+                工作
+              </LinkItem>
+              <LinkItem href={`${ROUTE.FRIENDS}`} {...linkColors}>
+                更多 ..
               </LinkItem>
             </Body>
           </Column>
 
           <Column>
-            <Title>增值服务</Title>
+            <Title>会员</Title>
             <Body>
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                志愿者
+              </LinkItem>
               <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
                 成为会员
               </LinkItem>
               <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
-                打赏支持(todo)
+                打赏支持
               </LinkItem>
             </Body>
+
+            <br />
+            <Title>商务</Title>
+            <Body>
+              <Item as="span" normal>
+                投放广告
+              </Item>
+              <Item as="span" normal>
+                赞助商
+              </Item>
+              {/* <LinkItem href={`${ROUTE.FRIENDS}`} {...linkColors}>
+                友情链接
+              </LinkItem> */}
+            </Body>
           </Column>
 
           <Column>
             <Title>开发者</Title>
             <Body>
+              <Item as="span" normal>
+                开发计划
+              </Item>
               <LinkItem href="/cps-support/post/42" {...linkColors}>
-                开发者指南
+                文档中心
+              </LinkItem>
+              <LinkItem href={`${GITHUB}`} {...linkColors}>
+                技术栈
               </LinkItem>
               <LinkItem href={`${API_SERVER_ADDR}`} {...linkColors}>
                 API
@@ -106,35 +113,54 @@ const DigestView = ({ layout, metric }) => {
               </LinkItem>
             </Body>
           </Column>
-          <Column>
-            <Title>商务合作</Title>
-            <Body>
-              <Item as="span" normal onClick={toggleBusBanner}>
-                赞助社区
-              </Item>
-              <Item as="span" normal onClick={toggleBusBanner}>
-                商务合作
-              </Item>
-            </Body>
-          </Column>
+
           <Column margin="30px">
-            <Title>本站状态</Title>
+            <Title>网站状态</Title>
             <Body>
               <Item as="span" normal>
-                构建版本: {BUILD_VERSION}
+                部署版本: {BUILD_VERSION}
               </Item>
+            </Body>
+            <br />
+            <Title>用户</Title>
+            <Body>
               <Item as="span" normal>
                 注册人数: --
               </Item>
               <Item as="span" normal>
                 在线人数: --
               </Item>
+              <Item as="span" normal>
+                小黑屋: --
+              </Item>
+            </Body>
+          </Column>
+
+          <Column>
+            <Title>支持</Title>
+            <Body>
+              <LinkItem href="/home/post/1" {...linkColors}>
+                违规举报
+              </LinkItem>
+              <LinkItem href="/cps-support/posts" {...linkColors}>
+                反馈与建议
+              </LinkItem>
+              <LinkItem href={`${ISSUE_ADDR}`} {...linkColors}>
+                帮助中心
+              </LinkItem>
+              <LinkItem href={`${ROUTE.FRIENDS}`} {...linkColors}>
+                内容订阅
+              </LinkItem>
+            </Body>
+            <br />
+            <Title>联系</Title>
+            <Body>
+              <SocialList />
             </Body>
           </Column>
         </MainInfos>
       </InnerWrapper>
-      <ContactBar layout={layout} metric={metric} />
-      <BottomInfo layout={layout} metric={metric} />
+      <BottomInfo />
     </Wrapper>
   )
 }
diff --git a/src/containers/unit/Footer/DesktopView/GitSource.js b/src/containers/unit/Footer/DesktopView/GitSource.js
deleted file mode 100755
index bf0b28b7a..000000000
--- a/src/containers/unit/Footer/DesktopView/GitSource.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-// import { ICON_CMD } from '@/config'
-import { Wrapper, Title, Tag } from '../styles/desktop_view/git_source_tag'
-
-const GitSourceTag = ({ title, addr }) => (
-  <Wrapper>
-    <Title>{title}</Title>
-    <Tag>
-      <iframe
-        title="souce_attr"
-        src={addr}
-        frameBorder="0"
-        scrolling="0"
-        width="80px"
-        height="20px"
-      />
-    </Tag>
-  </Wrapper>
-)
-
-export default React.memo(GitSourceTag)
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx
new file mode 100644
index 000000000..280329dc6
--- /dev/null
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+import type { TProps as TTopInfoProps } from './index'
+
+import {
+  Wrapper,
+  InfoBar,
+  SiteTitle,
+  ArrowDividerIcon,
+  Logo,
+} from '../../styles/desktop_view/top_info/community'
+
+type TProps = Pick<TTopInfoProps, 'title' | 'noBottomBorder'>
+
+const Community: React.FC<TProps> = ({
+  title = 'javascript',
+  noBottomBorder = false,
+}) => {
+  return (
+    <Wrapper noBottomBorder={noBottomBorder}>
+      <InfoBar>
+        <Logo />
+      </InfoBar>
+      <ArrowDividerIcon src={`${ICON}/shape/arrow-simple.svg`} />
+      <SiteTitle>{title}</SiteTitle>
+    </Wrapper>
+  )
+}
+
+export default React.memo(Community)
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx
new file mode 100644
index 000000000..62c90d4dc
--- /dev/null
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import type { TProps as TTopInfoProps } from './index'
+
+import {
+  Wrapper,
+  InfoBar,
+  SiteTitle,
+  Linker,
+  Logo,
+} from '../../styles/desktop_view/top_info'
+
+type TProps = Pick<TTopInfoProps, 'title'>
+
+const HomeCommunity: React.FC<TProps> = ({ title = 'CoderPlanets' }) => {
+  return (
+    <Wrapper>
+      <InfoBar>
+        <Logo />
+      </InfoBar>
+      <SiteTitle>{title}</SiteTitle>
+      <Linker>关于</Linker>
+      <Linker>创建社区</Linker>
+      <Linker>加入我们</Linker>
+      <Linker>OpenSource</Linker>
+      <Linker>特别感谢</Linker>
+    </Wrapper>
+  )
+}
+
+export default React.memo(HomeCommunity)
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
new file mode 100644
index 000000000..9fbc44f0c
--- /dev/null
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import HomeCommunity from './HomeCommunity'
+import Community from './Community'
+
+export type TProps = {
+  type?: string
+  title?: string
+  noBottomBorder?: boolean
+}
+
+const TopInfo: React.FC<TProps> = ({ type, ...restProps }) => {
+  switch (type) {
+    case 'home': {
+      return <HomeCommunity {...restProps} />
+    }
+    case 'community': {
+      return <Community {...restProps} />
+    }
+    default:
+      return <HomeCommunity {...restProps} />
+  }
+}
+
+export default React.memo(TopInfo)
diff --git a/src/containers/unit/Footer/DesktopView/index.js b/src/containers/unit/Footer/DesktopView/index.tsx
similarity index 77%
rename from src/containers/unit/Footer/DesktopView/index.js
rename to src/containers/unit/Footer/DesktopView/index.tsx
index e6534320f..449880d04 100644
--- a/src/containers/unit/Footer/DesktopView/index.js
+++ b/src/containers/unit/Footer/DesktopView/index.tsx
@@ -12,20 +12,14 @@ import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
 import JoinModal from '@/containers/tool/JoinModal'
-import Modal from '@/components/Modal'
+
+import type { TStore } from '../store'
 
 import BriefView from './BriefView'
 import DigestView from './DigestView'
-import BusinessNote from './BusinessNote'
 
 import { Wrapper } from '../styles'
-import {
-  useInit,
-  toggleSponsorHelper,
-  toggleBusBanner,
-  onLogin,
-  onPay,
-} from '../logic'
+import { useInit, toggleSponsorHelper, onLogin, onPay } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:Footer')
@@ -39,11 +33,15 @@ export const BuyMeChuanChuan = dynamic(
   },
 )
 
-const FooterContainer = ({ footer: store, metric }) => {
+type TProps = {
+  footer?: TStore
+  metric?: string // TODO
+}
+
+const FooterContainer: React.FC<TProps> = ({ footer: store, metric }) => {
   useInit(store)
   const {
     showSponsor,
-    showBusBanner,
     accountInfo,
     accountInfo: {
       customization: { bannerLayout },
@@ -72,9 +70,6 @@ const FooterContainer = ({ footer: store, metric }) => {
 
   return (
     <Wrapper testid="footer" layout={bannerLayout} metric={metric}>
-      <Modal show={showBusBanner} showCloseBtn onClose={toggleBusBanner}>
-        <BusinessNote />
-      </Modal>
       <JoinModal />
       <BuyMeChuanChuan
         show={showSponsor}
@@ -85,7 +80,7 @@ const FooterContainer = ({ footer: store, metric }) => {
       />
 
       {curView === 'DIGEST' ? (
-        <DigestView layout={bannerLayout} metric={metric} />
+        <DigestView metric={metric} />
       ) : (
         <BriefView curView={curView} metric={metric} />
       )}
@@ -93,4 +88,4 @@ const FooterContainer = ({ footer: store, metric }) => {
   )
 }
 
-export default pluggedIn(FooterContainer)
+export default pluggedIn(FooterContainer) as React.FC<TProps>
diff --git a/src/containers/unit/Footer/MobileView/index.js b/src/containers/unit/Footer/MobileView/index.js
index 666375f9a..cec86ac6f 100644
--- a/src/containers/unit/Footer/MobileView/index.js
+++ b/src/containers/unit/Footer/MobileView/index.js
@@ -5,7 +5,7 @@ import { ICON, ICON_BASE } from '@/config'
 import {
   Wrapper,
   SiteWrapper,
-  SiteLogo,
+  Logo,
   SiteTitle,
   SiteInfoWrapper,
   Item,
@@ -17,7 +17,7 @@ import {
 const MobileView = () => (
   <Wrapper>
     <SiteWrapper>
-      <SiteLogo src={`${ICON_BASE}/site_logo.svg`} />
+      <Logo src={`${ICON_BASE}/site_logo.svg`} />
       <SiteTitle>coderplanets</SiteTitle>
     </SiteWrapper>
 
diff --git a/src/containers/unit/Footer/SocialList.js b/src/containers/unit/Footer/SocialList.js
index 2f1634ff5..357b9097d 100755
--- a/src/containers/unit/Footer/SocialList.js
+++ b/src/containers/unit/Footer/SocialList.js
@@ -35,15 +35,6 @@ const SocialList = () => (
         <Icon src={`${ICON_CMD}/zhihu_solid.svg`} />
       </Item>
     </a>
-    <a
-      href="https://union.zhaodao.ai/#random"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <Item>
-        <Icon src={`${ICON_CMD}/footer-makers-union.svg`} />
-      </Item>
-    </a>
   </Wrapper>
 )
 
diff --git a/src/containers/unit/Footer/logic.js b/src/containers/unit/Footer/logic.ts
similarity index 70%
rename from src/containers/unit/Footer/logic.js
rename to src/containers/unit/Footer/logic.ts
index 49642d82f..046789f22 100755
--- a/src/containers/unit/Footer/logic.js
+++ b/src/containers/unit/Footer/logic.ts
@@ -4,6 +4,8 @@ import { EVENT, PAYMENT_USAGE } from '@/constant'
 import { asyncSuit, buildLog, send } from '@/utils'
 // import S from './schema'
 
+import type { TStore } from './store'
+
 /* eslint-disable-next-line */
 const log = buildLog('L:Footer2')
 
@@ -11,22 +13,18 @@ const { SR71, $solver } = asyncSuit
 const sr71$ = new SR71()
 
 let sub$ = null
-let store = null
+let store: TStore | undefined
 
-export const toggleSponsorHelper = () =>
+export const toggleSponsorHelper = (): void =>
   store.mark({ showSponsor: !store.showSponsor })
 
-// TODO:  商务合作
-export const toggleBusBanner = () =>
-  store.mark({ showBusBanner: !store.showBusBanner })
-
-export const onLogin = () => store.authWarning({ hideToast: true })
-export const onPay = (num) => {
+export const onLogin = (): void => store.authWarning({ hideToast: true })
+export const onPay = (num: number): void => {
   if (!store.isLogin) return store.authWarning()
   store.cashierHelper({ paymentUsage: PAYMENT_USAGE.DONATE, amount: num })
 }
 
-export const queryDoraemon = (data) => send(EVENT.QUERY_DORAMON, { data })
+export const queryDoraemon = (data): void => send(EVENT.QUERY_DORAMON, { data })
 
 // ###############################
 // Data & Error handlers
@@ -38,7 +36,7 @@ const ErrSolver = []
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store) => {
+export const useInit = (_store: TStore) => {
   useEffect(() => {
     store = _store
     // log('effect init')
diff --git a/src/containers/unit/Footer/store.js b/src/containers/unit/Footer/store.js
deleted file mode 100755
index 45ef3b0f6..000000000
--- a/src/containers/unit/Footer/store.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Footer2 store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-
-import { markStates, buildLog } from '@/utils'
-
-/* eslint-disable-next-line */
-const log = buildLog('S:Footer')
-
-const Footer = T.model('Footer', {
-  showSponsor: T.optional(T.boolean, false),
-  showBusBanner: T.optional(T.boolean, false),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get isLogin() {
-      return self.root.account.isLogin
-    },
-    get accountInfo() {
-      return self.root.accountInfo
-    },
-  }))
-  .actions((self) => ({
-    authWarning(options) {
-      self.root.authWarning(options)
-    },
-    cashierHelper(opt) {
-      self.root.cashierHelper(opt)
-    },
-    sponsorHepler() {
-      self.showSponsor = true
-    },
-    closeSponsor() {
-      self.showSponsor = false
-    },
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default Footer
diff --git a/src/containers/unit/Footer/store.ts b/src/containers/unit/Footer/store.ts
new file mode 100755
index 000000000..01d2ff79d
--- /dev/null
+++ b/src/containers/unit/Footer/store.ts
@@ -0,0 +1,48 @@
+/*
+ * Footer2 store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+
+import type { TRootStore, TAccount } from '@/spec'
+import { markStates, buildLog } from '@/utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:FooterStore')
+
+const FooterStore = T.model('FooterStore', {
+  showSponsor: T.optional(T.boolean, false),
+})
+  .views((self) => ({
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.account.isLogin
+    },
+    get accountInfo(): TAccount {
+      const root = getParent(self) as TRootStore
+      return root.accountInfo
+    },
+  }))
+  .actions((self) => ({
+    authWarning(options?: Record<string, unknown>): void {
+      const root = getParent(self) as TRootStore
+      root.authWarning(options)
+    },
+    cashierHelper(opt): void {
+      const root = getParent(self) as TRootStore
+      root.cashierHelper(opt)
+    },
+    sponsorHepler(): void {
+      self.showSponsor = true
+    },
+    closeSponsor(): void {
+      self.showSponsor = false
+    },
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof FooterStore>
+export default FooterStore
diff --git a/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts
index 3e265012a..6ed157dff 100755
--- a/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts
+++ b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts
@@ -8,30 +8,29 @@ export const Wrapper = styled.div`
   /* background: ${theme('footer.bottomBg')}; */
   border-top: 1px solid;
   border-top-color: #02394a;
-  height: 60px;
   width: 100%;
+  padding-top: 18px;
+  padding-bottom: 30px;
 
   ${css.media.tablet`display: none;`};
 `
 export const InnerWrapper = styled.div`
-  ${css.flex('justify-between')};
+  ${css.flexColumn('justify-start')};
   color: ${theme('thread.articleDigest')};
-  align-items: center;
   width: 100%;
-  padding-left: 2px;
+  margin-right: 20px;
 `
-export const Links = styled.div`
-  ${css.flex('align-center')};
-`
-export const Site = styled.a`
-  color: ${theme('thread.articleDigest')};
-  cursor: pointer;
+export const BeianLink = styled.a`
+  color: ${theme('footer.text')};
   text-decoration: none;
+  font-size: 14px;
   &:hover {
+    cursor: pointer;
     text-decoration: underline;
     color: ${theme('footer.hover')};
   }
 `
-export const MoreText = styled(Site)`
-  text-decoration: underline;
+export const CompanyLink = styled(BeianLink)`
+  font-size: 12px;
+  margin-bottom: 2px;
 `
diff --git a/src/containers/unit/Footer/styles/desktop_view/brief_view.ts b/src/containers/unit/Footer/styles/desktop_view/brief_view.ts
index a08d267df..e227dfbfa 100755
--- a/src/containers/unit/Footer/styles/desktop_view/brief_view.ts
+++ b/src/containers/unit/Footer/styles/desktop_view/brief_view.ts
@@ -2,19 +2,14 @@ import styled from 'styled-components'
 
 import { theme, css } from '@/utils'
 
-import Img from '@/Img'
-import CommunityFaceLogo from '@/components/CommunityFaceLogo'
-import DotDivider from '@/components/DotDivider'
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ metric: string }>`
   ${css.flexColumn('align-center')};
   width: 100%;
   margin-top: 15px;
+  ${({ metric }) => css.fitContentWidth(metric)};
 `
-export const InnerWrapper = styled.div<{ metric: string }>`
-  ${({ metric }) => css.fitPageWidth(metric)};
+export const InnerWrapper = styled.div`
   width: 100%;
-  margin-bottom: ${({ metric }) => (metric === 'article' ? '30px' : 0)};
 `
 export const MainInfos = styled.footer<{ center: boolean }>`
   ${css.flexColumn('align-center')};
@@ -22,22 +17,6 @@ export const MainInfos = styled.footer<{ center: boolean }>`
   margin-bottom: 20px;
   ${css.media.tablet`display: none;`};
 `
-export const CenterLogosWrapper = styled.div`
-  ${css.flex('align-both')};
-  margin-left: 70px;
-  margin-right: 70px;
-`
-export const SiteLogo = styled(CommunityFaceLogo)`
-  ${css.size(20)};
-  margin-top: -2px;
-`
-export const LogoDivider = styled(DotDivider)`
-  background: ${theme('footer.text')};
-`
-export const GithubLogo = styled(Img)`
-  fill: ${theme('footer.text')};
-  ${css.size(18)};
-`
 const Link = styled.a`
   text-decoration: none;
   font-weight: bolder;
@@ -48,23 +27,9 @@ const Link = styled.a`
     color: ${theme('footer.hover')};
   }
 `
-export const Support = styled.div`
-  font-weight: bolder;
-  color: ${theme('footer.text')};
-  transition: color 0.3s;
-  &:hover {
-    cursor: pointer;
-    color: ${theme('footer.hover')};
-  }
-`
 export const BaseInfo = styled.div`
   ${css.flex()};
 `
-export const Divider = styled.div`
-  margin-left: 12px;
-  margin-right: 12px;
-  color: ${theme('footer.text')};
-  opacity: 0.6;
+export const Item = styled(Link)`
+  margin-right: 25px;
 `
-
-export const Item = styled(Link)``
diff --git a/src/containers/unit/Footer/styles/desktop_view/business_note.ts b/src/containers/unit/Footer/styles/desktop_view/business_note.ts
deleted file mode 100755
index 45caff6e4..000000000
--- a/src/containers/unit/Footer/styles/desktop_view/business_note.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import { css, theme } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flexColumn('align-center')};
-  margin-top: 10%;
-  ${css.media.mobile`margin-top: 20%;`};
-`
-export const MailIcon = styled(Img)`
-  fill: ${theme('thread.articleTitle')};
-  ${css.size(100)};
-`
-export const Title = styled.div`
-  color: ${theme('thread.articleDigest')};
-  margin-top: 10px;
-`
-export const MailLink = styled.a`
-  color: ${theme('thread.articleTitle')};
-  margin-top: 4px;
-
-  font-size: 0.8rem;
-  text-decoration: underline;
-
-  &:hover {
-    color: ${theme('banner.title')};
-    text-decoration: underline;
-    cursor: pointer;
-  }
-  transition: color 0.2s;
-`
diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts
deleted file mode 100644
index 09c13d679..000000000
--- a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components'
-
-import { css } from '@/utils'
-
-export const Wrapper = styled.footer`
-  ${css.flexColumn('align-center')};
-  width: 100%;
-`
-export const InnerWrapper = styled.div<{ isMobile: boolean }>`
-  ${css.flex('align-center')};
-  justify-content: ${({ isMobile }) =>
-    !isMobile ? 'space-between' : 'center'};
-  width: 100%;
-  height: 68px;
-`
diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts
index 55622cfd3..275592f7e 100644
--- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts
+++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts
@@ -2,13 +2,10 @@ import styled from 'styled-components'
 
 import { theme, css } from '@/utils'
 
-import CommunityFaceLogo from '@/components/CommunityFaceLogo'
 import { ArrowLink } from '@/components/Buttons'
 
 // import { getPadding } from '../../metrics'
 
-type TItem = { normal: boolean; offsetTop: string }
-
 export const Wrapper = styled.footer<{ metric: string }>`
   ${css.flexColumn('align-center')};
   width: 100%;
@@ -17,13 +14,13 @@ export const Wrapper = styled.footer<{ metric: string }>`
 `
 export const InnerWrapper = styled.div`
   width: 100%;
-  padding-bottom: 0;
 `
 export const MainInfos = styled.div`
-  ${css.flex('justify-start')};
-  margin-bottom: 20px;
+  ${css.flex('justify-between')};
   margin-top: 20px;
   margin-bottom: 30px;
+  margin-right: 12px;
+  margin-left: 5px;
   opacity: 0.9;
 
   &:hover {
@@ -33,57 +30,22 @@ export const MainInfos = styled.div`
 
   ${css.media.tablet`display: none;`};
 `
-export const Column = styled.div<{ margin: string }>`
+export const Column = styled.div<{ margin?: string }>`
   ${css.flexColumn()};
   min-width: 100px;
   margin-right: ${({ margin }) => margin || '50px'};
 `
-export const MainColumn = styled(Column)`
-  min-width: 240px;
-  flex-grow: 1;
-`
-export const SiteInfo = styled.div`
-  ${css.flex()};
-  align-items: end;
-  margin-bottom: 10px;
-  margin-top: 3px;
-`
-export const SiteTitle = styled.div`
-  margin-bottom: 5px;
-  color: ${theme('footer.text')};
-  font-size: 15px;
-  font-weight: bold;
-  margin-bottom: 5px;
-`
-export const SiteDesc = styled.a`
-  margin-bottom: 5px;
-  color: ${theme('footer.text')};
-  display: block;
-  text-decoration: none;
-
-  font-size: 13px;
-
-  &:hover {
-    color: ${theme('footer.hover')};
-    text-decoration: underline;
-    cursor: pointer;
-  }
-  transition: color 0.2s;
-`
-export const SiteLogo = styled(CommunityFaceLogo)`
-  ${css.size(32)};
-  margin-bottom: 18px;
-  margin-left: 3px;
-`
 export const Title = styled.div`
   color: ${theme('footer.title')};
   margin-bottom: 15px;
   font-size: 14px;
+  font-weight: bold;
 `
 export const Body = styled.div`
   ${css.flexColumn('justify-start')};
   color: ${theme('footer.text')};
 `
+type TItem = { normal: boolean; offsetTop?: string }
 export const Item = styled.a<TItem>`
   color: ${theme('footer.text')};
 
diff --git a/src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts b/src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts
deleted file mode 100755
index 5f99053cc..000000000
--- a/src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from 'styled-components'
-
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flex()};
-`
-export const Title = styled.div`
-  font-size: 0.8rem;
-  color: ${theme('thread.articleDigest')};
-`
-export const Tag = styled.div`
-  ${css.smokey()};
-`
diff --git a/src/containers/unit/Footer/styles/desktop_view/top_info/community.ts b/src/containers/unit/Footer/styles/desktop_view/top_info/community.ts
new file mode 100644
index 000000000..fa04993f2
--- /dev/null
+++ b/src/containers/unit/Footer/styles/desktop_view/top_info/community.ts
@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+import { theme, css } from '@/utils'
+import Img from '@/Img'
+
+import {
+  Wrapper as DefaultWrapper,
+  Logo as DefaultLogo,
+  SiteTitle as DefaultSiteTitle,
+  InfoBar as DefaultInfoBar,
+} from './index'
+
+export const Wrapper = styled(DefaultWrapper)``
+export const InfoBar = styled(DefaultInfoBar)``
+export const Logo = styled(DefaultLogo)`
+  ${css.size(18)};
+  margin-right: 8px;
+`
+export const SiteTitle = styled(DefaultSiteTitle)`
+  color: #007fa8;
+  font-size: 18px;
+  font-weight: normal;
+`
+export const ArrowDividerIcon = styled(Img)`
+  fill: ${theme('footer.text')};
+  ${css.size(20)};
+  transform: rotate(180deg);
+  margin-right: 6px;
+`
+export const Linker = styled.a`
+  color: ${theme('footer.title')};
+  display: block;
+  text-decoration: none;
+  margin-left: 24px;
+  opacity: 0.8;
+
+  font-size: 14px;
+
+  &:hover {
+    color: ${theme('footer.hover')};
+    text-decoration: underline;
+    cursor: pointer;
+    opacity: 1;
+  }
+  transition: all 0.2s;
+`
+
+export const MainInfos = styled.div`
+  ${css.flex('justify-between')};
+  margin-top: 20px;
+  margin-bottom: 30px;
+  margin-right: 12px;
+  margin-left: 5px;
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+  transition: opacity 0.25s;
+
+  ${css.media.tablet`display: none;`};
+`
diff --git a/src/containers/unit/Footer/styles/desktop_view/top_info/index.ts b/src/containers/unit/Footer/styles/desktop_view/top_info/index.ts
new file mode 100644
index 000000000..db2f97db4
--- /dev/null
+++ b/src/containers/unit/Footer/styles/desktop_view/top_info/index.ts
@@ -0,0 +1,73 @@
+import styled from 'styled-components'
+
+import { theme, css } from '@/utils'
+import Img from '@/Img'
+
+import CommunityFaceLogo from '@/components/CommunityFaceLogo'
+
+type TWrapper = { noBottomBorder?: boolean }
+export const Wrapper = styled.div<TWrapper>`
+  ${css.flex('align-center')};
+  margin-bottom: ${({ noBottomBorder }) => (noBottomBorder ? '20px' : '30px')};
+  padding-bottom: ${({ noBottomBorder }) => (noBottomBorder ? '0' : '35px')};
+  border-bottom: ${({ noBottomBorder }) =>
+    noBottomBorder ? 'none' : '1px solid'};
+  border-bottom-color: ${({ noBottomBorder }) =>
+    noBottomBorder ? 'transparent' : '#003949'};
+`
+export const InfoBar = styled.div`
+  ${css.flex('align-center')};
+  margin-top: 3px;
+`
+export const Logo = styled(CommunityFaceLogo)`
+  ${css.size(22)};
+  margin-right: 12px;
+  margin-top: -5px;
+  margin-left: 2px;
+  cursor: pointer;
+`
+export const SiteTitle = styled.div`
+  color: #007fa8;
+  font-size: 18px;
+  font-weight: bold;
+  margin-right: 25px;
+`
+export const ArrowDividerIcon = styled(Img)`
+  fill: ${theme('footer.text')};
+  ${css.size(20)};
+  transform: rotate(180deg);
+  margin-right: 6px;
+`
+export const Linker = styled.a`
+  color: ${theme('footer.title')};
+  display: block;
+  text-decoration: none;
+  margin-left: 24px;
+  opacity: 0.8;
+
+  font-size: 14px;
+
+  &:hover {
+    color: ${theme('footer.hover')};
+    text-decoration: underline;
+    cursor: pointer;
+    opacity: 1;
+  }
+  transition: all 0.2s;
+`
+
+export const MainInfos = styled.div`
+  ${css.flex('justify-between')};
+  margin-top: 20px;
+  margin-bottom: 30px;
+  margin-right: 12px;
+  margin-left: 5px;
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+  transition: opacity 0.25s;
+
+  ${css.media.tablet`display: none;`};
+`
diff --git a/src/containers/unit/Footer/styles/mobile_view.ts b/src/containers/unit/Footer/styles/mobile_view.ts
index c0097ffca..a685008c7 100644
--- a/src/containers/unit/Footer/styles/mobile_view.ts
+++ b/src/containers/unit/Footer/styles/mobile_view.ts
@@ -15,7 +15,7 @@ export const SiteWrapper = styled.div`
   height: 40px;
   margin-top: 20px;
 `
-export const SiteLogo = styled(Img)`
+export const Logo = styled(Img)`
   fill: #196f71;
   ${css.size(18)};
 `
diff --git a/src/spec/theme.ts b/src/spec/theme.ts
index bbd74aba9..dc28a76f7 100644
--- a/src/spec/theme.ts
+++ b/src/spec/theme.ts
@@ -22,4 +22,8 @@ export type TThemeMap = {
     warnBar: string
     infoBar: string
   }
+  footer?: {
+    text: string
+    hover: string
+  }
 }
diff --git a/utils/themes/skins/solarized_dark.ts b/utils/themes/skins/solarized_dark.ts
index 36114d780..1d89ac895 100755
--- a/utils/themes/skins/solarized_dark.ts
+++ b/utils/themes/skins/solarized_dark.ts
@@ -101,7 +101,7 @@ const solarizedDark = {
   footer: {
     text: '#065365',
     hover: '#147f7e',
-    title: '#195D61',
+    title: '#1a687d',
     bottomBg: '#061b20',
   },
   sidebar: {