diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx
index 2cd2109..c01f851 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, Stepper, Step, Card, CardBody } from '@pancakeswap/uikit'
+import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
@@ -36,9 +36,80 @@ const FlexMain = styled(Flex)`
     justify-content: center;
   }
 `
+const SortDiv = styled.div`
+  height: 190px;
+  position: relative;
 
-const CardDiv = styled(Card)`
-  padding: 20px;
+  ${({ 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 CourseCom: React.FC = () => {
@@ -96,11 +167,14 @@ const CourseCom: React.FC = () => {
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <FlexMain>
             <div>
-              <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>
+              {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">
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -110,9 +184,9 @@ const CourseCom: React.FC = () => {
                         )
                       })}
                     </CardDiv>
-                  </Step>
-                ))}
-              </Stepper>
+                  </SortDiv>
+                )
+              })}
             </div>
           </FlexMain>
         </StyledPage>
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx
index c05626a..61dd480 100644
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@@ -5,7 +5,6 @@ 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
index 5acf3c2..a4515df 100644
--- a/src/views/recommend/components/BuyNftModal.tsx
+++ b/src/views/recommend/components/BuyNftModal.tsx
@@ -7,6 +7,9 @@ import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
   width: 80%;
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+  }
 `
 
 const InfoDiv = styled.div`
diff --git a/src/views/recommend/components/Connected.tsx b/src/views/recommend/components/Connected.tsx
new file mode 100644
index 0000000..80c8dff
--- /dev/null
+++ b/src/views/recommend/components/Connected.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, useModal, Text } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import BuyNftModal from './BuyNftModal'
+import HeaderMian from './HeaderMain'
+
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
+  color: ${({ theme }) => theme.colors.textDisabled};
+`
+
+const UpBtn = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+`
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+const FooterDiv = styled.div`
+  margin: 0 auto 30px auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+
+const ConnectedCom: React.FC = () => {
+  const { t } = useTranslation()
+  const [onBuyModal] = useModal(<BuyNftModal />)
+
+  return (
+    <MainDiv>
+      <HeaderMian title={t('recommend')} />
+      <>
+        <FlexCom name={t('The lower the number of')} value="100000(人)" />
+        <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+        <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+      </>
+      <FooterBtn>
+        <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
+        <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
+      </FooterBtn>
+      <FooterDiv>
+        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+      </FooterDiv>
+    </MainDiv>
+  )
+}
+export default ConnectedCom
diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx
index f5f8a4e..af0f007 100644
--- a/src/views/recommend/components/HeaderMain.tsx
+++ b/src/views/recommend/components/HeaderMain.tsx
@@ -11,6 +11,12 @@ const HeadingDiv = styled(Heading)`
   position: relative;
 `
 
+const TipDiv = styled(Image)`
+  position: absolute;
+  cursor: pointer;
+  top: 24px;
+  left: 0;
+`
 const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
diff --git a/src/views/recommend/components/Regimental.tsx b/src/views/recommend/components/Regimental.tsx
new file mode 100644
index 0000000..c619df8
--- /dev/null
+++ b/src/views/recommend/components/Regimental.tsx
@@ -0,0 +1,108 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text, Image, Button } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import HeaderMian from './HeaderMain'
+
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
+  color: ${({ theme }) => theme.colors.textDisabled};
+`
+
+const UpBtn = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+`
+
+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%;
+    height: 80vh;
+    overflow-y: auto;
+  }
+`
+
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+const FooterDiv = styled.div`
+  margin: 0 auto 30px auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+const LogoImage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const RegimentalCom: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <ContengDiv>
+      <MainDiv>
+        <HeaderMian title={t('Regimental recommendation')} />
+        <LogoImage>
+          <Image src="/images/recommend/logo.svg" width={249} height={249} />
+        </LogoImage>
+
+        <>
+          <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
+          <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
+          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+        </>
+
+        <FooterBtn>
+          <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
+          {/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
+        </FooterBtn>
+        <FooterDiv>
+          <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+          <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+          <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+        </FooterDiv>
+      </MainDiv>
+    </ContengDiv>
+  )
+}
+export default RegimentalCom
diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx
new file mode 100644
index 0000000..f697364
--- /dev/null
+++ b/src/views/recommend/components/UnunitedCom.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading, Text } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 90px;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 80%;
+  margin: 80px auto 10px auto;
+  margin-left: 10%;
+  border-radius: 50px;
+`
+const FooterDiv = styled.div`
+  width: 80%;
+  margin: 0 auto 30px auto;
+  margin-left: 10%;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+
+const UnunitedCom: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <HeadingDiv scale="xl" mb="24px" textAlign="center">
+        {t('recommend')}
+      </HeadingDiv>
+      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
+      <FooterDiv>
+        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+      </FooterDiv>
+    </>
+  )
+}
+export default UnunitedCom
diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx
index 7d4c6f9..7542356 100644
--- a/src/views/recommend/index.tsx
+++ b/src/views/recommend/index.tsx
@@ -32,7 +32,7 @@ const ContengDiv = styled.div`
   }
 `
 
-const Recommend: React.FC = () => {
+const Nft: React.FC = () => {
   //  邀请false普通邀请 true军团长邀请
   const [type, typeState] = useState(false)
   //  是否连接钱包
@@ -44,4 +44,4 @@ const Recommend: React.FC = () => {
     </MainDiv>
   )
 }
-export default Recommend
+export default Nft