diff --git a/src/components/StakingCoinCard.js b/src/components/StakingCoinCard.js
new file mode 100644
index 0000000..b6aa3b8
--- /dev/null
+++ b/src/components/StakingCoinCard.js
@@ -0,0 +1,55 @@
+import React from "react"
+import {
+    VStack, Image, Text, HStack,
+    Button, Flex, Slider,
+    SliderTrack, SliderFilledTrack,
+    useColorModeValue, Badge,
+} from "@chakra-ui/react"
+import { useTranslation } from 'react-i18next'
+
+export const StakingCoinCard = ({ symbol, icon, index, apy, vl, assets }) => {
+    const { t } = useTranslation()
+    const bg = useColorModeValue('white', 'gray.900')
+
+    return (
+        <VStack
+            position="relative"
+            w="full"
+            py="4"
+            px="8"
+            my="4"
+            bg={bg}
+            borderWidth="1px"
+            borderRadius="16"
+            align="center"
+            flex={1}
+        >
+            {/* title */}
+            <HStack
+                w="full"
+                justify="space-between"
+                align="center"
+                py="4"
+            >
+                <Text
+                    fontWeight="700"
+                >{symbol}</Text>
+
+                <Image
+                    w="8" h="8"
+                    borderRadius="50%"
+                    src={icon} alt={symbol}
+                />
+            </HStack>
+
+            {/* body */}
+            <VStack
+
+            >
+                <HStack>
+                    <Badge colorScheme="orange">Current</Badge>
+                </HStack>
+            </VStack>
+        </VStack>
+    )
+}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 4fdb0d1..56497dc 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -6,6 +6,7 @@ export * from './MiningListCard'
 export * from './Partners'
 export * from './Auditors'
 export * from './FarmCoinCard'
+export * from './StakingCoinCard'
 export * from './ColorModeSwitcher'
 export * from './Placeholder'
 export * from './Panel'
diff --git a/src/pages/Dao.js b/src/pages/Dao.js
index e69de29..a2b0341 100644
--- a/src/pages/Dao.js
+++ b/src/pages/Dao.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+export const Dao = () => {
+
+}
diff --git a/src/pages/Invite.js b/src/pages/Invite.js
index e69de29..a90dec1 100644
--- a/src/pages/Invite.js
+++ b/src/pages/Invite.js
@@ -0,0 +1,6 @@
+import React from "react"
+
+
+export const Invite = () => {
+
+}
\ No newline at end of file
diff --git a/src/pages/Staking.js b/src/pages/Staking.js
index 444234b..436bb93 100644
--- a/src/pages/Staking.js
+++ b/src/pages/Staking.js
@@ -7,7 +7,7 @@ import {
     useColorModeValue,
 } from "@chakra-ui/react"
 
-import { StateCard, FarmCoinCard } from "../components"
+import { StateCard, StakingCoinCard } from "../components"
 import { useApp } from "../AppContext"
 import { config } from "../config"
 import { ABI } from "../data"
@@ -40,22 +40,15 @@ export const Staking = () => {
     const withdrawalRef = React.useRef()
     const depositeRef = React.useRef()
 
-    const _getcoins = () => {
-        get_coins_staking().then(res => {
-            // setCoins(res.data)
-            console.log(res.data)
-        }).catch(err => {
-            console.error('get_coins_staking() error:' + err.message)
-        })
-    }
     const _getVaultBalance = () => {
         if (!app.balance) {
             return false
         }
 
         get_staking_balance(app.address).then((res) => {
-
-        },)
+            setBalance(res.data)
+            console.log(res.data)
+        })
     }
 
     const onWithdrawalConfirmed = () => {
@@ -161,27 +154,24 @@ export const Staking = () => {
     }
 
     React.useEffect(() => {
-        app.address && get_staking_balance(app.address).then(res => {
+        _getVaultBalance()
+
+        get_coins_staking().then(res => {
+            setCoins(res.data)
             console.log(res.data)
         }).catch(err => {
-            console.error('get_staking_balance() error:' + err.message)
-        })
-
-        get_coins_platform_all().then(res => {
-            setCoins(res.data)
-        }).catch(err => {
-            console.error('get_coins_platform_all() error:' + err.message)
+            console.error('get_coins_staking() error:' + err.message)
         })
 
         app.address && get_ether(app.address).then(res => {
             let list = ''
             let changed = false
             let _coins = [...coins]
-            res.data.result.forEach(r => {
-                if (r.from == app.address.toLowerCase() && r.isError == 0) {
-                    if (r.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') {
+            res.data.result.forEach(v => {
+                if (v.from == app.address.toLowerCase() && v.isError == 0) {
+                    if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') {
                         list += 'USDT|'
-                    } else if (r.to == '0xdac17f958d2ee523a2206206994597c13d831ec7') {
+                    } else if (v.to == '0xdac17f958d2ee523a2206206994597c13d831ec7') {
                         list += 'USDC|'
                     }
                 }
@@ -198,7 +188,6 @@ export const Staking = () => {
 
     return (
         <>
-
             <AspectRatio maxW="full" ratio={4 / 1} >
                 <Image h="20" borderRadius="5" src={Images.stakingBanner} alt="lock" />
             </AspectRatio>
@@ -229,7 +218,7 @@ export const Staking = () => {
 
                 coins && coins.map((coin, index) => (
 
-                    <FarmCoinCard
+                    <StakingCoinCard
                         key={coin.name}
                         index={index}
                         icon={config.ENDPOINT + 'upload/' + coin.name_img}