diff --git a/src/App.tsx b/src/App.tsx
index f0114a3..842648b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -49,7 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
 const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
 const Nft = lazy(() => import('./views/Nft'))
-const Recommend = lazy(() => import('./views/recommend'))
+const Recommend = lazy(() => import('./views/Recommend'))
 
 // This config is required for number formatting
 BigNumber.config({
diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx
index a9c17d3..c01f851 100644
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
@@ -7,7 +7,6 @@ const FristPage = styled.div`
   background-image: url('/images/home/three.svg');
   background-size: 100%;
   background-repeat: no-repeat;
-  padding: 8rem 0 0.8rem 0;
 `
 
 const StyledPage = styled(Box)`
@@ -43,7 +42,7 @@ const SortDiv = styled.div`
 
   ${({ theme }) => theme.mediaQueries.xs} {
     height: 330px;
-    & > .bXcYNu {
+    & > .card-content {
       left: 20px;
       width: 300px;
     }
@@ -52,14 +51,14 @@ const SortDiv = styled.div`
   ${({ theme }) => theme.mediaQueries.lg} {
     height: 190px;
     :nth-of-type(odd) {
-      & > .bXcYNu {
+      & > .card-content {
         width: 372px;
         left: 60px;
       }
     }
 
     :nth-of-type(even) {
-      & > .bXcYNu {
+      & > .card-content {
         width: 372px;
         left: -420px;
       }
@@ -175,8 +174,7 @@ const CourseCom: React.FC = () => {
                     style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
                   >
                     <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
-                    {/* style={{ left: index % 2 ? '-420px' : '60px' }} */}
-                    <CardDiv>
+                    <CardDiv className="card-content">
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx
index 9b3ae72..34126a3 100644
--- a/src/views/Home/components/FlexItemCom.tsx
+++ b/src/views/Home/components/FlexItemCom.tsx
@@ -2,6 +2,11 @@ import React from 'react'
 import styled from 'styled-components'
 import { Text } from '@pancakeswap/uikit'
 
+interface FlexProp {
+  name: string
+  value: string
+}
+
 const ScoreItem = styled.div`
   width: 100%;
 `
@@ -16,7 +21,7 @@ const ItemSubText = styled(Text)`
   font-size: 20px;
 `
 
-export default function FlexItemCom({ name, value }) {
+const FlexItemCom: React.FC<FlexProp> = ({ name, value }) => {
   return (
     <ScoreItem>
       <ItemText color="text">{value}</ItemText>
@@ -24,3 +29,4 @@ export default function FlexItemCom({ name, value }) {
     </ScoreItem>
   )
 }
+export default FlexItemCom
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx
index 2f57bbe..61dd480 100644
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Flex, Heading, Text, BaseLayout, Box, Button, Image } from '@pancakeswap/uikit'
+import { Heading, Text, Box, Image } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
   background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
-  padding: 8rem 0 0.8rem 0;
 `
 
 const StyledPage = styled(Box)`
@@ -30,7 +29,6 @@ const BoxMain = styled(Box)`
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
   opacity: 1;
   border-radius: 20px;
-  /* padding: 94px 92px 37px 92px; */
   position: relative;
   ${({ theme }) => theme.mediaQueries.xs} {
     padding: 94px 30px 37px 30px;
diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx
index d84019c..a4515df 100644
--- a/src/views/recommend/components/BuyNftModal.tsx
+++ b/src/views/recommend/components/BuyNftModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
@@ -7,13 +7,6 @@ import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
   width: 80%;
-  & > .jCXCIB {
-    border-bottom: none;
-    text-align: center;
-    & > .hMvvbb {
-      justify-content: center;
-    }
-  }
 
   ${({ theme }) => theme.mediaQueries.xs} {
   }
@@ -22,23 +15,21 @@ const ModalDiv = styled(Modal)`
 const InfoDiv = styled.div`
   box-sizing: border-box;
   padding: 30px 26px;
-  /* width: calc(100% - 280px); */
-  margin-left: 2rem;
+  margin-left: 60px;
   box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
   ${({ theme }) => theme.mediaQueries.xs} {
     padding: 20px 10px;
-    margin-left: 0rem;
+    margin-left: 0;
   }
   ${({ theme }) => theme.mediaQueries.lg} {
     padding: 30px 26px;
-    margin-left: 2rem;
+    margin-left: 60px;
   }
 `
 const UpBtn = styled(Button)`
   width: 50%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
@@ -56,16 +47,13 @@ const ImageDiv = styled(Image)`
   }
 `
 
-export default function BuyNftModal() {
+const BuyNftModal: React.FC = () => {
   const { t } = useTranslation()
 
-  const onDismiss = () => {
-    console.log('aaa')
-  }
+  // const onDismiss = () => {}
   return (
-    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss}>
+    <ModalDiv title={t('Buy commander NFT')}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
-        {/* <ImageDiv src="/images/recommend/logo.svg" alt="" width={300} height={300}></ImageDiv> */}
         <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
         <InfoDiv>
           <TextFlex
@@ -88,3 +76,4 @@ export default function BuyNftModal() {
     </ModalDiv>
   )
 }
+export default BuyNftModal
diff --git a/src/views/recommend/components/ConnectedComponent.tsx b/src/views/recommend/components/Connected.tsx
similarity index 73%
rename from src/views/recommend/components/ConnectedComponent.tsx
rename to src/views/recommend/components/Connected.tsx
index f26edc5..80c8dff 100644
--- a/src/views/recommend/components/ConnectedComponent.tsx
+++ b/src/views/recommend/components/Connected.tsx
@@ -1,23 +1,11 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import { Button, Heading, Image, useModal, Text } from '@pancakeswap/uikit'
+import { Button, useModal, Text } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
 import HeaderMian from './HeaderMain'
 
-const HeadingDiv = styled(Heading)`
-  padding-top: 30px;
-  position: relative;
-`
-
-const TipDiv = styled(Image)`
-  position: absolute;
-  cursor: pointer;
-  top: 24px;
-  left: 30px;
-`
-
 const ButtonDiv = styled(Button)`
   width: 100%;
   margin: 20px auto 0px auto;
@@ -30,7 +18,6 @@ const UpBtn = styled(Button)`
   width: 100%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
@@ -39,32 +26,30 @@ const FooterBtn = styled.div`
   width: 100%;
   box-sizing: border-box;
   padding-bottom: 20px;
-  /* padding: 0 0px 20px 0px; */
 `
 const MainDiv = styled.div`
   padding: 0 30px;
 `
 const FooterDiv = styled.div`
-  margin: 0 auto 3rem auto;
+  margin: 0 auto 30px auto;
 `
 const TextDiv = styled(Text)`
   margin-top: 10px;
   font-size: 14px;
 `
-export default function ConnectedCom() {
+
+const ConnectedCom: React.FC = () => {
   const { t } = useTranslation()
   const [onBuyModal] = useModal(<BuyNftModal />)
 
   return (
     <MainDiv>
-      <HeaderMian title={t('recommend')} tip={false} />
+      <HeaderMian title={t('recommend')} />
       <>
         <FlexCom name={t('The lower the number of')} value="100000(人)" />
-        {/* <FlexCom name={t('NFT total revenue')} 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>
@@ -77,3 +62,4 @@ export default function ConnectedCom() {
     </MainDiv>
   )
 }
+export default ConnectedCom
diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx
index 676f3b6..e66d270 100644
--- a/src/views/recommend/components/FlexCom.tsx
+++ b/src/views/recommend/components/FlexCom.tsx
@@ -1,21 +1,21 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { Flex, Text } from '@pancakeswap/uikit'
 
+interface FlexProps {
+  name: string
+  value: string
+  paddings?: string | '0px'
+  leftColor?: string | 'text'
+  RightColor?: string | 'textSubtle'
+}
+
 const FlexDiv = styled(Flex)`
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
 `
-
-export default function FlexCom({
-  name,
-  value,
-  paddings = '0',
-  leftColor = 'text',
-  RightColor = 'textSubtle',
-  color = '#1FC7D4',
-}) {
+const FlexCom: React.FC<FlexProps> = ({ name, value, paddings, leftColor, RightColor }) => {
   return (
     <FlexDiv style={{ padding: paddings }}>
       <Text color={leftColor}>{name}</Text>
@@ -23,3 +23,4 @@ export default function FlexCom({
     </FlexDiv>
   )
 }
+export default FlexCom
diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx
index 8d5bf4b..af0f007 100644
--- a/src/views/recommend/components/HeaderMain.tsx
+++ b/src/views/recommend/components/HeaderMain.tsx
@@ -1,6 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+import { Image, Heading } from '@pancakeswap/uikit'
+
+interface HeaderProp {
+  title: string
+}
 
 const HeadingDiv = styled(Heading)`
   padding-top: 30px;
@@ -13,12 +17,11 @@ const TipDiv = styled(Image)`
   top: 24px;
   left: 0;
 `
-export default function HeaderMian({ title, tip = true }) {
+const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
-      {tip ? <TipDiv src="/images/recommend/tip.svg" width={25} height={25} /> : ''}
-      {/* <TipDiv src="/images/recommend/tip.svg" width={25} height={25} /> */}
       {title}
     </HeadingDiv>
   )
 }
+export default HeaderMian
diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/Regimental.tsx
similarity index 67%
rename from src/views/recommend/components/RegimentalComponent.tsx
rename to src/views/recommend/components/Regimental.tsx
index cfde662..c619df8 100644
--- a/src/views/recommend/components/RegimentalComponent.tsx
+++ b/src/views/recommend/components/Regimental.tsx
@@ -1,51 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+import { Text, Image, Button } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import HeaderMian from './HeaderMain'
 
-// const MainDiv = styled.div`
-//   width: 60%;
-// `
-const HeaderFlex = styled(Flex)`
-  padding-left: 20px;
-`
-
-const BuyButton = styled(Button)`
-  width: 150px;
-  border-radius: 50px;
-  margin-left: 20px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
-  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
-`
-
-const ContentFlex = styled(Flex)`
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-`
-
-const InfoDiv = styled.div`
-  width: calc(50% - 40px);
-  margin: 0 20px;
-  /* width: 400px; */
-  min-width: 315px;
-  background: #ffffff;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 40px;
-  box-sizing: border-box;
-  margin-top: 50px;
-  padding: 0 30px 35px 30px;
-`
-// const ButtonDiv = styled(Button)`
-//   width: 100%;
-//   margin: 20px auto 0px auto;
-//   border-radius: 50px;
-//   border: 1px solid ${({ theme }) => theme.colors.primaryDark};
-//   color: ${({ theme }) => theme.colors.primaryDark};
-// `
-
 const ButtonDiv = styled(Button)`
   width: 100%;
   margin: 20px auto 0px auto;
@@ -58,7 +17,6 @@ const UpBtn = styled(Button)`
   width: 100%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
@@ -67,7 +25,6 @@ const FooterBtn = styled.div`
   width: 100%;
   box-sizing: border-box;
   padding-bottom: 20px;
-  /* padding: 0 0px 20px 0px; */
 `
 
 const ContengDiv = styled.div`
@@ -94,7 +51,7 @@ const MainDiv = styled.div`
   padding: 0 30px;
 `
 const FooterDiv = styled.div`
-  margin: 0 auto 3rem auto;
+  margin: 0 auto 30px auto;
 `
 const TextDiv = styled(Text)`
   margin-top: 10px;
@@ -106,12 +63,12 @@ const LogoImage = styled.div`
   justify-content: center;
 `
 
-export default function RegimentalCom() {
+const RegimentalCom: React.FC = () => {
   const { t } = useTranslation()
   return (
     <ContengDiv>
       <MainDiv>
-        <HeaderMian title="军团长推荐" tip={false} />
+        <HeaderMian title={t('Regimental recommendation')} />
         <LogoImage>
           <Image src="/images/recommend/logo.svg" width={249} height={249} />
         </LogoImage>
@@ -148,3 +105,4 @@ export default function RegimentalCom() {
     </ContengDiv>
   )
 }
+export default RegimentalCom
diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx
index 43e204a..85dada1 100644
--- a/src/views/recommend/components/TextFlex.tsx
+++ b/src/views/recommend/components/TextFlex.tsx
@@ -1,7 +1,12 @@
-import React, { useState } from 'react'
+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;
@@ -12,6 +17,7 @@ const MainDiv = styled(Flex)`
   justify-content: center;
 `
 
-export default function TextFlex({ color, text = '' }) {
+const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
   return <MainDiv style={{ background: color }}>{text}</MainDiv>
 }
+export default TextFlex
diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx
index f2654d0..f697364 100644
--- a/src/views/recommend/components/UnunitedCom.tsx
+++ b/src/views/recommend/components/UnunitedCom.tsx
@@ -1,21 +1,21 @@
-import React, { useState } from 'react'
+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: 5rem;
+  padding-top: 90px;
 `
 
 const ButtonDiv = styled(Button)`
   width: 80%;
-  margin: 5rem auto 10px auto;
+  margin: 80px auto 10px auto;
   margin-left: 10%;
   border-radius: 50px;
 `
 const FooterDiv = styled.div`
   width: 80%;
-  margin: 0 auto 3rem auto;
+  margin: 0 auto 30px auto;
   margin-left: 10%;
 `
 const TextDiv = styled(Text)`
@@ -23,7 +23,7 @@ const TextDiv = styled(Text)`
   font-size: 14px;
 `
 
-export default function UnunitedCom() {
+const UnunitedCom: React.FC = () => {
   const { t } = useTranslation()
   return (
     <>
@@ -39,3 +39,4 @@ export default function UnunitedCom() {
     </>
   )
 }
+export default UnunitedCom
diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx
index cab26a9..7542356 100644
--- a/src/views/recommend/index.tsx
+++ b/src/views/recommend/index.tsx
@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Card, Button, Text, Flex, Image, Heading } from '@pancakeswap/uikit'
-
 import UnunitedCom from './components/UnunitedCom'
-import ConnectedCom from './components/ConnectedComponent'
-import RegimentalCom from './components/RegimentalComponent'
+import ConnectedCom from './components/Connected'
+import RegimentalCom from './components/Regimental'
 
 const MainDiv = styled.div`
   min-height: calc(100vh - 64px);