diff --git a/build.zip b/build.zip
new file mode 100644
index 0000000..699f67f
Binary files /dev/null and b/build.zip differ
diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json
index 73379b1..0eb35b9 100644
--- a/public/locales/zh-CN.json
+++ b/public/locales/zh-CN.json
@@ -1141,5 +1141,9 @@
   "Please enter a number": "请输入数字",
   "my wallet": "我的钱包",
   "Copy the address": "复制地址",
-  "How to use": "如何使用"
+  "How to use": "如何使用",
+  "person": "人",
+  "Earnings will be cleared after forced cancellation. Confirm cancellation": "强制取消后收益将清空，是否确认取消",
+  "HighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
+  "After pledge, income will lock warehouse%times%": "质押后，收益将锁仓%times%"
 }
diff --git a/src/config/constants/contracts.ts b/src/config/constants/contracts.ts
index 33a4039..9bbf5f5 100644
--- a/src/config/constants/contracts.ts
+++ b/src/config/constants/contracts.ts
@@ -8,7 +8,7 @@ export default {
     56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
   },
   boardChef: {
-    97: '0xe477990fc68d93472e2cc4b1aae21fe30f602c9a',
+    97: '0xb4451b4f3cb37dd31abf9876b4325e595c11f302',
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约
   },
   boardRewardChef: {
@@ -16,7 +16,7 @@ export default {
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会分红合约
   },
   holderChef: {
-    97: '0xa319dfdab0d4ed9a82f6bf85cc94e7d260ac0859',
+    97: '0x8faafb4ba8945917e7fe024dbbad0a5fb1da2181',
     56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 持币人
   },
   holderRewardChef: {
diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json
index f5a49f9..96e89e0 100644
--- a/src/config/localization/translations.json
+++ b/src/config/localization/translations.json
@@ -1268,5 +1268,9 @@
   "Please enter a number": "Please enter a number",
   "my wallet": "my wallet",
   "Copy the address": "Copy the address",
-  "How to use": "How to use"
+  "How to use": "How to use",
+  "person": "person",
+  "Earnings will be cleared after forced cancellation. Confirm cancellation": "Earnings will be cleared after forced cancellation. Confirm cancellation",
+  "HighCitySwapInfo": "HIighCitySwap was born from the fanatical pursuit of blockchain technology by its founder Liu Bus, who always believes that blockchain technology can be applied more widely. For this reason, he made a brave decision to give up investment in other fields and focus on the practice and application of blockchain technology. He fused his familiar field -- Internet social interaction with blockchain technology and thus HighCitySwap was born. This is our beginning, thank you for your support, the HighCity team will always move forward.",
+  "After pledge, income will lock warehouse%times%": "After pledge, income will lock warehouse%times%"
 }
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index ea6142f..6008e44 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -36,7 +36,7 @@ const useAuth = () => {
           } else {
             window.localStorage.removeItem(connectorLocalStorageKey)
             if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) {
-              toastError(t('Provider Error'), t('No provider was found'))
+              toastError(t('Provider Error'))
             } else if (
               error instanceof UserRejectedRequestErrorInjected ||
               error instanceof UserRejectedRequestErrorWalletConnect
diff --git a/src/services/board.ts b/src/services/board.ts
new file mode 100644
index 0000000..fbb8ff9
--- /dev/null
+++ b/src/services/board.ts
@@ -0,0 +1,10 @@
+import request from 'utils/request'
+
+export const getBaseConfig = () => {
+  return request.request({
+    url: '/high_city/app/api/base/config',
+    method: 'get',
+  })
+}
+
+export default getBaseConfig
diff --git a/src/services/referral.ts b/src/services/referral.ts
index 341a4c2..d728e98 100644
--- a/src/services/referral.ts
+++ b/src/services/referral.ts
@@ -34,5 +34,11 @@ export const checkBuyResult = (params) => {
     params,
   })
 }
+export const getContract = () => {
+  return request.request({
+    url: '/high_city/app/api/contract',
+    method: 'get',
+  })
+}
 
 export default getReferralRewardInfo
diff --git a/src/views/Board/components/BoardCard/CardActionsContainer.tsx b/src/views/Board/components/BoardCard/CardActionsContainer.tsx
index 85db750..3092b9b 100644
--- a/src/views/Board/components/BoardCard/CardActionsContainer.tsx
+++ b/src/views/Board/components/BoardCard/CardActionsContainer.tsx
@@ -90,7 +90,7 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, accountData }) =>
             {t('Staked')}
           </Text>
         </Flex> */}
