diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 8f4cafb..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "presets": [
-    ["@babel/env", {
-      "modules": false,
-      "targets": { "esmodules": true }
-    }],
-    "@babel/react",
-    "@babel/typescript"
-  ],
-  "plugins": [
-    ["@babel/plugin-proposal-class-properties", { "loose": true }],
-    ["transform-imports", {
-      "@material-ui/core": { "transform": "@material-ui/core/${member}" },
-      "lodash-es": { "transform": "lodash-es/${member}" }
-    }],
-    ["babel-plugin-styled-components", { "ssr": false }]
-  ]
-}
diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..6ed2e33
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,10 @@
+# Browsers that we support
+
+ios 10.3
+Android > 67
+
+last 2 version
+> 1% in CN
+
+not dead
+not IE > 0
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..a02f2ca
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,31 @@
+const presets = [
+  ["@babel/env", {
+    "debug": process.env.NODE_ENV === "production",
+    "modules": false,
+  }],
+  "@babel/react",
+  "@babel/typescript",
+]
+
+const plugins = [
+  ["@babel/plugin-transform-runtime"],
+  ["@babel/plugin-proposal-class-properties", {
+    "loose": true
+  }],
+  ["transform-imports", {
+    "@material-ui/core": {
+      "transform": "@material-ui/core/es/${member}"
+    },
+    "lodash-es": {
+      "transform": "lodash-es/${member}"
+    }
+  }],
+  ["babel-plugin-styled-components", {
+    "ssr": false
+  }],
+]
+
+module.exports = {
+  presets,
+  plugins,
+}
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 3f815ea..8b8d317 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -17,6 +17,7 @@ module.exports = merge(common, {
   devtool: 'eval-source-map',
 
   devServer: {
+    disableHostCheck: true,
     historyApiFallback: true,
     port: 9898,
     host: '0.0.0.0',
diff --git a/package-lock.json b/package-lock.json
index 6a9721c..654cf50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -682,6 +682,18 @@
         "regenerator-transform": "^0.13.3"
       }
     },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.2.0.tgz",
+      "integrity": "sha512-jIgkljDdq4RYDnJyQsiWbdvGeei/0MOTtSHKO/rfbd/mXBxNpdlulMx49L0HQ4pug1fXannxoqCI+fYSle9eSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "resolve": "^1.8.1",
+        "semver": "^5.5.1"
+      }
+    },
     "@babel/plugin-transform-shorthand-properties": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz",
@@ -992,9 +1004,9 @@
       }
     },
     "@material-ui/core": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.7.0.tgz",
