diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx
index c01f851..2cd2109 100644
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
+import { Flex, Heading, Text, Box, Stepper, Step, Card, CardBody } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
@@ -36,80 +36,9 @@ const FlexMain = styled(Flex)`
     justify-content: center;
   }
 `
-const SortDiv = styled.div`
-  height: 190px;
-  position: relative;
 
-  ${({ theme }) => theme.mediaQueries.xs} {
-    height: 330px;
-    & > .card-content {
-      left: 20px;
-      width: 300px;
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    height: 190px;
-    :nth-of-type(odd) {
-      & > .card-content {
-        width: 372px;
-        left: 60px;
-      }
-    }
-
-    :nth-of-type(even) {
-      & > .card-content {
-        width: 372px;
-        left: -420px;
-      }
-    }
-  }
-`
-
-const SortNum = styled.div`
-  position: absolute;
-  top: 0;
-  left: -43px;
-  width: 82px;
-  height: 82px;
-  background: #1fc7d4;
-  border-radius: 50%;
-  font-size: 46px;
-  color: #faf9fa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-
-  ${({ theme }) => theme.mediaQueries.xs} {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    font-size: 26px;
-    top: 0;
-    left: -23px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    position: absolute;
-    width: 82px;
-    height: 82px;
-    font-size: 46px;
-    top: 0;
-    left: -43px;
-  }
-`
-
-const CardDiv = styled.div`
-  width: 372px;
-  box-sizing: border-box;
-  padding: 28px 40px 16px 26px;
-  border: 1px solid #e7e3eb;
-  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 25px;
-  position: absolute;
-  top: -25%;
-  background: #fff;
+const CardDiv = styled(Card)`
+  padding: 20px;
 `
 
 const CourseCom: React.FC = () => {
@@ -167,14 +96,11 @@ const CourseCom: React.FC = () => {
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <FlexMain>
             <div>
-              {list.map((item, index) => {
-                return (
-                  <SortDiv
-                    key={item.id}
-                    style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
-                  >
-                    <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
-                    <CardDiv className="card-content">
+              <Stepper>
+                {list.map((item, index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Step key={index} index={index} status={index % 2 ? 'past' : 'current'}>
+                    <CardDiv>
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -184,9 +110,9 @@ const CourseCom: React.FC = () => {
                         )
                       })}
                     </CardDiv>
-                  </SortDiv>
-                )
-              })}
+                  </Step>
+                ))}
+              </Stepper>
             </div>
           </FlexMain>
         </StyledPage>
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx
index 61dd480..c05626a 100644
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
   background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`
diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx
new file mode 100644
index 0000000..5acf3c2
--- /dev/null
+++ b/src/views/recommend/components/BuyNftModal.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
+import TextFlex from './TextFlex'
+import FlexCom from './FlexCom'
+
+const ModalDiv = styled(Modal)`
+  width: 80%;
+`
+
+const InfoDiv = styled.div`
+  box-sizing: border-box;
+  padding: 30px 26px;
+  margin-left: 60px;
+  box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
+  ${({ theme }) => theme.mediaQueries.xs} {
+    padding: 20px 10px;
+    margin-left: 0;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 30px 26px;
+    margin-left: 60px;
+  }
+`
+const UpBtn = styled(Button)`
+  width: 50%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+const ImageDiv = styled(Image)`
+  width: 300px;
+  height: 300px;
+  margin-bottom: 20px;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 150px;
+    height: 150px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 300px;
+    height: 300px;
+  }
+`
+
+const BuyNftModal: React.FC = () => {
+  const { t } = useTranslation()
+
+  // const onDismiss = () => {}
+  return (
+    <ModalDiv title={t('Buy commander NFT')}>
+      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+        <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
+        <InfoDiv>
+          <TextFlex
+            text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
+            color="#FEFDF1"
+          />
+          <TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
+          <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
+          <FlexCom name={t('First stage sharing ratio')} value="10％" />
+          <FlexCom name={t('Secondary split ratio')} value="5％" />
+          <FlexCom name={t('Contract address')} value={t('Contract address')} />
+          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
+          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
+        </InfoDiv>
+      </Flex>
+
+      <Flex>
+        <UpBtn>{t('Buy It Now')}</UpBtn>
+      </Flex>
+    </ModalDiv>
+  )
+}
+export default BuyNftModal
diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx
new file mode 100644
index 0000000..3ac05e5
--- /dev/null
+++ b/src/views/recommend/components/FlexCom.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, Text } from '@pancakeswap/uikit'
+
+interface FlexProps {
+  name: string
+  value: string
+  paddings?: string
+  leftColor?: string
+  rightColor?: string
+}
+
+const FlexDiv = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+`
+const FlexCom: React.FC<FlexProps> = ({
+  name,
+  value,
+  paddings = '0px',
+  leftColor = 'text',
+  rightColor = 'textSubtle',
+}) => {
+  return (
+    <FlexDiv style={{ padding: paddings }}>
+      <Text color={leftColor}>{name}</Text>
+      <Text color={rightColor}>{value}</Text>
+    </FlexDiv>
+  )
+}
+export default FlexCom
diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx
new file mode 100644
index 0000000..f5f8a4e
--- /dev/null
+++ b/src/views/recommend/components/HeaderMain.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Image, Heading } from '@pancakeswap/uikit'
+
+interface HeaderProp {
+  title: string
+}
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
+
+const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
+  return (
+    <HeadingDiv scale="xl" mb="24px" textAlign="center">
+      {title}
+    </HeadingDiv>
+  )
+}
+export default HeaderMian
diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx
new file mode 100644
index 0000000..fd732a1
--- /dev/null
+++ b/src/views/recommend/components/TextFlex.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex } from '@pancakeswap/uikit'
+
+interface TextProps {
+  color: string
+  text?: string
+}
+
+const MainDiv = styled(Flex)`
+  box-sizing: border-box;
+  padding: 14px 36px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  color: #2f2e41;
+  font-size: 14px;
+  justify-content: center;
+`
+
+const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
+  return <MainDiv style={{ background: color }}>{text}</MainDiv>
+}
+export default TextFlex
diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx
new file mode 100644
index 0000000..7d4c6f9
--- /dev/null
+++ b/src/views/recommend/index.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import UnunitedCom from './components/UnunitedCom'
+import ConnectedCom from './components/Connected'
+import RegimentalCom from './components/Regimental'
+
+const MainDiv = styled.div`
+  min-height: calc(100vh - 64px);
+  background-image: url('/images/recommend/bg.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ContengDiv = styled.div`
+  width: 60%;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  border-radius: 40px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 60%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 60%;
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 90%;
+  }
+`
+
+const Recommend: React.FC = () => {
+  //  邀请false普通邀请 true军团长邀请
+  const [type, typeState] = useState(false)
+  //  是否连接钱包
+  const [status, statusState] = useState(true)
+
+  return (
+    <MainDiv>
+      {type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
+    </MainDiv>
+  )
+}
+export default Recommend