-        <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} />
+        <HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} board={board} />
         <StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} board={board} />
         {/* <Flex flexDirection="column" alignItems="flex-start" mt="10"> */}
         {/* <Text color="textSubtle" fontSize="12px">
diff --git a/src/views/Board/components/BoardCard/HarvestAction.tsx b/src/views/Board/components/BoardCard/HarvestAction.tsx
index 015bd90..beee83c 100644
--- a/src/views/Board/components/BoardCard/HarvestAction.tsx
+++ b/src/views/Board/components/BoardCard/HarvestAction.tsx
@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js'
 import { Button, Flex, Heading } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { useAppDispatch } from 'state'
+import { Boards } from 'state/types'
 import { fetchFarmUserDataAsync } from 'state/farms'
 import useToast from 'hooks/useToast'
 import { getBalanceAmount } from 'utils/formatBalance'
@@ -16,9 +17,10 @@ import useHarvestBoard from '../../hooks/useHarvestBoard'
 interface FarmCardActionsProps {
   earnings?: BigNumber
   pid?: number
+  board?: Boards
 }
 
-const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid }) => {
+const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid, board }) => {
   const { account } = useWeb3React()
   const { toastSuccess, toastError } = useToast()
   const { t } = useTranslation()
@@ -29,6 +31,7 @@ const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid }) => {
   const rawEarningsBalance = account ? getBalanceAmount(earnings) : BIG_ZERO
   const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN)
   const earningsBusd = rawEarningsBalance ? rawEarningsBalance.multipliedBy(cakePrice).toNumber() : 0
+  const unlockTime = board.userData.unlockTime * 1000
 
   return (
     <Flex width="100%" marginTop={25} justifyContent="space-between" alignItems="center">
@@ -40,7 +43,7 @@ const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid }) => {
       </Flex> */}
       <Button
         width="100%"
-        disabled={rawEarningsBalance.eq(0) || pendingTx}
+        disabled={rawEarningsBalance.eq(0) || pendingTx || (unlockTime > new Date().getTime() && board.pid === 1)}
         onClick={async () => {
           setPendingTx(true)
           try {
diff --git a/src/views/Board/components/BoardCard/StakeAction.tsx b/src/views/Board/components/BoardCard/StakeAction.tsx
index ba511b4..fd3b76c 100644
--- a/src/views/Board/components/BoardCard/StakeAction.tsx
+++ b/src/views/Board/components/BoardCard/StakeAction.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import styled from 'styled-components'
 import BigNumber from 'bignumber.js'
@@ -7,6 +7,7 @@ import { getBalanceNumber } from 'utils/formatBalance'
 import { Boards } from 'state/types'
 import { useBoardsFromPid } from 'state/hooks'
 import { useTranslation } from 'contexts/Localization'
+import { getBaseConfig } from 'services/board'
 import useToast from 'hooks/useToast'
 import DepositModal from '../DepositModal'
 import AffirmModal from '../AffirmModal'
@@ -46,8 +47,44 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
     const minAmount = minStakeAmount - getBalanceNumber(userData.stakedBalance, tokenDecimals)
     return minAmount < 0 ? new BigNumber(0) : new BigNumber(minAmount)
   }, [userData, minStakeAmount, tokenDecimals])
+  const [unlockTimeTxt, setUnlockTimeTxt] = useState('')
+
+  const onBaseConfig = async () => {
+    const times = await getBaseConfig()
+    formatSeconds(Number(times))
+  }
+
+  const formatSeconds = (value: number) => {
+    console.log('value:', value)
+    const second = value
+    //  分
+    let minute: any = 0
+    //  如果秒数大于60，将秒数转换成整数
+    if (second > 60) {
+      // 获取分钟，除以60取整数，得到整数分钟
+      minute = second / 60
+      console.log(parseInt(minute))
+      // 获取秒数，秒数取佘，得到整数秒数
+      const ss = second % 60
+      // 如果分钟大于60，将分钟转换成小时
+      if (minute > 60) {
+        // 获取小时，获取分钟除以60，得到整数小时
+        const hh = minute / 60
+        // 获取小时后取佘的分，获取分钟除以60取佘的分
+        const mm = minute % 60
+        setUnlockTimeTxt(`${parseInt(hh.toString())}:${parseInt(mm.toString())}:${parseInt(ss.toString())}`)
+      }
+    } else {
+      setUnlockTimeTxt(second.toString())
+    }
+  }
+  useEffect(() => {
+    onBaseConfig()
+  }, [])
   const [onPresentDeposit] = useModal(
     <DepositModal
+      board={board}
+      time={unlockTimeTxt}
       max={tokenBalance}
       tokenDecimals={tokenDecimals}
       min={minStakedAmount}
@@ -68,6 +105,7 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
       onUnstake()
     }
   }