-      "integrity": "sha512-Eac2JlwL8oG6ns2ay5L5mvqx8HUmbSnLj2zqsakdi/7h52wuJj6u+Zz0UCHe2UCowiEcmjJ2Tz9iVpLrKrp2sw==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.7.1.tgz",
+      "integrity": "sha512-CjIGwvzn84BgzXWzC9M/Tz2gDI7AfUe3G1JXkZQAVy+ddPikh+iZwn5snnElfcjuC+ahXxaIyK49ARt3NM49vQ==",
       "requires": {
         "@babel/runtime": "7.2.0",
         "@material-ui/utils": "^3.0.0-alpha.1",
@@ -1008,7 +1020,7 @@
         "dom-helpers": "^3.2.1",
         "hoist-non-react-statics": "^3.2.1",
         "is-plain-object": "^2.0.4",
-        "jss": "^9.3.3",
+        "jss": "^9.8.7",
         "jss-camel-case": "^6.0.0",
         "jss-default-unit": "^8.0.2",
         "jss-global": "^3.0.0",
@@ -7882,6 +7894,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-spring": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-7.2.5.tgz",
+      "integrity": "sha512-J14PEJmkTOKLqN03+y7nM9szUrnQhZnapyQu4Tr8Ncq5wpKUB4ASZ4pRU/amNVKf0WVPkYeD62FqZFIrDjELJg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "react-transition-group": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.2.tgz",
diff --git a/package.json b/package.json
index 1178918..aa822ba 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@aspnet/signalr": "^1.1.0",
     "@cc98/ubb-core": "1.1.0",
-    "@material-ui/core": "^3.7.0",
+    "@material-ui/core": "^3.7.1",
     "@material-ui/icons": "^3.0.1",
     "@reach/router": "^1.2.1",
     "@sentry/browser": "^4.4.2",
@@ -25,6 +25,7 @@
     "lodash-es": "^4.17.11",
     "react": "16.7.0-alpha.2",
     "react-dom": "16.7.0-alpha.2",
+    "react-spring": "^7.2.5",
     "remark": "^10.0.1",
     "remark-react": "^5.0.1",
     "styled-components": "^4.1.3",
@@ -34,6 +35,7 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
diff --git a/src/@types/@cc98/IConfig.d.ts b/src/@types/@cc98/IConfig.d.ts
index 0531c7d..7a5663e 100644
--- a/src/@types/@cc98/IConfig.d.ts
+++ b/src/@types/@cc98/IConfig.d.ts
@@ -37,7 +37,7 @@ declare module '@cc98/api' {
     /**
      * 推荐功能
      */
-    recommendationFunction: Array
+    recommendationFunction: any[]
     /**
      * 推荐阅读
      */
diff --git a/src/UBB/handlerHub/specificTagHandlers/bili.tsx b/src/UBB/handlerHub/specificTagHandlers/bili.tsx
index e8ee400..046d93e 100644
--- a/src/UBB/handlerHub/specificTagHandlers/bili.tsx
+++ b/src/UBB/handlerHub/specificTagHandlers/bili.tsx
@@ -12,20 +12,11 @@ const handler: ITagHandler<React.ReactNode> = {
     const { bili } = node.tagData
     const partNumber = parseInt(bili, 10) || 1
 
-    const props = {
-      border: 0,
-      frameborder: 'no',
-      framespacing: 0,
-      allowfullscreen: true,
-    }
-
     return (
       <iframe
         className="ubb-tag-bili"
-        {...props}
         src={`https://player.bilibili.com/player.html?aid=${innerText}&page=${partNumber}`}
-        allowFullScreen={true}
-        scrolling="no"
+        allowFullScreen
       />
     )
   },
diff --git a/src/UBB/style.css b/src/UBB/style.css
index 91d3562..9267a97 100644
--- a/src/UBB/style.css
+++ b/src/UBB/style.css
@@ -11,8 +11,8 @@
 
 
 .ubb-tag-bili {
-  width: 80%;
-  margin-left: 10%;
+  width: 90%;
+  margin-left: 5%;
   border: none;
 }
 
diff --git a/src/components/FixFab/index.tsx b/src/components/FixFab/index.tsx
index e66be13..e1116e8 100644
--- a/src/components/FixFab/index.tsx
+++ b/src/components/FixFab/index.tsx
@@ -9,7 +9,7 @@ const FabS = styled(Fab).attrs({
 })<{ bottom: number }>`
   && {
     position: fixed;
-    bottom: ${props => (props.bottom ? `${props.bottom}px` : '15px')};
+    bottom: ${props => `${props.bottom}px`};
     right: 15px;
     z-index: 20;
   }
@@ -17,13 +17,14 @@ const FabS = styled(Fab).attrs({
 
 interface Props {
   onClick?: () => void
-  bottom?: number
+  /** 次序，从 1 计数 */
+  order?: number
 }
 
-const FixFab: React.FunctionComponent<Props> = ({ onClick, bottom, children }) => (
+const FixFab: React.FunctionComponent<Props> = ({ onClick, order = 1, children }) => (
   // FIXME: waiting @types/styled-components to upgrade
   // @ts-ignore https://www.styled-components.com/docs/advanced#refs
-  <FabS onClick={onClick} bottom={bottom}>
+  <FabS onClick={onClick} bottom={(order - 1) * 50 + 15}>
     {children}
   </FabS>
 )
diff --git a/src/components/TopicList/TopicListItem.tsx b/src/components/TopicList/TopicListItem.tsx
index f34d332..e78564d 100644
--- a/src/components/TopicList/TopicListItem.tsx
+++ b/src/components/TopicList/TopicListItem.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { navigate } from '@/utils/history'
 
@@ -91,10 +91,18 @@ interface Props {
 
 export default ({ data, place }: Props) => {
   const [boardName, setBoardName] = useState('')
-
-  function getBoardName() {
-    getBoardNameById(data.boardId).then(boardName => setBoardName(boardName))
-  }
+  useEffect(
+    () => {
+      switch (place) {
+        case 'usercenter':
+        case 'hot':
+        case 'follow':
+        case 'search':
+          getBoardNameById(data.boardId).then(boardName => setBoardName(boardName))
+      }
+    },
+    [place]
+  )
 
   const title = data.title
   let subtitle = data.userName ? data.userName : '[匿名]'
@@ -103,16 +111,10 @@ export default ({ data, place }: Props) => {
 
   switch (place) {
     case 'usercenter':
-      if (!boardName) {
-        getBoardName()
-      }
       subtitle = boardName
       break
 
     case 'hot':
-      if (!boardName) {
-        getBoardName()
-      }
       info1 = boardName
       break
 
@@ -120,9 +122,6 @@ export default ({ data, place }: Props) => {
       info1 = dayjs(data.time).fromNow()
     case 'follow':
     case 'search':
-      if (!boardName) {
-        getBoardName()
-      }
       info2 = boardName
       break
 
diff --git a/src/components/TopicList/index.tsx b/src/components/TopicList/index.tsx
index eacbb22..ee93e4e 100644
--- a/src/components/TopicList/index.tsx
+++ b/src/components/TopicList/index.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import useInfList, { Service as InfService } from '@/hooks/useInfList'
 import useFetcher, { Service as FinService } from '@/hooks/useFetcher'
+import useDelay from '@/hooks/useDelay'
 
 import TopicList from './TopicList'
 import { Place } from './TopicListItem'
@@ -58,12 +59,19 @@ interface FinProps {
   service: FinService<ITopic[]>
   noLoading?: boolean
   place: Place
+  delay?: number
 }
 
-const FinTopicList: React.FunctionComponent<FinProps> = ({ service, noLoading, place }) => {
+const FinTopicList: React.FunctionComponent<FinProps> = ({
+  service,
+  noLoading,
+  place,
+  delay = 0,
+}) => {
   const [topics] = useFetcher(service, { fail: navigateHandler })
+  const isResolve = useDelay(delay)
 
-  if (topics === null) {
+  if (topics === null || !isResolve) {
     return noLoading ? null : <LoadingCircle />
   }
 
diff --git a/src/config/host.ts b/src/config/host.ts
index 085e0f3..4aec293 100644
--- a/src/config/host.ts
+++ b/src/config/host.ts
@@ -4,8 +4,8 @@ interface IHost {
 }
 
 const host: IHost = {
-  oauth: 'https://openid.cc98.org/connect/token',
-  api: 'https://api-v2.cc98.org',
+  oauth: process.env.oauth || 'https://openid.cc98.org/connect/token',
+  api: process.env.api || 'https://api-v2.cc98.org',
 }
 
 export default host
diff --git a/src/hooks/useDelay.ts b/src/hooks/useDelay.ts
new file mode 100644
index 0000000..d16afcd
--- /dev/null
+++ b/src/hooks/useDelay.ts
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * 返回一个boolean
+ * 在指定的时间后其值为true
+ * @returns {boolean} 是否超过了延迟时间
+ * @param time 延迟时间
+ */
+export default function useDelay(time: number): boolean {
+  const [isResolve, setIsResolve] = useState(time <= 0)
+
+  useEffect(() => {
+    if (time <= 0) return
+    const timer = setTimeout(() => setIsResolve(true), time)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  return isResolve
+}
diff --git a/src/pages/Editor/Editor/MainContent.tsx b/src/pages/Editor/Editor/MainContent.tsx
index 8b00b7b..7d84263 100644
--- a/src/pages/Editor/Editor/MainContent.tsx
+++ b/src/pages/Editor/Editor/MainContent.tsx
@@ -10,7 +10,7 @@ const InputArea = styled(InputBase).attrs({
   multiline: true,
   autoFocus: true,
   rows: 6,
-  rowsMax: 12,
+  rowsMax: 10,
 })`
   && {
     margin-top: 8px;
diff --git a/src/pages/Help/About/index.tsx b/src/pages/Help/About/index.tsx
deleted file mode 100644
index d84b3d1..0000000
--- a/src/pages/Help/About/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import useFetcher from '@/hooks/useFetcher'
-
-import { navigate } from '@/utils/history'
-
-import {
-  Table,
-  TableRow,
-  TableBody,
-  TableCell,
-  Avatar,
-  CardHeader,
-  Divider,
-  Typography,
-} from '@material-ui/core'
-
-import { getSiteInfo } from '@/services/global'
-
-const Title = styled(Typography).attrs({
-  align: 'center',
-  variant: 'h6',
-})`
-  && {
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-`
-
-const SiteInfo = () => {
-  const [info] = useFetcher(getSiteInfo)
-
-  if (info === null) {
-    return null
-  }
-
-  const rows = [
-    { name: '今日帖数', data: info.todayCount },
-    { name: '论坛总主题数', data: info.maxPostCount },
-    { name: '论坛总回复数', data: info.postCount },
-    { name: '总用户数', data: info.userCount },
-    { name: '最新加入用户', data: info.lastUserName },
-  ]
-
-  return (
-    <>
-      <Title>论坛统计</Title>
-      <Divider />
-
-      <Table>
-        <TableBody>
-          {rows.map(row => (
-            <TableRow key={row.name}>
-              <TableCell>{row.name}</TableCell>
-              <TableCell>{row.data}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </>
-  )
-}
-
-interface DevCardProps {
-  name: string
-  description: string
-  userId: number
-}
-
-const CardHeaderS = styled(CardHeader)`
-  && {
-    width: 48%;
-  }
-`
-
-const DevCard = ({ name, description, userId }: DevCardProps) => (
-  <CardHeaderS
-    avatar={<Avatar src={`https://github.com/${name}.png?s=100`} />}
-    title={name}
-    subheader={description}
-    onClick={() => navigate(`/user/${userId}`)}
-  />
-)
-
-const CardFlexDiv = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`
-
-const DevTeam = () => (
-  <>
-    <Title>开发组</Title>
-    <Divider />
-
-    <CardFlexDiv>
-      <DevCard name="Deturium" description="项目背锅人" userId={530817} />
-      <DevCard name="Dearkano" description="苦力" userId={556551} />
-      <DevCard name="AsukaSong" description="高级 Webpack 配置工程师" userId={569380} />
-      <DevCard name="Tsukiko15" description="后端开发" userId={405730} />
-      <DevCard name="adddna" description="低级前端开发" userId={559244} />
-      <DevCard name="c708423" description="前端开发" userId={558467} />
-    </CardFlexDiv>
-  </>
-)
-
-export default () => (
-  <>
-    <SiteInfo />
-    <DevTeam />
-  </>
-)
diff --git a/src/pages/HotTopic/index.tsx b/src/pages/HotTopic/index.tsx
index 7f39d1c..580bb5b 100644
--- a/src/pages/HotTopic/index.tsx
+++ b/src/pages/HotTopic/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import useFetcher from '@/hooks/useFetcher'
+import useDelay from '@/hooks/useDelay'
 import { FinTopicList } from '@/components/TopicList'
 
 import { List, Tab, Tabs } from '@material-ui/core'
@@ -18,14 +19,16 @@ import { notificationHandler } from '@/services/utils/errorHandler'
 
 interface Props {
   service: typeof getHotTopics
+  delay?: number
 }
 
-export const HotTopicList: React.FunctionComponent<Props> = ({ service }) => {
+export const HotTopicList: React.FunctionComponent<Props> = ({ service, delay = 0 }) => {
   const [topics] = useFetcher(service, {
     fail: notificationHandler,
   })
+  const isResolve = useDelay(delay)
 
-  if (topics === null) {
+  if (topics === null || !isResolve) {
     return <LoadingCircle />
   }
 
@@ -60,11 +63,14 @@ export default () => {
         <Tab value="history" label="历史上的今天" />
       </Tabs>
 
-      {current === 'day' && <HotTopicList service={getHotTopics} />}
-
-      {current === 'week' && <FinTopicList service={getWeeklyHotTopics} place="hot" />}
-      {current === 'month' && <FinTopicList service={getMonthlyHotTopics} place="hot" />}
-      {current === 'history' && <FinTopicList service={getHistoryHotTopics} place="hot" />}
+      {current === 'day' && <HotTopicList service={getHotTopics} delay={300} />}
+      {current === 'week' && <FinTopicList service={getWeeklyHotTopics} place="hot" delay={300} />}
+      {current === 'month' && (
+        <FinTopicList service={getMonthlyHotTopics} place="hot" delay={300} />
+      )}
+      {current === 'history' && (
+        <FinTopicList service={getHistoryHotTopics} place="hot" delay={300} />
+      )}
     </>
   )
 }
diff --git a/src/pages/MyFollow/index.tsx b/src/pages/MyFollow/index.tsx
index 1404bfd..e9fbe6b 100644
--- a/src/pages/MyFollow/index.tsx
+++ b/src/pages/MyFollow/index.tsx
@@ -4,7 +4,7 @@ import { InfTopicList } from '@/components/TopicList'
 
 import { Tab, Tabs } from '@material-ui/core'
 
-import { getFollowBoardsTopics, getFollowUsersTopics } from '@/services/topic'
+import { getFollowBoardsTopics, getFollowUsersTopics, getFavoriteTopics } from '@/services/topic'
 
 export default () => {
   const [current, setCurrent] = useState('board')
@@ -24,10 +24,12 @@ export default () => {
       >
         <Tab value="board" label="关注版面" />
         <Tab value="user" label="关注用户" />
+        <Tab value="topic" label="我的收藏" />
       </Tabs>
 
       {current === 'board' && <InfTopicList service={getFollowBoardsTopics} place="follow" />}
       {current === 'user' && <InfTopicList service={getFollowUsersTopics} place="follow" />}
+      {current === 'topic' && <InfTopicList service={getFavoriteTopics} place="follow" />}
     </>
   )
 }
diff --git a/src/pages/Topic/FixButtons.tsx b/src/pages/Topic/FixButtons.tsx
index 1e41cb8..7f25620 100644
--- a/src/pages/Topic/FixButtons.tsx
+++ b/src/pages/Topic/FixButtons.tsx
@@ -34,10 +34,10 @@ export default ({ topicInfo, isReverse, refreshFunc }: Props) => {
     <>
       {expand && (
         <>
-          <FixFab bottom={165}>
+          <FixFab order={4}>
             <RotateRightIcon onClick={refreshFunc} />
           </FixFab>
-          <FixFab bottom={115}>
+          <FixFab order={3}>
             <SwapVertIcon
               onClick={() =>
                 isReverse
@@ -46,7 +46,7 @@ export default ({ topicInfo, isReverse, refreshFunc }: Props) => {
               }
             />
           </FixFab>
-          <FixFab bottom={65}>
+          <FixFab order={2}>
             <EditIcon onClick={() => navigate(`/editor/replyTopic/${topicInfo.id}`)} />
           </FixFab>
         </>
diff --git a/src/pages/Topic/PostActions.tsx b/src/pages/Topic/PostActions.tsx
new file mode 100644
index 0000000..6c4112b
--- /dev/null
+++ b/src/pages/Topic/PostActions.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+
+import useFetcher from '@/hooks/useFetcher'
+
+import { IconButton, Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import FavoriteIcon from '@material-ui/icons/Favorite'
+
+import snackbar from '@/utils/snackbar'
+import { ITopic } from '@cc98/api'
+
+import { getTopicFavorite } from '@/services/topic'
+import { favoriteHandler } from '@/services/utils/errorHandler'
+import { putFavorite, deleteFavorite } from '@/services/post'
+
+interface Props {
+  /**
+   * 帖子信息
+   */
+  topicInfo: ITopic
+}
+
+export default ({ topicInfo }: Props) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [isFavorite, setIsFavorite] = useFetcher(() => getTopicFavorite(topicInfo.id))
+
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleFavorite = async () => {
+    if (isFavorite) {
+      const res = await deleteFavorite(topicInfo.id)
+      res.fail(favoriteHandler).succeed(() => {
+        snackbar.success('取消收藏')
+        setIsFavorite(false)
+      })
+    } else {
+      const res = await putFavorite(topicInfo.id)
+      res.fail(favoriteHandler).succeed(() => {
+        snackbar.success('收藏成功')
+        setIsFavorite(true)
+      })
+    }
+  }
+
+  return (
+    <>
+      <IconButton onClick={handleOpen}>
+        <MoreVertIcon />
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        <MenuItem
+          onClick={() => {
+            handleFavorite()
+            handleClose()
+          }}
+        >
+          <ListItemIcon>
+            <FavoriteIcon color={isFavorite ? 'secondary' : 'disabled'} />
+          </ListItemIcon>
+          <Typography>{isFavorite ? '取消收藏' : '收藏主题'}</Typography>
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}
diff --git a/src/pages/Topic/PostHead.tsx b/src/pages/Topic/PostHead.tsx
index 11842b3..60434f5 100644
--- a/src/pages/Topic/PostHead.tsx
+++ b/src/pages/Topic/PostHead.tsx
@@ -10,6 +10,8 @@ import { getBoardNameById } from '@/services/board'
 
 import { navigate, goback } from '@/utils/history'
 
+import PostActions from './PostActions'
+
 const Wrapper = styled(Paper).attrs({
   square: true,
   elevation: 1,
@@ -21,6 +23,7 @@ const Wrapper = styled(Paper).attrs({
     top: 0;
     min-height: 56px;
     padding: 0 16px;
+    padding-right: 0;
     /* z-index of TopBar is 1100 and DrawerMenu is 1200 */
     z-index: 1105;
 
@@ -43,14 +46,18 @@ const Title = styled(Typography).attrs({
   && {
     margin: 4px 0;
     flex-grow: 2;
+    flex-shrink: 1;
   }
 `
 
 const SubTitle = styled(Typography)`
   && {
-    margin-left: 8px;
+    display: inline-block;
+    min-width: 4rem;
+    max-width: 6rem;
+    text-align: center;
     margin-right: -5px;
-    flex-shrink: 0;
+    flex-shrink: 1.2;
     opacity: 0.5;
   }
 `
@@ -73,6 +80,7 @@ const PostHead: React.FunctionComponent<Props> = ({ topicInfo }) => {
       </GobackIcon>
       <Title>{topicInfo.title}</Title>
       <SubTitle onClick={() => navigate(`/board/${topicInfo.boardId}`)}>{boardName}</SubTitle>
+      <PostActions topicInfo={topicInfo} />
     </Wrapper>
   )
 }
diff --git a/src/pages/Topic/PostItem/Actions.tsx b/src/pages/Topic/PostItem/Actions.tsx
index 983ce28..545edc2 100644
--- a/src/pages/Topic/PostItem/Actions.tsx
+++ b/src/pages/Topic/PostItem/Actions.tsx
@@ -1,34 +1,16 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 
-import useFetcher from '@/hooks/useFetcher'
+import IconActions from './Actions/IconActions'
+import MemuActions from './Actions/MemuActions'
 
-import { IconButton, Typography, Menu, MenuItem } from '@material-ui/core'
+import { IPost, IUser } from '@cc98/api'
 
-import ThumbUpIcon from '@material-ui/icons/ThumbUp'
-import ThumbDownIcon from '@material-ui/icons/ThumbDown'
-import FormatQuoteIcon from '@material-ui/icons/FormatQuote'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-
-import { IPost, ILikeState, IUser, IBoard } from '@cc98/api'
-import { putLike, putDislike } from '@/services/post'
-
-import userInstance from '@/containers/user'
-
-import { navigate } from '@/utils/history'
-import snackbar from '@/utils/snackbar'
-import { getBoardsInfo } from '@/services/board'
-import copy2Clipboard from 'copy-to-clipboard'
-
-import Judge from './Judge'
-import Manage from './Manage'
-
-// @babel/plugin-transform-typescript does not support const enums
-enum LikeState {
-  NONE = 0,
-  LIKE = 1,
-  DISLIKE = 2,
-}
+const FlexDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
 
 interface Props {
   /**
@@ -38,218 +20,21 @@ interface Props {
   /**
    * 用户信息
    */
-  userInfo?: IUser
+  userInfo: IUser | undefined
   /**
    * 是否追踪
    */
-  isTrace?: boolean
+  isTrace: boolean
   /**
    * 更新 Post 信息
    */
   refreshPost: () => void
 }
 
-const ActionDiv = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: 8px;
-`
-
-const Count = styled(Typography).attrs({
-  color: 'textSecondary',
-})`
-  && {
-    margin-left: -2px;
-    margin-right: 12px;
-  }
-`
-
-const DividerCol = styled.span`
-  margin: 0 4px;
-  /* FIXME: remove hardcode color */
-  border: solid thin rgba(0, 0, 0, 0.54);
-  height: 1rem;
-`
-
-/**
- * 检查是否登录
- */
-function checkLogIn() {
-  if (!userInstance.state.isLogIn) {
-    snackbar.error('请先登录')
-
-    return false
-  }
-
-  return true
-}
-
-const IconActions: React.FunctionComponent<Props> = ({ postInfo, refreshPost }) => {
-  const { likeState } = postInfo
-
-  const handleLike = (newLikeState: ILikeState) => () => {
-    if (!checkLogIn()) return
-
-    const putService = newLikeState === 1 ? putLike : putDislike
-
-    putService(postInfo.id).then(res =>
-      res.fail().succeed(_ => {
-        refreshPost()
-      })
-    )
-  }
-
-  const handleQuote = () => {
-    if (!checkLogIn()) return
-
-    if (postInfo.isDeleted) {
-      snackbar.error('不能引用已删除的帖子')
-
-      return
-    }
-    navigate(`/editor/replyTopic/${postInfo.topicId}/quote/${postInfo.floor}`)
-  }
-
-  return (
-    <ActionDiv>
-      <IconButton onClick={handleLike(LikeState.LIKE)}>
-        <ThumbUpIcon color={likeState === LikeState.LIKE ? 'secondary' : 'inherit'} />
-      </IconButton>
-      <Count>{postInfo.likeCount}</Count>
-
-      <DividerCol />
-
-      <IconButton onClick={handleLike(LikeState.DISLIKE)}>
-        <ThumbDownIcon color={likeState === LikeState.DISLIKE ? 'secondary' : 'inherit'} />
-      </IconButton>
-      <Count>{postInfo.dislikeCount}</Count>
-
-      <DividerCol />
-      <IconButton>
-        <FormatQuoteIcon onClick={handleQuote} />
-      </IconButton>
-    </ActionDiv>
-  )
-}
-
-const MoreActions = ({ postInfo, isTrace, refreshPost, userInfo }: Props) => {
-  // 控制 Menu 的显示
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  const handleTrace = () => {
-    if (isTrace) {
-      navigate(`/topic/${postInfo.topicId}`)
-    } else {
-      if (postInfo.isAnonymous) {
-        navigate(`/topic/${postInfo.topicId}/anonymous/trace/${postInfo.id}`)
-      } else {
-        navigate(`/topic/${postInfo.topicId}/trace/${postInfo.userId}`)
-      }
-    }
-    handleClose()
-  }
-
-  const handleShare = () => {
-    if (document.location) {
-      copy2Clipboard(
-        `https://${document.location.host}/topic/${postInfo.topicId}#${postInfo.floor}`
-      )
-    }
-    snackbar.success('分享链接已经成功复制到剪切板')
-    handleClose()
-  }
-
-  // 控制 评分 的显示
-  const [showJudge, setShowJudge] = useState(false)
-  const [showManage, setShowManage] = useState(false)
-
-  const judgeOpen = () => setShowJudge(true)
-  const judgeClose = () => setShowJudge(false)
-
-  const manageOpen = () => setShowManage(true)
-  const manageClose = () => setShowManage(false)
-
-  const handleJudge = () => {
-    judgeOpen()
-    handleClose()
-  }
-
-  const handleManage = () => {
-    manageOpen()
-    handleClose()
-  }
-
-  // FIXME: 不接受每次都这样请求，写一个新的 service
-  const [childBoards, setChildBoards] = useState<IBoard[]>([])
-  useFetcher(getBoardsInfo, {
-    success: boards => {
-      setChildBoards(
-        boards.map(baseBoard => baseBoard.boards).reduce((prev, cur) => cur.concat(prev))
-      )
-    },
-  })
-  const board = childBoards.filter(b => b.id === postInfo.boardId)[0]
-
-  function isManager() {
-    // 本人是管理员允许修改任何帖子
-    if (myInfo && myInfo.privilege === '管理员') return true
-    // 不是管理员包括版主不允许修改管理员的帖子
-    if (userInfo && userInfo.privilege === '管理员') return false
-    // 本人是版主可以修改其他帖子
-    if (myInfo && board && board.boardMasters.indexOf(myInfo.name) !== -1) return true
-  }
-
-  const myInfo = userInstance.state.myInfo
-  const isMaster = isManager()
-  const canEdit = postInfo.userId === (myInfo && myInfo.id) || postInfo.isAnonymous || isMaster
-
-  return (
-    <>
-      {showJudge && (
-        <Judge postInfo={postInfo} handleClose={judgeClose} refreshPost={refreshPost} />
-      )}
-      {showManage && (
-        <Manage postInfo={postInfo} handleClose={manageClose} refreshPost={refreshPost} />
-      )}
-      <IconButton onClick={handleOpen}>
-        <ExpandMoreIcon />
-      </IconButton>
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
-        <MenuItem onClick={handleTrace}>{isTrace ? '返回' : '追踪'}</MenuItem>
-        {canEdit && (
-          <MenuItem
-            onClick={() => {
-              navigate(`/editor/edit/${postInfo.id}`)
-              handleClose()
-            }}
-          >
-            编辑
-          </MenuItem>
-        )}
-        <MenuItem onClick={handleJudge}>评分</MenuItem>
-        <MenuItem onClick={handleShare}>分享</MenuItem>
-        {isMaster && <MenuItem onClick={handleManage}>管理</MenuItem>}
-      </Menu>
-    </>
-  )
-}
-
-const FlexDiv = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export default ({ postInfo, isTrace, refreshPost, userInfo }: Props) => (
+const Actions: React.FC<Props> = ({ postInfo, isTrace, refreshPost, userInfo }) => (
   <FlexDiv>
     <IconActions postInfo={postInfo} refreshPost={refreshPost} />
-    <MoreActions
+    <MemuActions
       postInfo={postInfo}
       userInfo={userInfo}
       isTrace={isTrace}
@@ -257,3 +42,5 @@ export default ({ postInfo, isTrace, refreshPost, userInfo }: Props) => (
     />
   </FlexDiv>
 )
+
+export default Actions
diff --git a/src/pages/Topic/PostItem/Actions/IconActions.tsx b/src/pages/Topic/PostItem/Actions/IconActions.tsx
new file mode 100644
index 0000000..ab15414
--- /dev/null
+++ b/src/pages/Topic/PostItem/Actions/IconActions.tsx
@@ -0,0 +1,119 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { IconButton, Typography } from '@material-ui/core'
+
+import ThumbUpIcon from '@material-ui/icons/ThumbUp'
+import ThumbDownIcon from '@material-ui/icons/ThumbDown'
+import FormatQuoteIcon from '@material-ui/icons/FormatQuote'
+
+import { IPost, ILikeState } from '@cc98/api'
+import { putLike, putDislike } from '@/services/post'
+
+import userInstance from '@/containers/user'
+
+import { navigate } from '@/utils/history'
+import snackbar from '@/utils/snackbar'
+
+// @babel/plugin-transform-typescript does not support const enums
+enum LikeState {
+  NONE = 0,
+  LIKE = 1,
+  DISLIKE = 2,
+}
+
+interface Props {
+  /**
+   * 帖子信息
+   */
+  postInfo: IPost
+  /**
+   * 更新 Post 信息
+   */
+  refreshPost: () => void
+}
+
+const ActionDiv = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+`
+
+const Count = styled(Typography).attrs({
+  color: 'textSecondary',
+})`
+  && {
+    margin-left: -2px;
+    margin-right: 12px;
+  }
+`
+
+const DividerCol = styled.span`
+  margin: 0 4px;
+  /* FIXME: remove hardcode color */
+  border: solid thin rgba(0, 0, 0, 0.54);
+  height: 1rem;
+`
+
+/**
+ * 检查是否登录
+ */
+function checkLogIn() {
+  if (!userInstance.state.isLogIn) {
+    snackbar.error('请先登录')
+
+    return false
+  }
+
+  return true
+}
+
+const IconActions: React.FC<Props> = ({ postInfo, refreshPost }) => {
+  const { likeState } = postInfo
+
+  const handleLike = (newLikeState: ILikeState) => () => {
+    if (!checkLogIn()) return
+
+    const putService = newLikeState === 1 ? putLike : putDislike
+
+    putService(postInfo.id).then(res =>
+      res.fail().succeed(_ => {
+        refreshPost()
+      })
+    )
+  }
+
+  const handleQuote = () => {
+    if (!checkLogIn()) return
+
+    if (postInfo.isDeleted) {
+      snackbar.error('不能引用已删除的帖子')
+
+      return
+    }
+    navigate(`/editor/replyTopic/${postInfo.topicId}/quote/${postInfo.floor}`)
+  }
+
+  return (
+    <ActionDiv>
+      <IconButton onClick={handleLike(LikeState.LIKE)}>
+        <ThumbUpIcon color={likeState === LikeState.LIKE ? 'secondary' : 'inherit'} />
+      </IconButton>
+      <Count>{postInfo.likeCount}</Count>
+
+      <DividerCol />
+
+      <IconButton onClick={handleLike(LikeState.DISLIKE)}>
+        <ThumbDownIcon color={likeState === LikeState.DISLIKE ? 'secondary' : 'inherit'} />
+      </IconButton>
+      <Count>{postInfo.dislikeCount}</Count>
+
+      <DividerCol />
+      <IconButton>
+        <FormatQuoteIcon onClick={handleQuote} />
+      </IconButton>
+    </ActionDiv>
+  )
+}
+
+export default IconActions
diff --git a/src/pages/Topic/PostItem/Actions/MemuActions.tsx b/src/pages/Topic/PostItem/Actions/MemuActions.tsx
new file mode 100644
index 0000000..d2e2c24
--- /dev/null
+++ b/src/pages/Topic/PostItem/Actions/MemuActions.tsx
@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from 'react'
+
+import { IconButton, Menu, MenuItem } from '@material-ui/core'
+
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+
+import { IPost, IUser } from '@cc98/api'
+
+import userInstance from '@/containers/user'
+
+import { navigate } from '@/utils/history'
+import snackbar from '@/utils/snackbar'
+import { getBoardMastersById } from '@/services/board'
+import copy2Clipboard from 'copy-to-clipboard'
+
+// TODO: fix
+import Judge from '../Dialog/Judge'
+import Manage from '../Dialog/Manage'
+
+interface Props {
+  /**
+   * 帖子信息
+   */
+  postInfo: IPost
+  /**
+   * 用户信息
+   */
+  userInfo: IUser | undefined
+  /**
+   * 是否追踪
+   */
+  isTrace: boolean
+  /**
+   * 更新 Post 信息
+   */
+  refreshPost: () => void
+}
+
+const MenuActions: React.FC<Props> = ({ postInfo, isTrace, refreshPost, userInfo }) => {
+  // 控制 Menu 的显示
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleTrace = () => {
+    if (isTrace) {
+      navigate(`/topic/${postInfo.topicId}`)
+    } else {
+      if (postInfo.isAnonymous) {
+        navigate(`/topic/${postInfo.topicId}/anonymous/trace/${postInfo.id}`)
+      } else {
+        navigate(`/topic/${postInfo.topicId}/trace/${postInfo.userId}`)
+      }
+    }
+    handleClose()
+  }
+
+  const handleShare = () => {
+    if (document.location) {
+      copy2Clipboard(
+        `https://${document.location.host}/topic/${postInfo.topicId}#${postInfo.floor}`
+      )
+    }
+    snackbar.success('分享链接已经成功复制到剪切板')
+    handleClose()
+  }
+
+  // 控制 评分 的显示
+  const [showJudge, setShowJudge] = useState(false)
+  const [showManage, setShowManage] = useState(false)
+
+  const judgeOpen = () => setShowJudge(true)
+  const judgeClose = () => setShowJudge(false)
+
+  const manageOpen = () => setShowManage(true)
+  const manageClose = () => setShowManage(false)
+
+  const handleJudge = () => {
+    judgeOpen()
+    handleClose()
+  }
+
+  const handleManage = () => {
+    manageOpen()
+    handleClose()
+  }
+
+  // FIXME: 显然组件的组织有问题，数据或许可以集中化处理
+
+  // 获取该版面版主信息
+  const [boardMasters, setBoardMasters] = useState<string[]>([])
+  useEffect(
+    () => {
+      getBoardMastersById(postInfo.boardId).then(boardMasters => setBoardMasters(boardMasters))
+    },
+    [postInfo.boardId]
+  )
+
+  function judgeEdit() {
+    // 本人是管理员允许修改任何帖子
+    if (myInfo && myInfo.privilege === '管理员') return true
+    // 不是管理员包括版主不允许修改管理员的帖子
+    if (userInfo && userInfo.privilege === '管理员') return false
+    // 本人是版主可以修改其他帖子
+    if (myInfo && boardMasters.indexOf(myInfo.name) !== -1) return true
+
+    return false
+  }
+
+  function judgeManage() {
+    // 本人是管理员允许管理任何帖子
+    if (myInfo && myInfo.privilege === '管理员') return true
+    // 本人是版主可以管理本版帖子
+    if (myInfo && boardMasters.indexOf(myInfo.name) !== -1) return true
+
+    return false
+  }
+
+  const myInfo = userInstance.state.myInfo
+  // 编辑操作
+  const canEdit = postInfo.userId === (myInfo && myInfo.id) || postInfo.isAnonymous || judgeEdit()
+  // 管理操作
+  const canManage = judgeManage()
+
+  return (
+    <>
+      {showJudge && (
+        <Judge postInfo={postInfo} handleClose={judgeClose} refreshPost={refreshPost} />
+      )}
+      {showManage && (
+        <Manage postInfo={postInfo} handleClose={manageClose} refreshPost={refreshPost} />
+      )}
+      <IconButton onClick={handleOpen}>
+        <ExpandMoreIcon />
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        <MenuItem onClick={handleTrace}>{isTrace ? '返回' : '追踪'}</MenuItem>
+        {canEdit && (
+          <MenuItem
+            onClick={() => {
+              navigate(`/editor/edit/${postInfo.id}`)
+              handleClose()
+            }}
+          >
+            编辑
+          </MenuItem>
+        )}
+        <MenuItem onClick={handleJudge}>评分</MenuItem>
+        <MenuItem onClick={handleShare}>分享</MenuItem>
+        {canManage && <MenuItem onClick={handleManage}>管理</MenuItem>}
+      </Menu>
+    </>
+  )
+}
+
+export default MenuActions
diff --git a/src/pages/Topic/PostItem/Content.tsx b/src/pages/Topic/PostItem/Content.tsx
index ece3e2e..905ae61 100644
--- a/src/pages/Topic/PostItem/Content.tsx
+++ b/src/pages/Topic/PostItem/Content.tsx
@@ -20,10 +20,16 @@ const TypographyS = styled(Typography)`
     margin: 12px 16px;
     margin-bottom: 4px;
 
-    /* for <img> in markdown */
+    /* for markdown */
     img {
       max-width: 100%;
     }
+    pre,
+    code,
+    a {
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
   }
 `
 
