diff --git a/src/views/Nft/component/FlexText.tsx b/src/views/Nft/component/FlexText.tsx
new file mode 100644
index 0000000..5c22e49
--- /dev/null
+++ b/src/views/Nft/component/FlexText.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+// import SearchInput from 'components/SearchInput'
+import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
+
+export default function FlexText({name,value}){
+
+    return(
+        <Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
+            <Text color='#6B6472' fontSize="14px">{ name }：</Text>
+            <Text color='#1FC7D4' fontSize="14px">{ value }</Text>
+        </Flex>
+    )
+
+}
\ No newline at end of file
diff --git a/src/views/Nft/component/StepCom.tsx b/src/views/Nft/component/StepCom.tsx
new file mode 100644
index 0000000..e3fd125
--- /dev/null
+++ b/src/views/Nft/component/StepCom.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Text, Flex, Image } from '@pancakeswap/uikit'
+
+export default function StepCom(){
+
+    const [valNumber, setInputState] = useState(1)
+
+    const onAdd = (type) => {
+        if (type === 'add') {
+           setInputState(valNumber + 1)
+       } else {
+           if (valNumber === 0) return
+           setInputState(valNumber - 1)
+       }
+       
+   }
+
+    return(
+        <Flex justifyContent="space-between" alignItems='center' width={120}>
+            <Image src='/images/nft/sub-icon.png' alt="" onClick={() => onAdd('sub')} width={25} height={25} />
+            <Text width={60} textAlign='center' color='#2F3748' fontSize="16px">{valNumber}</Text>
+            <Image src='/images/nft/add-icon.png' alt="1" onClick={() => onAdd('add')} width={25} height={25} />
+        </Flex>
+    )
+
+}
\ No newline at end of file
diff --git a/src/views/Nft/index.tsx b/src/views/Nft/index.tsx
index 3b99031..49cfe61 100644
--- a/src/views/Nft/index.tsx
+++ b/src/views/Nft/index.tsx
@@ -5,6 +5,12 @@ import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
 
+
+import FlexText from './component/FlexText'
+// import Step from './component/Step'
+
+import StepCom from './component/StepCom'
+
 import 'swiper/swiper.min.css'
 
 import 'swiper/components/pagination/pagination.min.css';
@@ -75,11 +81,8 @@ const Divs = styled.div`
     background: ${({ theme }) => theme.colors.gradients.bubblegum};
 `
 
-const DetailInfo = styled.div`
+const DetailInfo = styled(Flex)`
   padding:0 21px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   margin-top:24px;
 `
 
@@ -105,17 +108,7 @@ const SwiperDiv = styled(Swiper)`
 
 
 const Nft: React.FC = () => {
-    const [valNumber, setInputState] = useState(1)
     const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
-    const onAdd = (type) => {
-         if (type === 'add') {
-            setInputState(valNumber + 1)
-        } else {
-            if (valNumber === 0) return
-            setInputState(valNumber - 1)
-        }
-        
-    }
 
     return (
         <MainDiv>
@@ -132,37 +125,24 @@ const Nft: React.FC = () => {
                                         <Flex justifyContent='center' marginTop="-40px">
                                             <BlindboxImage src='/images/nft/blindbox.png' alt="" width={377} height={367} />
                                         </Flex>
-                                        <DetailInfo>
-                                            <Text color='#999' fontSize="18px">系列</Text>
-                                            <Text color='#2F3748' fontSize="16px">法式盛宴</Text>
+                                        <DetailInfo justifyContent='space-between' alignItems='center'>
+                                            <Text color='textSubtle'>系列</Text>
+                                            <Text color='text'>法式盛宴</Text>
                                         </DetailInfo>
-                                        <DetailInfo>
-                                            <Text color='#999' fontSize="18px">价格</Text>
-                                            <Flex alignItems='center'>
+                                        <DetailInfo justifyContent='space-between' alignItems='center'>
+                                            <Text color='textSubtle'>价格</Text>
+                                            <Flex alignItems='center' justifyContent="flex-end">
                                                 <Text color='#1FC7D4' fontSize="24px">500</Text>
-                                                <Text color='#2F3748' fontSize="16px">黄油</Text>
+                                                <Text color='text'>黄油</Text>
                                             </Flex>
                                         </DetailInfo>
-                                        <DetailInfo>
-                                            <Text color='#999' fontSize="18px">数量</Text>
-                                            <Flex justifyContent="space-between" alignItems='center' width={120}>
-                                                <Image src='/images/nft/sub-icon.png' alt="" onClick={() => onAdd('sub')} width={25} height={25} />
-                                                <Text width={60} textAlign='center' color='#2F3748' fontSize="16px">{valNumber}</Text>
-                                                <Image src='/images/nft/add-icon.png' alt="1" onClick={() => onAdd('add')} width={25} height={25} />
-                                            </Flex>
+                                        <DetailInfo justifyContent='space-between' alignItems='center'>
+                                            <Text color='textSubtle'>数量</Text>
+                                            <StepCom />
                                         </DetailInfo>
-                                        <Flex justifyContent="flex-end" alignItems='center' marginTop={12} padding="0 21px">
-                                            <Text color='#6B6472' fontSize="14px">钱包中的 BUTTER：</Text>
-                                            <Text color='#1FC7D4' fontSize="14px">0</Text>
-                                        </Flex>
-                                        <Flex justifyContent="flex-end" alignItems='center' marginTop={12} padding="0 21px">
-                                            <Text color='#6B6472' fontSize="14px">回收点数抵扣：</Text>
-                                            <Text color='#1FC7D4' fontSize="14px">0</Text>
-                                        </Flex>
-                                        <Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
-                                            <Text color='#6B6472' fontSize="14px">实际黄油成本：</Text>
-                                            <Text color='#1FC7D4' fontSize="14px">0</Text>
-                                        </Flex>
+                                        <FlexText name="钱包中的 BUTTER" value="0"  />
+                                        <FlexText name="回收点数抵扣" value="0"  />
+                                        <FlexText name="实际黄油成本" value="0"  />
                                     </BodyWrapper>
                                 </Divs>
                             </StyledPage>