+
   const [onPresentAffirm] = useModal(
     <AffirmModal
       title={
@@ -77,6 +115,13 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
             : t('Forced to cancel')
           : t('Cancel the pledge')
       }
+      content={
+        board.pid === 1
+          ? board.userData?.unlockTime * 1000 <= new Date().getTime()
+            ? t('Cancel the pledge')
+            : t('Earnings will be cleared after forced cancellation. Confirm cancellation')
+          : t('Cancel the pledge')
+      }
       handSubmit={handleUnstake}
     />,
   )
diff --git a/src/views/Board/components/DepositModal.tsx b/src/views/Board/components/DepositModal.tsx
index d9c2ad5..6b28d36 100644
--- a/src/views/Board/components/DepositModal.tsx
+++ b/src/views/Board/components/DepositModal.tsx
@@ -1,10 +1,11 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useMemo, useState } from 'react'
-import { Button, Modal, LinkExternal } from '@pancakeswap/uikit'
+import { Button, Modal, LinkExternal, Text } from '@pancakeswap/uikit'
 import { ModalActions, ModalInput } from 'components/Modal'
 import { useTranslation } from 'contexts/Localization'
 import useToast from 'hooks/useToast'
 import { getFullDisplayBalance } from 'utils/formatBalance'
+import { Boards } from 'state/types'
 
 interface DepositModalProps {
   min: BigNumber
@@ -14,6 +15,8 @@ interface DepositModalProps {
   tokenName?: string
   tokenDecimals?: number
   addLiquidityUrl?: string
+  time?: string
+  board?: Boards
 }
 
 const DepositModal: React.FC<DepositModalProps> = ({
@@ -24,6 +27,8 @@ const DepositModal: React.FC<DepositModalProps> = ({
   tokenDecimals = 18,
   tokenName = '',
   addLiquidityUrl,
+  time,
+  board,
 }) => {
   const regNumber = /^\d+(\.\d+)?$/
   const { toastSuccess, toastError, toastWarning } = useToast()
@@ -44,9 +49,11 @@ const DepositModal: React.FC<DepositModalProps> = ({
   const handleSelectMax = useCallback(() => {
     setVal(fullBalance)
   }, [fullBalance, setVal])
-
   return (
     <Modal title={t('pledge')} onDismiss={onDismiss}>
+      {time && board?.pid === 1 && (
+        <Text marginBottom={20}>{t('After pledge, income will lock warehouse%times%', { times: time })}</Text>
+      )}
       <ModalInput
         value={val}
         onSelectMax={handleSelectMax}
diff --git a/src/views/Board/index.tsx b/src/views/Board/index.tsx
index b3bef64..6707114 100644
--- a/src/views/Board/index.tsx
+++ b/src/views/Board/index.tsx
@@ -25,6 +25,8 @@ import HeaderItem from './components/HeaderItem'
 
 const PageContent = styled.div`
   background-image: url('/images/recommend/bg.svg');
+  background-repeat: no-repeat;
+  background-size: cover;
 `
 
 const Header = styled.div`
@@ -93,7 +95,6 @@ const Boards: React.FC = () => {
     let waitWithdrawAmountValue = 0
     let totalReward = 0
     boardsData.forEach((item) => {
-      console.log(item)
       total += item.curAmount
       totalReward += item.totalReward
       waitWithdrawAmountValue += item.waitWithdrawAmount
diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx
index 0987278..8d64e91 100644
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
@@ -40,6 +40,7 @@ const FlexMain = styled(Flex)`
 
 const CardDiv = styled(Card)`
   padding: 10px 20px;
+  width: 350px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -48,51 +49,55 @@ const CardDiv = styled(Card)`
 const CourseCom: React.FC = () => {
   const { t } = useTranslation()
 
-  const [list, setListState] = useState([
-    {
-      title: t('Stage one: Origin'),
-      id: 1,
-      list: [
-        { text: t('The project concept was born in May 2021') },
-        { text: t('Set up HighCity team in June 2021') },
-        { text: t('May 2021 -- January 2022 Team run-in') },
-      ],
-    },
-    {
-      title: t('Stage two: Action'),
-      id: 2,
-      list: [
-        {
-          text: t(
-            'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
-          ),
-        },
-        { text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') },
-      ],
-    },
-    {
-      title: t('Stage three: Creation'),
-      id: 3,
-      list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }],
-    },
-    {
-      title: t('Stage four: Integration'),
-      id: 4,
-      list: [
-        { text: t('Launch of social software in December 2022') },
-        { text: t('December 2022 NFT bonus binding social software') },
-        { text: t('In December 2022, HighCity Ecology was preliminarily completed') },
-      ],
-    },
-    {
-      title: t('Stage five: Closing the curtain'),
-      id: 5,
-      list: [
-        { text: t('HighCity Ecology completed in December 2022') },
-        { text: t('Maintain dividend income growth in December 2022') },
-      ],
-    },
-  ])
+  const [list, setListState] = useState([])
+
+  useEffect(() => {
+    setListState([
+      {
+        title: t('Stage one: Origin'),
+        id: 1,
+        list: [
+          { text: t('The project concept was born in May 2021') },
+          { text: t('Set up HighCity team in June 2021') },
+          { text: t('May 2021 -- January 2022 Team run-in') },
+        ],
+      },
+      {
+        title: t('Stage two: Action'),
+        id: 2,
+        list: [
+          {
+            text: t(
+              'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
+            ),
+          },
+          { text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') },
+        ],
+      },
+      {
+        title: t('Stage three: Creation'),
+        id: 3,
+        list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }],
+      },
+      {
+        title: t('Stage four: Integration'),
+        id: 4,
+        list: [
+          { text: t('Launch of social software in December 2022') },
+          { text: t('December 2022 NFT bonus binding social software') },
+          { text: t('In December 2022, HighCity Ecology was preliminarily completed') },
+        ],
+      },
+      {
+        title: t('Stage five: Closing the curtain'),
+        id: 5,
+        list: [
+          { text: t('HighCity Ecology completed in December 2022') },
+          { text: t('Maintain dividend income growth in December 2022') },
+        ],
+      },
+    ])
+  }, [t])
 
   return (
     <>
diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx
index 5578556..1cc5179 100644
--- a/src/views/Home/components/FristCom.tsx
+++ b/src/views/Home/components/FristCom.tsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux'
 import { uccnDetail, indexInfo } from 'services/user'
 import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
+import { usePriceHccUsdt } from 'state/hooks'
 import { OutLink } from 'types/user'
 
 import FlexItemCom from './FlexItemCom'
@@ -139,6 +140,7 @@ const FristCom: React.FC = () => {
     volume: '',
     market: 0,
   })
+  const hccPriceUsdt = usePriceHccUsdt()
   const [linkList, setLinkList] = useState([])
 
   const getDetail = async () => {
@@ -199,7 +201,7 @@ const FristCom: React.FC = () => {
           <ScoreDiv>
             <FlexItemCom name={t('Number of holders')} valueNum={detail?.userCount} />
             <FlexItemCom name={t('Your volume')} valueNum={detail?.volume} />
-            <FlexItemCom name={t('market value')} valueNum={detail?.market} />
+            <FlexItemCom name={t('market value')} valueNum={detail?.market * Number(hccPriceUsdt) || 0} />
             {/* {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />
             })} */}
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx
index 60a2e80..0420955 100644
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@@ -96,7 +96,7 @@ const IntroduceCom: React.FC = () => {
   return (
     <>
       <FirstPage>
-        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+        <StyledPage px={['16px', '24px']} mx="auto">
           <BoxMain>
             <MainDiv>
               <div>
diff --git a/src/views/Referral/components/BuyNftModal.tsx b/src/views/Referral/components/BuyNftModal.tsx
index 2dc9a96..b5f143f 100644
--- a/src/views/Referral/components/BuyNftModal.tsx
+++ b/src/views/Referral/components/BuyNftModal.tsx
@@ -1,9 +1,10 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import styled from 'styled-components'
 import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
 import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks'
 import { Flex, Button, Modal, Image, Text } from '@pancakeswap/uikit'
+import { getContract } from 'services/referral'
 import BuyActions from './BuyActions'
 import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
@@ -44,17 +45,15 @@ const ImageDiv = styled(Image)`
   }
 `
 const TextDiv = styled(Text)`
-  width: 240px;
+  text-align: center;
   height: 45px;
-  background: #d7caec;
-  border: 1px solid #d7caec;
   opacity: 0.5;
   border-radius: 23px;
-  font-size: 18px;
+  font-size: 26px;
   color: #280d5f;
-  padding-left: 15px;
   display: flex;
   align-items: center;
+  justify-content: center;
 `
 
 interface BuyNftModalProps {
@@ -65,7 +64,15 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
   const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
   const referralRewardInfo = useReferralNormalConfigInfo()
   const [price, setPrice] = useState('')
+  const [link, setLink] = useState('')
 
+  const onContract = async () => {
+    const data = await getContract()
+    setLink(data)
+  }
+  useEffect(() => {
+    onContract()
+  }, [])
   useMemo(() => {
     const priceList = []
     referralCommanderConfigInfo?.properties?.price &&
@@ -85,7 +92,7 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
             height={250}
             marginBottom="20px"
           />
-          <TextDiv>{price}</TextDiv>
+          <TextDiv textAlign="center">{price}</TextDiv>
         </Flex>
         {/* <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" /> */}
         <InfoDiv>
@@ -103,9 +110,13 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
             name={t('Secondary split ratio')}
             value={`${referralCommanderConfigInfo.dividendSecond as number}%`}
           />
-          <FlexCom name={t('Contract address')} value={t('Contract address')} />
-          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
-          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
+          <FlexCom
+            name={t('Contract address')}
+            typeLink={`https://bscscan.com/token/${link}`}
+            value={`${link && link.substring(0, 6)}...${link && link.substring(link.length - 4, link.length)}`}
+          />
+          <FlexCom name={t('Assets agreement')} value="ERC721" />
+          <FlexCom name={t('Assets and chain')} value="BSC" />
         </InfoDiv>
       </Flex>
       <BuyActions />
diff --git a/src/views/Referral/components/Connected.tsx b/src/views/Referral/components/Connected.tsx
index 165a048..725af50 100644
--- a/src/views/Referral/components/Connected.tsx
+++ b/src/views/Referral/components/Connected.tsx
@@ -84,7 +84,7 @@ const ConnectedCom: React.FC = () => {
     <MainDiv>
       <HeaderMain title={t('recommend')} />
       <>
-        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum || 0}(人)`} />
+        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo?.inviteNum || 0}(${t('person')})`} />
         <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward || 0}(HCC)`} />
         <FlexCom
           name={t('To get profit')}
diff --git a/src/views/Referral/components/FlexCom.tsx b/src/views/Referral/components/FlexCom.tsx
index 3ac05e5..5f0e878 100644
--- a/src/views/Referral/components/FlexCom.tsx
+++ b/src/views/Referral/components/FlexCom.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Flex, Text } from '@pancakeswap/uikit'
+import { Flex, Text, Link } from '@pancakeswap/uikit'
 
 interface FlexProps {
   name: string
@@ -8,6 +8,7 @@ interface FlexProps {
   paddings?: string
   leftColor?: string
   rightColor?: string
+  typeLink?: string
 }
 
 const FlexDiv = styled(Flex)`
@@ -15,17 +16,34 @@ const FlexDiv = styled(Flex)`
   align-items: center;
   margin-top: 20px;
 `
+const TextLink = styled(Text)`
+  border-bottom: 1px solid #7a6eaa;
+  cursor: pointer;
+`
+
 const FlexCom: React.FC<FlexProps> = ({
   name,
   value,
   paddings = '0px',
   leftColor = 'text',
   rightColor = 'textSubtle',
+  typeLink,
 }) => {
+  const openPage = () => {
+    console.log(typeLink)
+    window.open(typeLink)
+  }
+
   return (
     <FlexDiv style={{ padding: paddings }}>
       <Text color={leftColor}>{name}</Text>
-      <Text color={rightColor}>{value}</Text>
+      {typeLink ? (
+        <TextLink color={rightColor} onClick={openPage}>
+          {value}
+        </TextLink>
+      ) : (
+        <Text color={rightColor}>{value}</Text>
+      )}
     </FlexDiv>
   )
 }
diff --git a/src/views/Referral/components/Regimental.tsx b/src/views/Referral/components/Regimental.tsx
index 6c4f45d..14a2ec5 100644
--- a/src/views/Referral/components/Regimental.tsx
+++ b/src/views/Referral/components/Regimental.tsx
@@ -108,7 +108,10 @@ const RegimentalCom: React.FC = () => {
         </LogoImage>
 
         <>
-          <FlexCom name={t('The lower the number of')} value={`${(referralRewardInfo.inviteNum as number) || 0}(人)`} />
+          <FlexCom
+            name={t('The lower the number of')}
+            value={`${(referralRewardInfo.inviteNum as number) || 0}(${t('person')})`}
+          />
           <FlexCom name={t('total revenue')} value={`${(referralRewardInfo.inviteReward as number) || 0}(HCC)`} />
           <FlexCom
             name={t('revenue')}