diff --git a/src/pages/Topic/PostItem/Judge.tsx b/src/pages/Topic/PostItem/Dialog/Judge.tsx
similarity index 100%
rename from src/pages/Topic/PostItem/Judge.tsx
rename to src/pages/Topic/PostItem/Dialog/Judge.tsx
diff --git a/src/pages/Topic/PostItem/Manage.tsx b/src/pages/Topic/PostItem/Dialog/Manage.tsx
similarity index 100%
rename from src/pages/Topic/PostItem/Manage.tsx
rename to src/pages/Topic/PostItem/Dialog/Manage.tsx
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 5dc91b9..a201b93 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 // https://reach.tech/router/api/Router
 import { Location, WindowLocation } from '@reach/router'
 import Router, { ILocation } from './Router'
@@ -8,8 +8,14 @@ import settingInstance from '@/containers/setting'
 
 import './gesture'
 
+interface LocationState {
+  href: string
+  location: WindowLocation
+  scrollTop: number
+}
+
 interface State {
-  locations: WindowLocation[]
+  locationStates: LocationState[]
   MAX_CACHE_SIZE: number
 }
 
@@ -18,7 +24,7 @@ interface State {
  */
 class RouterCacheContainer extends Container<State> {
   state: State = {
-    locations: [],
+    locationStates: [],
     MAX_CACHE_SIZE: settingInstance.state.routerCacheSize,
   }
 
@@ -27,22 +33,26 @@ class RouterCacheContainer extends Container<State> {
    * @param location
    */
   push(location: WindowLocation) {
-    const { locations, MAX_CACHE_SIZE } = this.state
-    const index = locations.findIndex(backLoc => backLoc.href === location.href)
+    const { locationStates, MAX_CACHE_SIZE } = this.state
+    const index = locationStates.findIndex(locState => locState.href === location.href)
 
     if (index !== -1) {
-      const loc = locations[index]
-      locations.splice(index, 1)
-      locations.push(loc)
+      const loc = locationStates[index]
+      locationStates.splice(index, 1)
+      locationStates.push(loc)
     } else {
-      locations.push({ ...location })
+      locationStates.push({
+        href: location.href,
+        location: { ...location },
+        scrollTop: 0,
+      })
       // 超过最大缓存数
-      if (locations.length > MAX_CACHE_SIZE) {
-        locations.shift()
+      if (locationStates.length > MAX_CACHE_SIZE) {
+        locationStates.shift()
       }
     }
 
-    this.setState({ locations })
+    this.setState({ locationStates })
   }
 }
 
@@ -65,8 +75,63 @@ export function bindURL(func: Function, href: string) {
   }
 }
 
-const CacheRouter: React.FunctionComponent<ILocation> = ({ location }) => {
-  const { locations } = useContainer(ROUTER_CACHE).state
+// https://majido.github.io/scroll-restoration-proposal/history-based-api.html#web-idl
+// history.scrollRestoration = 'manual'
+
+// @ts-ignore FIXME: no animated export from d.ts
+import { useSpring, animated } from 'react-spring/hooks'
+import { config } from 'react-spring'
+
+interface ScrollDivProps {
+  show: boolean
+  locState: LocationState
+}
+
+const ScrollDiv = ({ show, locState }: ScrollDivProps) => {
+  const lastShow = useRef(false)
+  const [props, set] = useSpring(() => ({
+    opacity: 0,
+    config: config.gentle,
+  }))
+
+  if (lastShow.current !== show) {
+    if (show) {
+      // @ts-ignore
+      set({ opacity: 1 })
+
+      setTimeout(() => {
+        if (!locState.scrollTop) {
+          return
+        }
+        window.scrollTo({
+          left: 0,
+          top: locState.scrollTop,
+          // behavior: 'smooth',
+        })
+        // FIXME: choose a better delay
+      }, 300)
+    }
+
+    if (!show) {
+      // @ts-ignore
+      set({ opacity: 0 })
+      locState.scrollTop = window.scrollY
+    }
+
+    lastShow.current = show
+  }
+
+  const style = show ? props : { display: 'none' }
+
+  return (
+    <animated.div style={style}>
+      <Router location={locState.location} />
+    </animated.div>
+  )
+}
+
+const CacheRouter: React.FC<ILocation> = ({ location }) => {
+  const { locationStates } = useContainer(ROUTER_CACHE).state
 
   useEffect(
     () => {
@@ -77,13 +142,8 @@ const CacheRouter: React.FunctionComponent<ILocation> = ({ location }) => {
 
   return (
     <>
-      {locations.map(backLoc => (
-        <div
-          key={backLoc.href}
-          style={{ display: backLoc.href === location.href ? 'block' : 'none' }}
-        >
-          <Router location={backLoc} />
-        </div>
+      {locationStates.map(locState => (
+        <ScrollDiv key={locState.href} show={locState.href === location.href} locState={locState} />
       ))}
     </>
   )
diff --git a/src/services/board.ts b/src/services/board.ts
index 870d8b2..63ddad7 100644
--- a/src/services/board.ts
+++ b/src/services/board.ts
@@ -13,32 +13,50 @@ export const getBoardsInfo = cacheService(
   3600 * 24 * 7
 )
 
+// Cache Map for Board
+let HAS_MAP = false
+const BOARD_MAP: {
+  [id: number]: IBoard
+} = {}
+
+/** 创建 BOARD_MAP */
+async function buildBoardMap() {
+  const res = await getBoardsInfo()
+  res.fail().succeed(boards => {
+    // 防止重复创建
+    if (HAS_MAP) {
+      return
+    }
+    for (const baseBoard of boards) {
+      for (const childBoard of baseBoard.boards) {
+        BOARD_MAP[childBoard.id] = childBoard
+      }
+    }
+    HAS_MAP = true
+  })
+}
+
 /**
- * 通过版面Id获取版面名称
+ * 获取版面的版主信息（返回值不是 Try）
  */
-export const getBoardNameById = (() => {
-  // cache
-  let _hasMap = false
-  const _BoardNameCacheMap: {
-    [key: number]: string
-  } = {}
+export async function getBoardMastersById(boardId: number) {
+  if (!HAS_MAP) {
+    await buildBoardMap()
+  }
 
-  return async (id: number) => {
-    if (!_hasMap) {
-      const res = await getBoardsInfo()
-      res.fail().succeed(boards => {
-        for (const baseBoard of boards) {
-          for (const childBoard of baseBoard.boards) {
-            _BoardNameCacheMap[childBoard.id] = childBoard.name
-          }
-        }
-        _hasMap = true
-      })
-    }
+  return BOARD_MAP[boardId].boardMasters || []
+}
 
-    return _BoardNameCacheMap[id] || '版面不存在'
+/**
+ * 通过版面Id获取版面名称（返回值不是 Try）
+ */
+export async function getBoardNameById(boardId: number) {
+  if (!HAS_MAP) {
+    await buildBoardMap()
   }
-})()
+
+  return BOARD_MAP[boardId].name || '版面不存在'
+}
 
 /**
  * 获取单个版面信息
diff --git a/src/services/post.ts b/src/services/post.ts
index f12e0b4..9b43a93 100644
--- a/src/services/post.ts
+++ b/src/services/post.ts
@@ -1,4 +1,4 @@
-import { GET, PUT } from '@/utils/fetch'
+import { GET, PUT, DELETE } from '@/utils/fetch'
 import { IPost, ILike } from '@cc98/api'
 
 /**
@@ -129,3 +129,17 @@ export function rate(id: number, value: 1 | -1, reason: string) {
     },
   })
 }
+
+/**
+ * 收藏帖子
+ */
+export function putFavorite(topicId: number) {
+  return PUT(`me/favorite/${topicId}`)
+}
+
+/**
+ * 取消收藏帖子
+ */
+export function deleteFavorite(topicId: number) {
+  return DELETE(`me/favorite/${topicId}`)
+}
diff --git a/src/services/topic.ts b/src/services/topic.ts
index e6b36de..aecec7b 100644
--- a/src/services/topic.ts
+++ b/src/services/topic.ts
@@ -94,6 +94,18 @@ export function getFollowUsersTopics(from: number) {
   })
 }
 
+/**
+ * 获取收藏的帖子
+ */
+export function getFavoriteTopics(from: number) {
+  return GET<ITopic[]>('topic/me/favorite', {
+    params: {
+      from,
+      size: 20,
+    },
+  })
+}
+
 /**
  * 搜索
  */
@@ -158,3 +170,10 @@ export function getMyRecentTopics(from: number) {
     },
   })
 }
+
+/**
+ * 获取帖子是否收藏
+ */
+export function getTopicFavorite(id: number | string) {
+  return GET<boolean>(`topic/${id}/isfavorite`)
+}
diff --git a/src/services/utils/errorHandler.ts b/src/services/utils/errorHandler.ts
index 130ca37..717798f 100644
--- a/src/services/utils/errorHandler.ts
+++ b/src/services/utils/errorHandler.ts
@@ -60,3 +60,11 @@ export function manageHandler(err: FetchError) {
     snackbar.error('服务器内部错误')
   }
 }
+
+export function favoriteHandler(err: FetchError) {
+  if (err.status === 401) {
+    snackbar.error('请先登录')
+  } else {
+    snackbar.error('操作失败')
+  }
+}
diff --git a/src/version.ts b/src/version.ts
index 441e9a7..f5fbf2e 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -2,4 +2,4 @@
  * 版本号
  */
 
-export default 'v1.1.0-beta'
+export default 'v1.2.2-beta'