diff --git a/src/AppContext.js b/src/AppContext.js
index af37544..da4a2c1 100644
--- a/src/AppContext.js
+++ b/src/AppContext.js
@@ -43,9 +43,9 @@ export const AppContextProvider = ({ children }) => {
     ]
 
     const docItems = [
-        { name: t('announcement'), icon: '', path: '', enabled: true },
-        { name: t('faq'), icon: '', path: '', enabled: true },
-        { name: t('tutorial'), icon: '', path: '', enabled: true },
+        { name: t('announcement'), icon: '', path: '/ann', enabled: true },
+        { name: t('faq'), icon: '', path: '/faq', enabled: true },
+        { name: t('tutorial'), icon: '', path: '/tut', enabled: true },
     ]
 
     React.useEffect(() => {
diff --git a/src/pages/Farm.js b/src/pages/Farm.js
index d00f810..516bed2 100644
--- a/src/pages/Farm.js
+++ b/src/pages/Farm.js
@@ -18,6 +18,7 @@ import {
 } from "../api"
 import { approve, transfer } from '../lib'
 import { ModalBox } from '../components'
+import { ModalDeposite } from '../uimsg'
 
 let DEF_LOCK = {
     count: 0,
@@ -248,19 +249,12 @@ export const Farm = () => {
             </ModalBox>
 
             {/* deposite box */}
-            <ModalBox
-                title="Deposite"
+            <ModalDeposite
                 isOpen={isDepositeOpen}
                 onClose={onDepositeClose}
                 onConfirm={onDepositeConfirmed}
-                focusRef={depositeRef}
-            >
-                <Box>
-                    <FormControl>Amount</FormControl>
-                    <Input ref={depositeRef} placeholder="deposite amount" />
-                </Box>
-
-            </ModalBox>
+                ref={depositeRef}
+            />
         </>
     )
 }
\ No newline at end of file
diff --git a/src/pages/Staking.js b/src/pages/Staking.js
index 571a1df..e985c1c 100644
--- a/src/pages/Staking.js
+++ b/src/pages/Staking.js
@@ -11,6 +11,9 @@ import {
     StakingModalCertificate, ModalBox,
     VFStack, HFStack, HBetween,
 } from "../components"
+import {
+    ModalDeposite
+} from '../uimsg'
 import { useApp } from "../AppContext"
 import { config } from "../config"
 import { ABI, Images } from "../data"
@@ -22,6 +25,7 @@ import {
     get_authorization_one,
     get_authorization_search,
     retrieve_all,
+    get_upBalance,
 } from "../api"
 import { approve, transfer } from '../lib'
 import { useTranslation } from "react-i18next"
@@ -85,6 +89,7 @@ export const Staking = () => {
     const [coins, setCoins] = React.useState([])
     const [strategyIndex, setStrategyIndex] = React.useState(-1)
     const [certificateIndex, setCertificateIndex] = React.useState(-1)
+    const [depositeIndex, setDepositeIndex] = React.useState(-1)
 
     const app = useApp()
     const toast = useToast()
@@ -93,6 +98,9 @@ export const Staking = () => {
     const { isOpen: isOpenStrategy, onOpen: onOpenStrategy, onClose: onCloseStrategy } = useDisclosure()
     const { isOpen: isOpenCertificate, onOpen: onOpenCertificate, onClose: onCloseCertificate } = useDisclosure()
     const { isOpen: isOpenExtract, onOpen: onOpenExtract, onClose: onCloseExtract } = useDisclosure()
+    const { isOpen: isOpenDeposite, onOpen: onOpenDeposite, onClose: onCloseDeposite } = useDisclosure()
+
+    const refDepositeFocus = React.useRef()
 
     const { t } = useTranslation()
 
@@ -113,70 +121,151 @@ export const Staking = () => {
         onOpenStrategy()
     }
 
+    // click certificate / deposite button
     const onCertificate = (index) => {
         setCertificateIndex(index)
-        onOpenCertificate()
+        if (index < 0 || index >= coins.length) {
+            console.warning('index out of range')
+            return
+        }
+
+        if (coins[index].authorized) {
+            setDepositeIndex(prev => index)
+            onOpenDeposite()
+        } else {
+            onOpenCertificate()
+        }
     }
 
+    // ModalDeposite callback
+    const onConfirmDeposite = () => {
+        if (depositeIndex < 0 || depositeIndex >= coins.length) {
+            console.error(depositeIndex, ' out of range')
+            return
+        }
+
+        const amount = refDepositeFocus.current.value
+
+        transfer(ABI, coins[depositeIndex].address, app.appAddress, amount, app.address, (err, res) => {
+            if (!err) {
+                toast({
+                    title: 'Succeed',
+                    description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name,
+                    status: 'success',
+                    duration: 9000,
+                    isClosable: true,
+                })
+                // TODO 提交充值记录
+                get_upBalance(app.address).then(res => {
+
+                }).catch(err => {
+                    console.error('get_upBalance() error:' + err.message)
+                })
+            } else {
+                toast({
+                    title: 'Failed',
+                    description: "Your operation has not been completed.",
+                    status: 'info',
+                    duration: 9000,
+                    isClosable: true,
+                })
+                console.error('transfer() error:' + err.message)
+            }
+        })
+
+    }
+
+    // ModalExtract callback
     const onConfirmExtract = () => {
-        console.log('extract')
+        if (!app.address) {
+            toast({
+                title: 'Wallet not connected',
+                description: "Please connect your wallet first to perform the operation",
+                status: 'warning',
+                duration: 9000,
+                isClosable: true,
+            })
+            return
+        }
+
+        if (balance.USDT_T <= 0 && balance.USDC_T <= 0) {
+            toast({
+                title: '',
+                description: "Has no income",
+                status: 'info',
+                duration: 9000,
+                isClosable: true,
+            })
+            return
+        }
+
+        retrieve_all(app.address).then(res => {
+            _getVaultBalance()
+
+            toast({
+                title: 'Succeed',
+                description: "Operation succeed.",
+                status: 'success',
+                duration: 9000,
+                isClosable: true,
+            })
+        }).catch(err => {
+            console.error('retrieve_all() error:', err.message)
+        })
     }
 
-    // clicked Certificate
+    // Modal certificate callback
     const onConfirmCertificate = (index) => {
         if (index < 0 || index >= coins.length) {
             console.error('index out of range')
             return
         }
 
+        if (!app.address) {
+            toast({
+                title: 'Wallet not connected',
+                description: "Please connect your wallet first to perform the operation",
+                status: 'warning',
+                duration: 9000,
+                isClosable: true,
+            })
+            return
+        }
+
         let _coins = [...coins]
 
-        if (_coins[index].authorized) {
+        // make button loading
+        _coins[index].loading = true
+        setCoins(_coins)
 
-        } else {
-            if (!app.address) {
-                toast({
-                    title: 'Wallet not connected',
-                    description: "Please connect your wallet first to perform the operation",
-                    status: 'warning',
-                    duration: 9000,
-                    isClosable: true,
+        approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
+            _coins = [...coins]
+
+            if (!err) {
+                get_authorization_one(app.address, _coins[index].name, tx).then(res => {
+                    // we dont care the result
+                }).catch(err => {
+                    console.error('get_authorization_one() error:' + err.message)
                 })
-                return
-            }
-            // make button loading
-            _coins[index].loading = true
-            setCoins(_coins)
 
-            approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
-                _coins = [...coins]
+                //
+                let hi = setInterval(() => {
+                    get_authorization_search(tx).then(res => {
+                        _coins[index].authorized = true // for simple, we dont check the result.
+                        setCoins(_coins)
 
-                if (!err) {
-                    get_authorization_one(app.address, _coins[index].name, tx).then(res => {
-                        // we dont care the result
+                        clearInterval(hi)
                     }).catch(err => {
-                        console.error('get_authorization_one() error:' + err.message)
+                        console.error("get_authorization_search() error:" + err.message)
                     })
-
-                    //
-                    let hi = setInterval(() => {
-                        get_authorization_search(tx).then(res => {
-                            _coins[index].authorized = true // for simple, we dont check the result.
-                            setCoins(_coins)
-
-                            clearInterval(hi)
-                        }).catch(err => {
-                            console.error("get_authorization_search() error:" + err.message)
-                        })
-                    }, 8000)
-                } else {
-                    console.error("approve error:" + err.message)
-                }
-                // recover loading
-                _coins[index].loading = false
-                setCoins(_coins)
-            })
-        }
+                }, 8000)
+            } else {
+                console.error("approve error:" + err.message)
+            }
+            // recover loading
+            _coins[index].loading = false
+            setCoins(_coins)
+        })
     }
 
     React.useEffect(() => {
@@ -302,6 +391,15 @@ export const Staking = () => {
             />
 
             <ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
+
+            <ModalDeposite
+                isOpen={isOpenDeposite}
+                onClose={onCloseDeposite}
+                onConfirm={onConfirmDeposite}
+                ref={refDepositeFocus}
+            />
+
+            <ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
         </>
     )
 }
\ No newline at end of file
diff --git a/src/uimsg/ModalDeposite.js b/src/uimsg/ModalDeposite.js
new file mode 100644
index 0000000..eb2d89f
--- /dev/null
+++ b/src/uimsg/ModalDeposite.js
@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next"
+import { ModalBox } from "../components"
+import { Box, FormControl, Input } from "@chakra-ui/react"
+import React from "react"
+
+export const ModalDeposite = React.forwardRef((props, ref) => {
+    const { t } = useTranslation()
+
+    return (
+        <ModalBox
+            title={t('deposite')}
+            isOpen={props.isOpen}
+            onClose={props.onClose}
+            onConfirm={props.onConfirm}
+            focusRef={ref}
+        >
+            <Box>
+                <FormControl>Amount</FormControl>
+                <Input ref={ref} placeholder="deposite amount" />
+            </Box>
+
+        </ModalBox>
+    )
+}) 
\ No newline at end of file
diff --git a/src/uimsg/index.js b/src/uimsg/index.js
new file mode 100644
index 0000000..683815d
--- /dev/null
+++ b/src/uimsg/index.js
@@ -0,0 +1,2 @@
+export * from './ModalDeposite'
+export * from './toasts'
diff --git a/src/uimsg/toasts.js b/src/uimsg/toasts.js
new file mode 100644
index 0000000..b169b95
--- /dev/null
+++ b/src/uimsg/toasts.js
@@ -0,0 +1,18 @@
+
+const toast = (t, content = '', title = '', duration = 9000, status = 'warning') => {
+    t({
+        title: title,
+        description: content,
+        status: status,
+        duration: duration,
+        isClosable: true,
+    })
+}
+
+export const toastw = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration)
+
+export const toasti = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'info')
+
+export const toasts = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'success')
+
+export const toaste = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'error')