diff --git a/src/App.tsx b/src/App.tsx
index f3312bc..97d56bb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -48,6 +48,7 @@ const Pool = lazy(() => import('./views/Pool'))
 const PoolFinder = lazy(() => import('./views/PoolFinder'))
 const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
+const Board = lazy(() => import('./views/Board'))
 
 // This config is required for number formatting
 BigNumber.config({
@@ -89,6 +90,9 @@ const App: React.FC = () => {
             <Route path="/referral">
               <Referral />
             </Route>
+            <Route path="/board">
+              <Board />
+            </Route>
             {/* <Route path="/lottery">
               <Lottery />
             </Route>
diff --git a/src/config/constants/cacheKey.ts b/src/config/constants/cacheKey.ts
index 1b23abc..43d23fb 100644
--- a/src/config/constants/cacheKey.ts
+++ b/src/config/constants/cacheKey.ts
@@ -1,4 +1,4 @@
 export const CACHE_TOKEN = 'token'
-export const CACHE_USERIFNO = 'userInfo'
+export const CACHE_USERINFO = 'userInfo'
 export const CACHE_ACCOUNT = 'account'
 export const CACHE_INVITE_CODE = 'inviteCode'
diff --git a/src/config/index.ts b/src/config/index.ts
index b5ece89..169479d 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -33,3 +33,4 @@ export const LOTTERY_TICKET_PRICE = 1
 export const DEFAULT_TOKEN_DECIMAL = BIG_TEN.pow(18)
 export const DEFAULT_GAS_LIMIT = 200000
 export const DEFAULT_GAS_PRICE = 5
+export const TOKEN_SYMBOL = 'HCC'
diff --git a/src/state/hooks.ts b/src/state/hooks.ts
index 761e54f..fdb8c23 100644
--- a/src/state/hooks.ts
+++ b/src/state/hooks.ts
@@ -206,18 +206,18 @@ export const useBoards = (): Boards[] => {
 }
 
 export const useBoardsFromPid = (pid): Boards => {
-  const node = useSelector((state: State) => state.boards.data.find((p) => p.pid === pid))
-  return node
+  const board = useSelector((state: State) => state.boards.data.find((p) => p.pid === pid))
+  return board
 }
 
-export const useNodeUser = (pid) => {
-  const node = useBoardsFromPid(pid)
+export const useBoardUser = (pid) => {
+  const board = useBoardsFromPid(pid)
   return {
-    allowance: node.userData ? new BigNumber(node.userData.allowance) : new BigNumber(0),
-    tokenBalance: node.userData ? new BigNumber(node.userData.tokenBalance) : new BigNumber(0),
-    stakedBalance: node.userData ? new BigNumber(node.userData.stakedBalance) : new BigNumber(0),
-    unlockTime: node.userData ? node.userData.unlockTime : 0,
-    xCandyBalance: node.userData ? node.userData.xCandyBalance : 0,
+    allowance: board.userData ? new BigNumber(board.userData.allowance) : new BigNumber(0),
+    tokenBalance: board.userData ? new BigNumber(board.userData.tokenBalance) : new BigNumber(0),
+    stakedBalance: board.userData ? new BigNumber(board.userData.stakedBalance) : new BigNumber(0),
+    unlockTime: board.userData ? board.userData.unlockTime : 0,
+    xCandyBalance: board.userData ? board.userData.xCandyBalance : 0,
   }
 }
 // cake
diff --git a/src/state/userInfo/index.ts b/src/state/userInfo/index.ts
index b5277fa..6a3496a 100644
--- a/src/state/userInfo/index.ts
+++ b/src/state/userInfo/index.ts
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import { queryUserInfo } from 'services/user'
-import { CACHE_TOKEN, CACHE_ACCOUNT, CACHE_USERIFNO } from 'config/constants/cacheKey'
+import { CACHE_TOKEN, CACHE_ACCOUNT, CACHE_USERINFO } from 'config/constants/cacheKey'
 import multicall from 'utils/multicall'
 // import inviteAbi from 'config/abi/invite.json'
 // import { getInviteAddress } from 'utils/addressHelpers'
@@ -39,7 +39,7 @@ export const userInfoSlice = createSlice({
       state.account = info.address
       info.token && (state.token = info.token)
       localStorage.setItem(CACHE_TOKEN, state.token)
-      localStorage.setItem(CACHE_USERIFNO, JSON.stringify(info))
+      localStorage.setItem(CACHE_USERINFO, JSON.stringify(info))
       localStorage.setItem(CACHE_ACCOUNT, info.address)
     },
     clearUserInfo: (state) => {
@@ -47,14 +47,14 @@ export const userInfoSlice = createSlice({
       state.account = ''
       state.token = ''
       localStorage.removeItem(CACHE_TOKEN)
-      localStorage.removeItem(CACHE_USERIFNO)
+      localStorage.removeItem(CACHE_USERINFO)
       localStorage.removeItem(CACHE_ACCOUNT)
     },
   },
   extraReducers: (builder) => {
     builder.addCase(fetchUserInfo.fulfilled, (state, action) => {
       state.userInfo = action.payload
-      localStorage.setItem(CACHE_USERIFNO, JSON.stringify(state.userInfo))
+      localStorage.setItem(CACHE_USERINFO, JSON.stringify(state.userInfo))
     })
     // .addCase(fetchUserInviteInfo.fulfilled, (state, action) => {
     //   state.userInfo = { ...state.userInfo, invite_reward: action.payload }
diff --git a/src/views/Board/components/BoardCard/BoardCard.tsx b/src/views/Board/components/BoardCard/BoardCard.tsx
index 4f107f2..ee5949f 100644
--- a/src/views/Board/components/BoardCard/BoardCard.tsx
+++ b/src/views/Board/components/BoardCard/BoardCard.tsx
@@ -4,7 +4,7 @@ import styled, { keyframes } from 'styled-components'
 import { Flex, Text, Skeleton } from '@pancakeswap/uikit'
 import { provider as ProviderType } from 'web3-core'
 import { getBoardAddress } from 'utils/addressHelpers'
-import useI18n from 'hooks/useI18n'
+import { useTranslation } from 'contexts/Localization'
 import ExpandableSectionButton from 'components/ExpandableSectionButton'
 import DetailsSection from './DetailsSection'
 import CardHeading from './CardHeading'
@@ -63,7 +63,7 @@ const FCard = styled.div`
 `
 
 const Divider = styled.div`
-  background-color: ${({ theme }) => theme.colors.borderColor};
+  background-color: ${({ theme }) => theme.colors.cardBorder};
   height: 1px;
   margin: 28px auto;
   width: 100%;
@@ -75,22 +75,22 @@ const ExpandingWrapper = styled.div<{ expanded: boolean }>`
 `
 
 interface NodeCardProps {
-  node: any
+  board: any
   removed: boolean
   provider?: ProviderType
   account?: string
 }
 
-const NodeCard: React.FC<NodeCardProps> = ({ node, account }) => {
-  const TranslateString = useI18n()
+const NodeCard: React.FC<NodeCardProps> = ({ board, account }) => {
+  const { t } = useTranslation()
 
   const [showExpandableSection, setShowExpandableSection] = useState(false)
 
   return (
     <FCard>
       {/* {true && <StyledCardAccent />} */}
-      <CardHeading name={TranslateString(node.stringId, node.name)} img={node.img} tokenSymbol={node.tokenSymbol} />
-      <CardActionsContainer node={node} account={account} />
+      <CardHeading name={t(board.name)} img={board.img} tokenSymbol={board.tokenSymbol} />
+      <CardActionsContainer node={board} account={account} />
       <Divider />
       <ExpandableSectionButton
         onClick={() => setShowExpandableSection(!showExpandableSection)}
@@ -99,7 +99,7 @@ const NodeCard: React.FC<NodeCardProps> = ({ node, account }) => {
       <ExpandingWrapper expanded={showExpandableSection}>
         <DetailsSection
           bscScanAddress={`${process.env.REACT_APP_NETWORK_URL}/address/${getBoardAddress()}`}
-          totalValueFormated={node.tokenBalance || '-'}
+          totalValueFormated={board.tokenBalance || '-'}
         />
       </ExpandingWrapper>
     </FCard>
diff --git a/src/views/Board/components/BoardCard/CardActionsContainer.tsx b/src/views/Board/components/BoardCard/CardActionsContainer.tsx
index 26bee58..eb4a0b4 100644
--- a/src/views/Board/components/BoardCard/CardActionsContainer.tsx
+++ b/src/views/Board/components/BoardCard/CardActionsContainer.tsx
@@ -3,16 +3,15 @@ import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { provider as ProviderType } from 'web3-core'
 import { getAddress } from 'utils/addressHelpers'
-import { getBep20Contract } from 'utils/contractHelpers'
 import { Button, Flex, Text } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
 import { Boards } from 'state/types'
 import { useBoardUser } from 'state/hooks'
-import { TOKEN_SYMBOL2 } from 'config/index'
+import { TOKEN_SYMBOL } from 'config/index'
 import { getBalanceNumber } from 'utils/formatBalance'
-import useI18n from 'hooks/useI18n'
-import useWeb3 from 'hooks/useWeb3'
-import { useNodeApprove } from 'hooks/useApprove'
+import { useERC20 } from 'hooks/useContract'
 import UnlockButton from 'components/UnlockButton'
+import useApproveBoard from '../../hooks/useApproveBoard'
 import StakeAction from './StakeAction'
 
 const Action = styled.div`
@@ -26,16 +25,14 @@ interface NodeCardActionsProps {
 }
 
 const CardActions: React.FC<NodeCardActionsProps> = ({ node, account }) => {
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
   const [requestedApproval, setRequestedApproval] = useState(false)
   const pid = node.pid
   const { allowance, tokenBalance, stakedBalance, xCandyBalance } = useBoardUser(pid)
   const isApproved = account && allowance && allowance.isGreaterThan(0)
-  const web3 = useWeb3()
-  const tokenAddress = getAddress(node.tokenAddresses)
-  const tokenContract = getBep20Contract(tokenAddress, web3)
+  const tokenContract = useERC20(getAddress(node.tokenAddresses))
 
-  const { onApprove } = useNodeApprove(tokenContract)
+  const { onApprove } = useApproveBoard(tokenContract)
 
   const handleApprove = useCallback(async () => {
     try {
@@ -54,10 +51,10 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ node, account }) => {
         <Flex flexDirection="column" alignItems="flex-start" mt="10">
           <Flex>
             <Text bold textTransform="uppercase" color="secondary" fontSize="12px" pr="3px">
-              {TOKEN_SYMBOL2}
+              {TOKEN_SYMBOL}
             </Text>
             <Text color="textSubtle" fontSize="12px">
-              {TranslateString(101018, 'Amount')}
+              {t('Amount')}
             </Text>
           </Flex>
           <Text bold textTransform="uppercase" fontSize="20px">
@@ -67,7 +64,7 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ node, account }) => {
       </>
     ) : (
       <Button mt="8px" width="100%" disabled={requestedApproval} onClick={handleApprove}>
-        {TranslateString(758, 'Approve Contract')}
+        {t('Approve Contract')}
       </Button>
     )
   }
@@ -79,7 +76,7 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ node, account }) => {
           {node.tokenSymbol}
         </Text>
         <Text bold textTransform="uppercase" color="textSubtle" fontSize="12px">
-          {TranslateString(101004, 'Staked')}
+          {t('Staked')}
         </Text>
       </Flex>
       {!account ? <UnlockButton mt="8px" width="100%" /> : renderApprovalOrStakeButton()}
diff --git a/src/views/Board/components/BoardCard/CardHeading.tsx b/src/views/Board/components/BoardCard/CardHeading.tsx
index 452d8bd..3494372 100644
--- a/src/views/Board/components/BoardCard/CardHeading.tsx
+++ b/src/views/Board/components/BoardCard/CardHeading.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Tag, Flex, Heading, Image } from '@pancakeswap/uikit'
 import Question from 'components/QuestionHelper'
-import useI18n from 'hooks/useI18n'
+import { useTranslation } from 'contexts/Localization'
 
 export interface ExpandableSectionProps {
   name?: string
@@ -18,15 +18,13 @@ const Wrapper = styled(Flex)`
 `
 
 const CardHeading: React.FC<ExpandableSectionProps> = ({ name, img, tokenSymbol }) => {
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
   return (
     <Wrapper justifyContent="space-between" alignItems="center" mb="12px">
       <Image src={`/images/nodes/${img}.png`} width={64} height={64} />
       <Flex>
         <Heading mb="4px">{name}</Heading>
-        <Question
-          text={TranslateString(101017, 'To join board, you need to stake at least 0.1% total supply of Token')}
-        />
+        <Question text={t('To join board, you need to stake at least 0.1% total supply of Token')} />
       </Flex>
     </Wrapper>
   )
diff --git a/src/views/Board/components/BoardCard/DetailsSection.tsx b/src/views/Board/components/BoardCard/DetailsSection.tsx
index f59e684..808848f 100644
--- a/src/views/Board/components/BoardCard/DetailsSection.tsx
+++ b/src/views/Board/components/BoardCard/DetailsSection.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import useI18n from 'hooks/useI18n'
+import { useTranslation } from 'contexts/Localization'
 import styled from 'styled-components'
 import { Text, Flex, Link, LinkExternal } from '@pancakeswap/uikit'
 
@@ -29,18 +29,18 @@ const StyledLinkExternal = styled(LinkExternal)`
 `
 
 const DetailsSection: React.FC<ExpandableSectionProps> = ({ bscScanAddress, removed, totalValueFormated }) => {
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
 
   return (
     <Wrapper>
       <Flex justifyContent="space-between">
-        <Text>{TranslateString(101010, 'Total Staked')}:</Text>
+        <Text>{t('Total Staked')}:</Text>
         <Text>{totalValueFormated}</Text>
       </Flex>
       {/* )} */}
       <Flex justifyContent="flex-start">
         <Link external href={bscScanAddress} bold={false}>
-          {TranslateString(356, 'View on BscScan')}
+          {t( 'View on BscScan')}
         </Link>
       </Flex>
     </Wrapper>
diff --git a/src/views/Board/components/BoardCard/StakeAction.tsx b/src/views/Board/components/BoardCard/StakeAction.tsx
index 8cbabe5..4558aa6 100644
--- a/src/views/Board/components/BoardCard/StakeAction.tsx
+++ b/src/views/Board/components/BoardCard/StakeAction.tsx
@@ -1,16 +1,17 @@
 import React, { useMemo } from 'react'
-import dayjs from 'dayjs'
+// import dayjs from 'dayjs'
 import styled from 'styled-components'
 import BigNumber from 'bignumber.js'
 import { Button, Flex, Heading, IconButton, AddIcon, MinusIcon, useModal } from '@pancakeswap/uikit'
-import useI18n from 'hooks/useI18n'
-import { useNodeStake } from 'hooks/useStake'
-import { useNodeUnstake } from 'hooks/useUnstake'
-import { NODE_UNLOCK_TIME } from 'config/index'
-import { getBalanceNumber, getFullDisplayBalance } from 'utils/formatBalance'
+
+// import { NODE_UNLOCK_TIME } from 'config/index'
+import { getBalanceNumber } from 'utils/formatBalance'
 import { useBoardsFromPid } from 'state/hooks'
+import { useTranslation } from 'contexts/Localization'
 import useToast from 'hooks/useToast'
 import DepositModal from '../DepositModal'
+import useStakeBoard from '../../hooks/useStakeBoard'
+import useUnstakeBoard from '../../hooks/useUnstakeBoard'
 import WithdrawModal from '../WithdrawModal'
 
 interface NodeCardActionsProps {
@@ -28,10 +29,10 @@ const IconButtonWrapper = styled.div`
 `
 
 const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalance, tokenName, pid }) => {
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
   const { toastWarning } = useToast()
-  const { onStake } = useNodeStake(pid)
-  const { onUnstake } = useNodeUnstake(pid)
+  const { onStake } = useStakeBoard(pid)
+  const { onUnstake } = useUnstakeBoard(pid)
   const { tokenDecimals = 18, minStakeAmount, userData } = useBoardsFromPid(pid)
   const rawStakedBalance = getBalanceNumber(stakedBalance, tokenDecimals, 8)
   const minStakedAmount = useMemo(() => {
@@ -51,25 +52,25 @@ const StakeAction: React.FC<NodeCardActionsProps> = ({ stakedBalance, tokenBalan
     <WithdrawModal max={stakedBalance} tokenDecimals={tokenDecimals} onConfirm={onUnstake} tokenName={tokenName} />,
   )
   const handleUnstake = () => {
-    const unstakeDay = new Date().getDay()
-    const unlockTime = userData.unlockTime * 1000
-    // 只能周五解锁 NEED CHANGE
-    if (unstakeDay !== NODE_UNLOCK_TIME || unlockTime > new Date().getTime()) {
-      toastWarning(
-        TranslateString(101012, 'Unlock time'),
-        `${dayjs(unlockTime).format('YYYY-MM-DD HH:mm')} Next Friday`, // NEED CHANGE
-      )
-      return
-    }
-    if (new BigNumber(userData.stakedBalance).toJSON() !== new BigNumber(userData.xCandyBalance).toJSON()) {
-      toastWarning(TranslateString(100103, 'Hint'), TranslateString(101019, 'Unlocking conditions are not met'))
-      return
-    }
-    onUnstake()
+    // const unstakeDay = new Date().getDay()
+    // const unlockTime = userData.unlockTime * 1000
+    // // 只能周五解锁 NEED CHANGE
+    // if (unstakeDay !== NODE_UNLOCK_TIME || unlockTime > new Date().getTime()) {
+    //   toastWarning(
+    //     TranslateString(101012, 'Unlock time'),
+    //     `${dayjs(unlockTime).format('YYYY-MM-DD HH:mm')} Next Friday`, // NEED CHANGE
+    //   )
+    //   return
+    // }
+    // if (new BigNumber(userData.stakedBalance).toJSON() !== new BigNumber(userData.xCandyBalance).toJSON()) {
+    //   toastWarning(TranslateString(100103, 'Hint'), TranslateString(101019, 'Unlocking conditions are not met'))
+    //   return
+    // }
+    // onUnstake()
   }
   const renderStakingButtons = () => {
     return rawStakedBalance === 0 ? (
-      <Button onClick={onPresentDeposit}>{TranslateString(999, `Stake Token`)}</Button>
+      <Button onClick={onPresentDeposit}>{t(`Stake Token`)}</Button>
     ) : (
       <IconButtonWrapper>
         <IconButton variant="tertiary" onClick={handleUnstake} mr="6px">
diff --git a/src/views/Board/components/DepositModal.tsx b/src/views/Board/components/DepositModal.tsx
index 73a9e0d..60c47b1 100644
--- a/src/views/Board/components/DepositModal.tsx
+++ b/src/views/Board/components/DepositModal.tsx
@@ -1,10 +1,9 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Button, Modal, LinkExternal } from '@pancakeswap/uikit'
-import ModalActions from 'components/ModalActions'
-import ModalInput from 'components/ModalInput'
-import useI18n from 'hooks/useI18n'
-import { useToast } from 'state/hooks'
+import { ModalActions, ModalInput } from 'components/Modal'
+import { useTranslation } from 'contexts/Localization'
+import useToast from 'hooks/useToast'
 import { getFullDisplayBalance } from 'utils/formatBalance'
 
 interface DepositModalProps {
@@ -26,10 +25,10 @@ const DepositModal: React.FC<DepositModalProps> = ({
   tokenName = '',
   addLiquidityUrl,
 }) => {
-  const { toastWarning } = useToast()
+  const { toastSuccess, toastError, toastWarning } = useToast()
   const [val, setVal] = useState('')
   const [pendingTx, setPendingTx] = useState(false)
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
   const fullBalance = useMemo(() => {
     return getFullDisplayBalance(max, tokenDecimals)
   }, [max, tokenDecimals])
@@ -46,7 +45,7 @@ const DepositModal: React.FC<DepositModalProps> = ({
   }, [fullBalance, setVal])
 
   return (
-    <Modal title={TranslateString(101004, 'Stake tokens')} onDismiss={onDismiss}>
+    <Modal title={t('Stake tokens')} onDismiss={onDismiss}>
       <ModalInput
         value={val}
         onSelectMax={handleSelectMax}
@@ -54,34 +53,41 @@ const DepositModal: React.FC<DepositModalProps> = ({
         max={fullBalance}
         symbol={tokenName}
         addLiquidityUrl={addLiquidityUrl}
-        inputTitle={TranslateString(101004, 'Stake')}
+        inputTitle={t('Stake')}
       />
       <ModalActions>
         <Button variant="secondary" onClick={onDismiss} width="100%">
-          {TranslateString(462, 'Cancel')}
+          {t('Cancel')}
         </Button>
         <Button
           width="100%"
           disabled={pendingTx || fullBalance === '0' || val === '0'}
           onClick={async () => {
             if (Number(val) < min.toNumber()) {
-              toastWarning(
-                TranslateString(100103, 'Hint'),
-                `${TranslateString(101011, 'At least stake ')}${min.toNumber()}`,
-              )
+              toastWarning(t('Hint'), `${t('At least stake ')}${min.toNumber()}`)
               return
             }
             setPendingTx(true)
-            await onConfirm(val)
-            setPendingTx(false)
-            onDismiss()
+            try {
+              await onConfirm(val)
+              toastSuccess(t('Staked!'), t('Your funds have been staked in the farm'))
+              onDismiss()
+            } catch (e) {
+              toastError(
+                t('Error'),
+                t('Please try again. Confirm the transaction and make sure you are paying enough gas!'),
+              )
+              console.error(e)
+            } finally {
+              setPendingTx(false)
+            }
           }}
         >
-          {pendingTx ? TranslateString(488, 'Pending Confirmation') : TranslateString(464, 'Confirm')}
+          {pendingTx ? t('Pending Confirmation') : t('Confirm')}
         </Button>
       </ModalActions>
       <LinkExternal href={addLiquidityUrl} style={{ alignSelf: 'center' }}>
-        {TranslateString(100102, 'Get')} {tokenName}
+        {t('Get %symbol%', { symbol: tokenName })}
       </LinkExternal>
     </Modal>
   )
diff --git a/src/views/Board/components/WithdrawModal.tsx b/src/views/Board/components/WithdrawModal.tsx
index 48b2659..2e49ee3 100644
--- a/src/views/Board/components/WithdrawModal.tsx
+++ b/src/views/Board/components/WithdrawModal.tsx
@@ -1,9 +1,10 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Button, Modal } from '@pancakeswap/uikit'
-import ModalActions from 'components/ModalActions'
-import ModalInput from 'components/ModalInput'
-import useI18n from 'hooks/useI18n'
+import useToast from 'hooks/useToast'
+
+import { ModalActions, ModalInput } from 'components/Modal'
+import { useTranslation } from 'contexts/Localization'
 import { getFullDisplayBalance } from 'utils/formatBalance'
 
 interface WithdrawModalProps {
@@ -23,11 +24,14 @@ const WithdrawModal: React.FC<WithdrawModalProps> = ({
 }) => {
   const [val, setVal] = useState('')
   const [pendingTx, setPendingTx] = useState(false)
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
   const fullBalance = useMemo(() => {
-    return getFullDisplayBalance(max, tokenDecimals)
-  }, [max, tokenDecimals])
+    return getFullDisplayBalance(max)
+  }, [max])
+  const { toastSuccess, toastError } = useToast()
 
+  const valNumber = new BigNumber(val)
+  const fullBalanceNumber = new BigNumber(fullBalance)
   const handleChange = useCallback(
     (e: React.FormEvent<HTMLInputElement>) => {
       setVal(e.currentTarget.value)
@@ -40,30 +44,40 @@ const WithdrawModal: React.FC<WithdrawModalProps> = ({
   }, [fullBalance, setVal])
 
   return (
-    <Modal title={TranslateString(101008, 'Unstake tokens')} onDismiss={onDismiss}>
+    <Modal title={t('Unstake LP tokens')} onDismiss={onDismiss}>
       <ModalInput
         onSelectMax={handleSelectMax}
         onChange={handleChange}
         value={val}
         max={fullBalance}
         symbol={tokenName}
-        inputTitle={TranslateString(588, 'Unstake')}
+        inputTitle={t('Unstake')}
       />
       <ModalActions>
-        <Button variant="secondary" onClick={onDismiss} width="100%">
-          {TranslateString(462, 'Cancel')}
+        <Button variant="secondary" onClick={onDismiss} width="100%" disabled={pendingTx}>
+          {t('Cancel')}
         </Button>
         <Button
-          disabled={pendingTx}
+          disabled={pendingTx || !valNumber.isFinite() || valNumber.eq(0) || valNumber.gt(fullBalanceNumber)}
           onClick={async () => {
             setPendingTx(true)
-            await onConfirm(val)
-            setPendingTx(false)
-            onDismiss()
+            try {
+              await onConfirm(val)
+              toastSuccess(t('Unstaked!'), t('Your earnings have also been harvested to your wallet'))
+              onDismiss()
+            } catch (e) {
+              toastError(
+                t('Error'),
+                t('Please try again. Confirm the transaction and make sure you are paying enough gas!'),
+              )
+              console.error(e)
+            } finally {
+              setPendingTx(false)
+            }
           }}
           width="100%"
         >
-          {pendingTx ? TranslateString(488, 'Pending Confirmation') : TranslateString(464, 'Confirm')}
+          {pendingTx ? t('Pending Confirmation') : t('Confirm')}
         </Button>
       </ModalActions>
     </Modal>
diff --git a/src/views/Board/hooks/useApproveBoard.ts b/src/views/Board/hooks/useApproveBoard.ts
new file mode 100644
index 0000000..d5f5a8e
--- /dev/null
+++ b/src/views/Board/hooks/useApproveBoard.ts
@@ -0,0 +1,20 @@
+import { useCallback } from 'react'
+import { ethers, Contract } from 'ethers'
+import { useBoardchef } from 'hooks/useContract'
+
+const useApproveBoard = (lpContract: Contract) => {
+  const boardChefContract = useBoardchef()
+  const handleApprove = useCallback(async () => {
+    try {
+      const tx = await lpContract.approve(boardChefContract.address, ethers.constants.MaxUint256)
+      const receipt = await tx.wait()
+      return receipt.status
+    } catch (e) {
+      return false
+    }
+  }, [lpContract, boardChefContract])
+
+  return { onApprove: handleApprove }
+}
+
+export default useApproveBoard
diff --git a/src/views/Board/hooks/useHarvestBoard.ts b/src/views/Board/hooks/useHarvestBoard.ts
new file mode 100644
index 0000000..f0908ff
--- /dev/null
+++ b/src/views/Board/hooks/useHarvestBoard.ts
@@ -0,0 +1,15 @@
+import { useCallback } from 'react'
+import { harvestFarm } from 'utils/calls'
+import { useBoardchef } from 'hooks/useContract'
+
+const useHarvestBoard = (boardPid: number) => {
+  const boardChefContract = useBoardchef()
+
+  const handleHarvest = useCallback(async () => {
+    await harvestFarm(boardChefContract, boardPid)
+  }, [boardPid, boardChefContract])
+
+  return { onReward: handleHarvest }
+}
+
+export default useHarvestBoard
diff --git a/src/views/Board/hooks/useStakeBoard.ts b/src/views/Board/hooks/useStakeBoard.ts
index edfbe46..58e3ed5 100644
--- a/src/views/Board/hooks/useStakeBoard.ts
+++ b/src/views/Board/hooks/useStakeBoard.ts
@@ -1,19 +1,19 @@
-export const useNodeStake = (pid: number) => {
-  const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const nodeChefContract = useNodechef()
-  const { tokenDecimals = 18 } = useNodesFromPid(pid)
+import { useCallback } from 'react'
+import { stakeFarm } from 'utils/calls'
+import { useBoardchef } from 'hooks/useContract'
+
+const useStakeBoard = (pid: number) => {
+  const boardChefContract = useBoardchef()
+
   const handleStake = useCallback(
     async (amount: string) => {
-      const txHash = await nodeStake(nodeChefContract, amount, account, tokenDecimals)
-      // dispatch(fetchFarmsPublicDataAsync())
-      // dispatch(fetchFarmUserDataAsync(account))
+      const txHash = await stakeFarm(boardChefContract, pid, amount)
       console.info(txHash)
     },
-    [account, dispatch, nodeChefContract, tokenDecimals],
+    [boardChefContract, pid],
   )
 
   return { onStake: handleStake }
 }
 
-export default useNodeStake
+export default useStakeBoard
diff --git a/src/views/Board/hooks/useUnstakeBoard.ts b/src/views/Board/hooks/useUnstakeBoard.ts
new file mode 100644
index 0000000..6e2f2b2
--- /dev/null
+++ b/src/views/Board/hooks/useUnstakeBoard.ts
@@ -0,0 +1,18 @@
+import { useCallback } from 'react'
+import { unstakeFarm } from 'utils/calls'
+import { useBoardchef } from 'hooks/useContract'
+
+const useUnstakeBoard = (pid: number) => {
+  const boardChefContract = useBoardchef()
+
+  const handleUnstake = useCallback(
+    async (amount: string) => {
+      await unstakeFarm(boardChefContract, pid, amount)
+    },
+    [boardChefContract, pid],
+  )
+
+  return { onUnstake: handleUnstake }
+}
+
+export default useUnstakeBoard
diff --git a/src/views/Board/index.tsx b/src/views/Board/index.tsx
index ec5ce2a..126e07b 100644
--- a/src/views/Board/index.tsx
+++ b/src/views/Board/index.tsx
@@ -10,7 +10,7 @@ import Page from 'components/Layout/Page'
 import { useBoards } from 'state/hooks'
 import useRefresh from 'hooks/useRefresh'
 import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
-import useI18n from 'hooks/useI18n'
+import { useTranslation } from 'contexts/Localization'
 import BoardCard from './components/BoardCard/BoardCard'
 
 const Header = styled.div`
@@ -28,7 +28,7 @@ const SecondText = styled(Text)`
   white-space: break-spaces;
 `
 const Farms: React.FC = () => {
-  const TranslateString = useI18n()
+  const { t } = useTranslation()
   const boardsList = useBoards()
   const [query, setQuery] = useState('')
   const { account } = useWeb3React()
@@ -63,11 +63,10 @@ const Farms: React.FC = () => {
     <>
       <Header>
         <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
-          {TranslateString(100004, 'Boards')}
+          {t('Boards')}
         </Heading>
         <SecondText fontSize="28px" color="text">
-          {TranslateString(
-            101013,
+          {t(
             'Joining the board of directors will obtain the governance token xcandy \n participate in the governance of the project, vote, obtain additional pledge income, \n and have a higher invitation airdrop reward',
           )}
         </SecondText>