diff --git a/build.zip b/build.zip
new file mode 100644
index 0000000..41ad158
Binary files /dev/null and b/build.zip differ
diff --git a/src/services/referral.ts b/src/services/referral.ts
index acc5c0a..341a4c2 100644
--- a/src/services/referral.ts
+++ b/src/services/referral.ts
@@ -30,7 +30,7 @@ export const getWithdrawRewardParams = () => {
 export const checkBuyResult = (params) => {
   return request.request({
     url: '/high_city/app/api/invite/commander/tx',
-    method: 'post',
+    method: 'get',
     params,
   })
 }
diff --git a/src/views/Referral/components/BuyNftModal.tsx b/src/views/Referral/components/BuyNftModal.tsx
index 1f6a53b..5216787 100644
--- a/src/views/Referral/components/BuyNftModal.tsx
+++ b/src/views/Referral/components/BuyNftModal.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import React, { useEffect, useState } 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 } from '@pancakeswap/uikit'
+import { Flex, Button, Modal, Image, Text } from '@pancakeswap/uikit'
 import BuyActions from './BuyActions'
 import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
-  width: 80%;
+  width: 60%;
 
   ${({ theme }) => theme.mediaQueries.xs} {
   }
@@ -43,6 +43,20 @@ const ImageDiv = styled(Image)`
     height: 300px;
   }
 `
+const TextDiv = styled(Text)`
+  width: 240px;
+  height: 45px;
+  background: #d7caec;
+  border: 1px solid #d7caec;
+  opacity: 0.5;
+  border-radius: 23px;
+  font-size: 18px;
+  color: #280d5f;
+  padding-left: 15px;
+  display: flex;
+  align-items: center;
+`
+
 interface BuyNftModalProps {
   onDismiss?: () => void
 }
@@ -50,15 +64,29 @@ const BuyNftModal: React.FC<BuyNftModalProps> = ({ onDismiss }) => {
   const { t } = useTranslation()
   const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
   const referralRewardInfo = useReferralNormalConfigInfo()
+  const [price, setPrice] = useState('')
+
+  useEffect(() => {
+    const priceList = []
+    referralCommanderConfigInfo?.properties?.price &&
+      Object.keys(referralCommanderConfigInfo?.properties?.price).forEach((item) => {
+        priceList.push(`${item}:${referralCommanderConfigInfo?.properties?.price[item]}`)
+      })
+    setPrice(priceList.join(' - '))
+  }, [referralCommanderConfigInfo])
+
   return (
     <ModalDiv title={`${t('purchase')}${referralRewardInfo.properties?.name}`} onDismiss={onDismiss}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
-        <ImageDiv
-          src={referralCommanderConfigInfo.properties?.cover as string}
-          width={250}
-          height={250}
-          marginBottom="20px"
-        />
+        <Flex flexDirection="column" justifyContent="center">
+          <ImageDiv
+            src={referralCommanderConfigInfo.properties?.cover as string}
+            width={250}
+            height={250}
+            marginBottom="20px"
+          />
+          <TextDiv>{price}</TextDiv>
+        </Flex>
         {/* <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" /> */}
         <InfoDiv>
           <TextFlex
diff --git a/src/views/Referral/components/Connected.tsx b/src/views/Referral/components/Connected.tsx
index a4eebc4..165a048 100644
--- a/src/views/Referral/components/Connected.tsx
+++ b/src/views/Referral/components/Connected.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { useDispatch } from 'react-redux'
 import { fetchReferralInfoAsync } from 'state/actions'
@@ -61,18 +61,21 @@ const ConnectedCom: React.FC = () => {
   const account = useAccount()
   const { t } = useTranslation()
   const [onBuyModal] = useModal(<BuyNftModal />)
+  const [gain, getGain] = useState(true)
   const referralNormalConfigInfo = useReferralNormalConfigInfo()
   const referralRewardInfo = useReferralRewardInfo()
+
   const [loading, setLoading] = useState(false)
   const withdraw = useWithdraw()
   const { toastSuccess } = useToast()
   const handleWithdraw = async () => {
     setLoading(true)
     try {
-      await withdraw()
       dispatch(fetchReferralInfoAsync(account))
+      await withdraw()
       setLoading(false)
       toastSuccess(t('Successfully claimed!'))
+      getGain(false)
     } catch (error) {
       setLoading(false)
     }
@@ -85,12 +88,12 @@ const ConnectedCom: React.FC = () => {
         <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo?.inviteReward || 0}(HCC)`} />
         <FlexCom
           name={t('To get profit')}
-          value={`${referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive || 0}(HCC)`}
+          value={`${gain ? referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive || 0 : 0}(HCC)`}
         />
       </>
       <FooterBtn>
         {referralNormalConfigInfo?.receiveLimit <=
-        referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
+          referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? (
           <ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
             {t('Claim now')}
           </ButtonGet>
diff --git a/src/views/Referral/index.tsx b/src/views/Referral/index.tsx
index 7484254..f3fcbb4 100644
--- a/src/views/Referral/index.tsx
+++ b/src/views/Referral/index.tsx
@@ -24,7 +24,7 @@ const ContentDiv = styled.div`
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;
 
-  ${({ theme }) => theme.mediaQueries.sm} {
+  /* ${({ theme }) => theme.mediaQueries.sm} {
     width: 60%;
   }
 
@@ -32,8 +32,8 @@ const ContentDiv = styled.div`
     width: 60%;
   }
   ${({ theme }) => theme.mediaQueries.xs} {
-    width: 90%;
-  }
+    width: 60%;
+  } */
 `
 
 const Nft: React.FC = () => {