diff --git a/mobile/src/assets/img/about/Introduction背景.png b/mobile/src/assets/img/about/Introduction背景.png
deleted file mode 100644
index 49b155f..0000000
Binary files a/mobile/src/assets/img/about/Introduction背景.png and /dev/null differ
diff --git a/mobile/src/assets/img/about/boder-bottom.svg b/mobile/src/assets/img/about/boder-bottom.svg
new file mode 100644
index 0000000..1dddebe
--- /dev/null
+++ b/mobile/src/assets/img/about/boder-bottom.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 270 32" style="enable-background:new 0 0 270 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#EC2E5B;}
+	.st1{fill:#DC5C7F;}
+	.st2{fill:#0F6569;}
+	.st3{fill:#CEC3C3;}
+	.st4{fill:#8AF4E1;}
+</style>
+<rect x="0" y="26.96" class="st3" width="270" height="4.98"/>
+<rect x="257" y="17" transform="matrix(3.637960e-11 1 -1 3.637960e-11 282 -237)" class="st3" width="5" height="11"/>
+<rect x="246.5" y="15.5" transform="matrix(1.299298e-11 1 -1 1.299298e-11 271.5 -235.5)" class="st3" width="14" height="5"/>
+<rect x="257" y="10" transform="matrix(3.128679e-11 1 -1 3.128679e-11 273 -246)" class="st3" width="5" height="7"/>
+<rect x="259.5" y="14.5" transform="matrix(-1.306944e-09 1 -1 -1.306944e-09 277.5 -243.5)" class="st3" width="2" height="5"/>
+<rect x="237" y="20" transform="matrix(-1 -5.000708e-10 5.000708e-10 -1 486 45)" class="st3" width="12" height="5"/>
+<rect x="255" y="10" transform="matrix(-3.950789e-11 -1 1 -3.950789e-11 255 280)" class="st3" width="25" height="5"/>
+<rect x="256" y="2" transform="matrix(6.966730e-10 -1 1 6.966730e-10 256 265)" class="st3" width="9" height="5"/>
+<rect x="7.5" y="8" transform="matrix(-9.094885e-12 -1 1 -9.094885e-12 -3 23)" class="st3" width="5" height="10"/>
+<rect x="9.25" y="15.25" transform="matrix(3.750873e-11 -1 1 3.750873e-11 -1.25 34.25)" class="st3" width="14.5" height="5"/>
+<rect x="8.5" y="18.5" transform="matrix(-4.365336e-12 -1 1 -4.365336e-12 -11.5 33.5)" class="st3" width="5" height="8"/>
+<rect x="21" y="20" class="st3" width="12" height="5"/>
+<rect x="-5.75" y="16.25" transform="matrix(-6.394014e-11 1 -1 -6.394014e-11 21.25 16.25)" class="st3" width="16.5" height="5"/>
+<rect x="5.25" y="1.75" transform="matrix(7.402222e-10 -1 1 7.402222e-10 5.25 13.75)" class="st3" width="8.5" height="5"/>
+<rect x="-1.75" y="1.75" transform="matrix(7.402222e-10 -1 1 7.402222e-10 -1.75 6.75)" class="st3" width="8.5" height="5"/>
+<rect x="7" y="17.5" transform="matrix(-4.002071e-12 -1 1 -4.002071e-12 -10.5 29.5)" class="st3" width="5" height="5"/>
+</svg>
diff --git a/mobile/src/assets/img/about/boder-center.svg b/mobile/src/assets/img/about/boder-center.svg
new file mode 100644
index 0000000..566482e
--- /dev/null
+++ b/mobile/src/assets/img/about/boder-center.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 270 32" style="enable-background:new 0 0 270 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#EC2E5B;}
+	.st1{fill:#DC5C7F;}
+	.st2{fill:#0F6569;}
+	.st3{fill:#CEC3C3;}
+	.st4{fill:#8AF4E1;}
+</style>
+<polyline class="st3" points="5,0 5,32 0,32 0,0 "/>
+<polyline class="st3" points="270,0 270,32 265,32 265,0 "/>
+</svg>
diff --git a/mobile/src/assets/img/about/boder-top.svg b/mobile/src/assets/img/about/boder-top.svg
new file mode 100644
index 0000000..5d08791
--- /dev/null
+++ b/mobile/src/assets/img/about/boder-top.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 270 32" style="enable-background:new 0 0 270 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#EC2E5B;}
+	.st1{fill:#DC5C7F;}
+	.st2{fill:#0F6569;}
+	.st3{fill:#CEC3C3;}
+	.st4{fill:#8AF4E1;}
+</style>
+<g>
+	
+		<rect x="132.17" y="1.29" transform="matrix(0.7071 -0.7071 0.7071 0.7071 36.6264 96.6665)" class="st4" width="5.66" height="5.66"/>
+	<polygon class="st3" points="144,3.11 135,12.04 126,3.11 0,3.11 0,8.09 125,8.09 135,18 145,7.98 270,7.98 270,3 	"/>
+	<rect x="8" y="7" transform="matrix(8.730855e-12 -1 1 8.730855e-12 -2 23)" class="st3" width="5" height="11"/>
+	<rect x="9.5" y="14.5" transform="matrix(3.183238e-11 -1 1 3.183238e-11 -0.5 33.5)" class="st3" width="14" height="5"/>
+	<rect x="8" y="18" transform="matrix(1.382456e-11 -1 1 1.382456e-11 -11 32)" class="st3" width="5" height="7"/>
+	<rect x="8.5" y="15.5" transform="matrix(1.350600e-09 -1 1 1.350600e-09 -8.5 27.5)" class="st3" width="2" height="5"/>
+	<rect x="21" y="10" class="st3" width="12" height="5"/>
+	<rect x="-8.5" y="18.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 23.5 18.5)" class="st3" width="22" height="5"/>
+	<rect x="6.5" y="26.5" transform="matrix(-1.089878e-09 1 -1 -1.089878e-09 38.5 19.5)" class="st3" width="6" height="5"/>
+	<rect x="257.5" y="17" transform="matrix(-3.565255e-11 1 -1 -3.565255e-11 282 -238)" class="st3" width="5" height="10"/>
+	
+		<rect x="246.25" y="14.75" transform="matrix(-8.241959e-11 1 -1 -8.241959e-11 270.75 -236.25)" class="st3" width="14.5" height="5"/>
+	<rect x="256.5" y="8.5" transform="matrix(-4.074537e-11 1 -1 -4.074537e-11 271.5 -246.5)" class="st3" width="5" height="8"/>
+	<rect x="237" y="10" transform="matrix(-1 -6.196693e-10 6.196693e-10 -1 486 25)" class="st3" width="12" height="5"/>
+	
+		<rect x="259.25" y="13.75" transform="matrix(1.088090e-10 -1 1 1.088090e-10 251.25 283.75)" class="st3" width="16.5" height="5"/>
+	
+		<rect x="257.75" y="26.75" transform="matrix(-1.188958e-09 1 -1 -1.188958e-09 289.75 -231.25)" class="st3" width="5.5" height="5"/>
+	
+		<rect x="264.75" y="26.75" transform="matrix(-1.188958e-09 1 -1 -1.188958e-09 296.75 -238.25)" class="st3" width="5.5" height="5"/>
+	<rect x="258" y="12.5" transform="matrix(-4.074537e-11 1 -1 -4.074537e-11 275.5 -245.5)" class="st3" width="5" height="5"/>
+</g>
+</svg>
diff --git a/mobile/src/assets/img/about/TEAM图.png b/mobile/src/assets/img/about/card-bg.png
similarity index 100%
rename from mobile/src/assets/img/about/TEAM图.png
rename to mobile/src/assets/img/about/card-bg.png
diff --git a/mobile/src/assets/img/about/灰色机甲.png b/mobile/src/assets/img/about/mission.png
similarity index 100%
rename from mobile/src/assets/img/about/灰色机甲.png
rename to mobile/src/assets/img/about/mission.png
diff --git a/mobile/src/assets/img/about/TEAM装饰线.png b/mobile/src/assets/img/about/team-boder.png
similarity index 100%
rename from mobile/src/assets/img/about/TEAM装饰线.png
rename to mobile/src/assets/img/about/team-boder.png
diff --git a/mobile/src/assets/img/about/废墟2.png b/mobile/src/assets/img/about/vision-btoom-boder.png
similarity index 100%
rename from mobile/src/assets/img/about/废墟2.png
rename to mobile/src/assets/img/about/vision-btoom-boder.png
diff --git a/mobile/src/assets/img/about/Vision装饰.png b/mobile/src/assets/img/about/vision-title-boder.png
similarity index 100%
rename from mobile/src/assets/img/about/Vision装饰.png
rename to mobile/src/assets/img/about/vision-title-boder.png
diff --git a/mobile/src/assets/img/about/底部背景.png b/mobile/src/assets/img/about/底部背景.png
deleted file mode 100644
index 3e737ab..0000000
Binary files a/mobile/src/assets/img/about/底部背景.png and /dev/null differ
diff --git a/mobile/src/components/about/Grid9Panel.vue b/mobile/src/components/about/Grid9Panel.vue
index 3b306af..4306193 100644
--- a/mobile/src/components/about/Grid9Panel.vue
+++ b/mobile/src/components/about/Grid9Panel.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="bg bg-content">
-    <div class="bg-middle"></div>
     <div class="bg-up"></div>
+    <div class="bg-middle"></div>
     <div class="bg-down"></div>
-    <div class="copy-writing">
+    <!-- <div class="copy-writing">
       <div class="name">{{ (teamItem.name) }}</div>
       <div class="title">{{teamItem.title}}</div>
       <div class="team-boder">
         <img src="@/assets/img/about/team-card-boder.png" alt="" />
       </div>
       <div class="slogan" v-html="teamItem.slogan "></div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup>
@@ -19,14 +19,18 @@ defineProps(["teamItem"]);
 <style lang="scss" scoped>
 .bg {
   width: 100%;
-  padding-left: 15px;
+  // padding-left: 15px;
+ margin-left: 45px;
   position: absolute;
   left: 0;
   bottom: 38px;
-  height: 96px;
+  display: flex;
+  // align-items: center;
+  justify-content: center;
+  flex-direction: column;
   overflow: hidden;
-  // height: 400px;
-  min-height: 96px;
+  min-height: 210px;
+  max-height: 865px;
 }
 
 .copy-writing {
@@ -44,7 +48,7 @@ defineProps(["teamItem"]);
     font-weight: 400;
     color: #ffffff;
   }
-  .title{
+  .title {
     margin: 0 auto;
     font-size: 20px;
     font-family: "Big John";
@@ -82,26 +86,27 @@ defineProps(["teamItem"]);
 .bg-up {
   position: absolute;
   top: 0;
-  height: 32px;
-  width: 300px;
+  height: 70px;
+  width: 610px;
   background: url("@/assets/img/about/boder-top.svg") no-repeat;
-  background-size: 300px 32px;
+  background-size: 610px 70px;
 }
 .bg-middle {
   position: absolute;
-  top: 22px;
-  height: calc(100% - 22px);
-  width: 300px;
+  top: 70px;
+  //  flex: 1;
+  height: calc(100% - 140px);
+  width: 610px;
   background: url("@/assets/img/about/boder-center.svg") repeat-y;
-  background-size: 300px 32px;
+  background-size: 610px 70px;
 }
 
 .bg-down {
   position: absolute;
   bottom: 0;
-  height: 32px;
-  width: 300px;
+  height: 70px;
+  width: 610px;
   background: url("@/assets/img/about/boder-bottom.svg") no-repeat;
-  background-size: 300px 32px;
+  background-size: 610px 70px;
 }
 </style>
diff --git a/mobile/src/components/about/IntroductionBanner.vue b/mobile/src/components/about/IntroductionBanner.vue
index 088df5c..1755437 100644
--- a/mobile/src/components/about/IntroductionBanner.vue
+++ b/mobile/src/components/about/IntroductionBanner.vue
@@ -38,19 +38,23 @@
 
 <style lang="scss" scoped>
 .container {
-  padding-top: 62px;
-//   background-color: #265d90;
-  padding-bottom: 116px;
+  padding-top: 120px;
+  background-color: #265d90;
+  padding-bottom: 317px;
   position: relative;
   .banner-boder {
+    width: 100%;
     position: absolute;
     left: 0;
     bottom: 0;
+    img{
+      width: 100%;
+    }
   }
   .introduction-bg {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 120px;
     bottom: 0;
     right: 0;
     width: 100%;
@@ -62,31 +66,38 @@
     }
   }
   .content {
-  //width: 1440px;
+    width: 100%;
     margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
+    // display: flex;
+    // justify-content: space-between;
     .title {
-      padding-top: 170px;
-      font-size: 48px;
+      padding-top: 133px;
+      // font-size: 48px;
+      text-align: center;
       padding-left: 40px;
+      font-size: 60px;
       font-family: "Big John";
       font-weight: 400;
       color: #ffffff;
     }
     .title-boder {
-      width: 689px;
-      height: 58px;
-      padding-bottom: 30px;
+      width: 707px;
+      height: 71px;
+      margin: 0 auto;
+      //height: 58px;
+      padding-top: 45px;
+      padding-bottom: 87px;
     }
     .slogan {
-      width: 447px;
+      width: 712px;
+      margin: 0 auto;
       padding-top: 40px;
-      margin-left: 40px;
-      font-size: 16px;
+      // margin-left: 40px;
+      font-size: 26px;
       font-family: Arial;
       font-weight: bold;
       color: #ffffff;
+      line-height: 42px;
       display: flex;
       flex-direction: column;
       .cebg-batlegrounds {
diff --git a/mobile/src/components/about/VisionMission.vue b/mobile/src/components/about/VisionMission.vue
index d615450..4dc063b 100644
--- a/mobile/src/components/about/VisionMission.vue
+++ b/mobile/src/components/about/VisionMission.vue
@@ -10,11 +10,6 @@
     </div>
     <div class="content">
       <div class="content-top">
-        <div class="content-left">
-          <div class="mission">
-            <img src="@/assets/img/about/mission.png" alt="" />
-          </div>
-        </div>
         <div class="content-right">
           <div class="title">Vision & Mission</div>
           <div class="title-boder">
@@ -26,11 +21,16 @@
               has excellent economy design that allows players to feel the joy
               of playing while being able to earntokens.
             </div>
-            <div class="cebg-batlegrounds">
+            <!-- <div class="cebg-batlegrounds">
               At the same time, a community co-creation and sharing mechanism is
               used to disrupt the existing content and value sharing model so
               that creativity and value can flourish in the community.
-            </div>
+            </div> -->
+          </div>
+        </div>
+        <div class="content-left">
+          <div class="mission">
+            <img src="@/assets/img/about/mission.png" alt="" />
           </div>
         </div>
       </div>
@@ -41,29 +41,11 @@
         </div>
         <div class="card-list">
           <div class="card-item" v-for="team in cardText">
-            <div class="cardbg">
+            <!-- <div class="cardbg">
               <img src="@/assets/img/about/card-bg.png" alt="" />
-            </div>
+            </div> -->
             <Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
           </div>
-          <!-- <div class="card-item">
-            <div class="cardbg">
-              <img src="@/assets/img/about/card-bg.png" alt="" />
-            </div>
-            <Grid9Panel class="grid"></Grid9Panel>
-          </div>
-          <div class="card-item">
-            <div class="cardbg">
-              <img src="@/assets/img/about/card-bg.png" alt="" />
-            </div>
-            <Grid9Panel class="grid"></Grid9Panel>
-          </div>
-          <div class="card-item">
-            <div class="cardbg">
-              <img src="@/assets/img/about/card-bg.png" alt="" />
-            </div>
-            <Grid9Panel class="grid"></Grid9Panel>
-          </div> -->
         </div>
       </div>
     </div>
@@ -124,19 +106,23 @@ function handleScroll() {
 <style lang="scss" scoped>
 .container {
   //   padding-top: 62px;
-   background-color: RGBA(40, 98, 150, 1);
+  //  background-color: RGBA(40, 98, 150, 1);
   padding-bottom: 116px;
   position: relative;
   .banner-boder {
     position: absolute;
     left: 0;
     bottom: 0;
+    img {
+      width: 100%;
+    }
   }
   .vision-title {
     position: absolute;
-    right: 0;
+    left: 194px;
     top: 0;
-    font-size: 210px;
+    transform: translate(-50%, -50%);
+    font-size: 100px;
     font-family: "Big John";
     font-weight: 400;
     color: #e6e6e6;
@@ -154,47 +140,56 @@ function handleScroll() {
     z-index: -3;
   }
   .content {
-    width: 1440px;
+    // width: 1440px;
     margin: 0 auto;
 
     .content-top {
-      display: flex;
-      justify-content: space-between;
+      // display: flex;
+      // justify-content: space-between;
       .title {
-        padding-top: 174px;
-        font-size: 48px;
-        margin-left: 49px;
+        padding-top: 13px;
+        text-align: center;
+        // margin-left: 49px;
+        font-size: 60px;
         font-family: "Big John";
         font-weight: 400;
         color: #000000;
       }
       .title-boder {
-        width: 689px;
-        height: 58px;
-        padding-bottom: 30px;
+        padding-top: 35px;
+        width: 707px;
+        margin: 0 auto;
+        height: 71px;
+        margin-bottom: 30px;
+        img {
+          width: 100%;
+        }
       }
       .slogan {
-        width: 622px;
-        padding-top: 36px;
-        margin-left: 49px;
-        font-size: 16px;
+        width: 712px;
+        margin: 0 auto;
+        padding-top: 87px;
+        // margin-left: 49px;
+        font-size: 26px;
         font-family: Arial;
         font-weight: bold;
         color: #000000;
-        display: flex;
+        line-height: 42px;
         flex-direction: column;
         .cebg-batlegrounds {
           // padding-top: 30px;
         }
       }
       .mission {
-        padding-top: 13px;
-        width: 656px;
-        height: 587px;
+        margin-top: 44px;
+        margin-left: 22px;
+        width: 638px;
+        height: 539px;
+        // margin-bottom: 67px;
 
         img {
-          max-width: 100%;
-          height: auto;
+          width: 638px;
+          height: 539px;
           object-fit: cover;
         }
       }
@@ -210,26 +205,30 @@ function handleScroll() {
         }
         .team-title {
           position: absolute;
-          top: -10px;
-          left: 642px;
+          top: 10px;
+          left: 50%;
           font-size: 26px;
           font-family: "Big John";
           font-weight: 400;
           color: #d74458;
+          transform: translate(-50%, -50%);
         }
       }
       .card-list {
         padding-top: 100px;
         padding-bottom: 251px;
-        width: 100%;
+        width: 710px;
+        margin: 0 auto;
         display: flex;
+        flex-direction: column;
         justify-content: space-between;
         .card-item {
           position: relative;
-          width: 330px;
           background: rgba(236, 46, 91, 1);
           border-radius: 12px;
-          height: 456px;
+          width: 710px;
+          height: 930px;
+          margin-bottom: 65px;
           .cardbg {
             position: absolute;
             // left: 30px;
@@ -237,6 +236,8 @@ function handleScroll() {
             animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             animation: myfirstcard2 0.5s 1 alternate forwards;
             border-radius: 12px;
+            width: 270px;
+            height: 270px;
             img {
               width: 100%;
               height: 100%;
@@ -260,12 +261,15 @@ function handleScroll() {
   }
 }
 .grid {
-  width: 100%;
+  width: 610px;
   height: 96px;
+  min-height: 210px;
+  max-height: 865px;
   cursor: pointer;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   animation: myfirstnone 0.5s alternate 1 forwards;
 }
+
 .card-item:hover {
   transform: scale(1.019) translate(0px, -15px);
 }
@@ -279,12 +283,12 @@ function handleScroll() {
     height: 96px;
   }
   100% {
-    height: 396px;
+    height: 835px;
   }
 }
 @keyframes myfirstnone {
   0% {
-    height: 396px;
+    height: 835px;
   }
   100% {
     height: 96px;
diff --git a/mobile/src/components/layout/NavBar.vue b/mobile/src/components/layout/NavBar.vue
index b0d3593..6ddaeac 100644
--- a/mobile/src/components/layout/NavBar.vue
+++ b/mobile/src/components/layout/NavBar.vue
@@ -1,4 +1,4 @@
-<template>
+<template>ight
   <div class="nav">
     <div class="nav-logo">
       <img src="../../assets/img/home/nav-logo.png" alt="" />
@@ -101,6 +101,9 @@ function onLinkTo(item, index) {
     .avatar-icon {
       width: 68px;
       height: 84px;
+      img{
+        width: 100%;
+      }
     }
     .nav-btn {
       width: 84px;
diff --git a/mobile/src/views/AboutView.vue b/mobile/src/views/AboutView.vue
index f80b7d4..b3c7e43 100644
--- a/mobile/src/views/AboutView.vue
+++ b/mobile/src/views/AboutView.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
       <IntroductionBanner></IntroductionBanner>
+      <VisionMission></VisionMission>
     </div>
 </template>
 
@@ -10,8 +11,7 @@ import VisionMission from "@/components/about/VisionMission.vue";
 import Roadmap from "@/components/about/Roadmap.vue";
 import Whitepaper from "@/components/about/Whitepaper.vue";
 import LatestNews from "@/components/about/LatestNews.vue";
-import NavBar from "@/components/home/NavBar.vue";
-import FooterBar from "@/components/home/FooterBar.vue";
+
 </script>
 
 <style lang="scss" scoped>