diff --git a/src/assets/202202/roadmap/background.png b/src/assets/202202/roadmap/background.png
new file mode 100644
index 0000000..867fc5e
Binary files /dev/null and b/src/assets/202202/roadmap/background.png differ
diff --git a/src/assets/202202/roadmap/icon-circle.png b/src/assets/202202/roadmap/icon-circle.png
new file mode 100644
index 0000000..a929623
Binary files /dev/null and b/src/assets/202202/roadmap/icon-circle.png differ
diff --git a/src/assets/202202/roadmap/icon-fin-dev-s.png b/src/assets/202202/roadmap/icon-fin-dev-s.png
new file mode 100644
index 0000000..556f5aa
Binary files /dev/null and b/src/assets/202202/roadmap/icon-fin-dev-s.png differ
diff --git a/src/assets/202202/roadmap/icon-fin-dev.png b/src/assets/202202/roadmap/icon-fin-dev.png
new file mode 100644
index 0000000..337404b
Binary files /dev/null and b/src/assets/202202/roadmap/icon-fin-dev.png differ
diff --git a/src/assets/202202/roadmap/icon-gray-tube.png b/src/assets/202202/roadmap/icon-gray-tube.png
new file mode 100644
index 0000000..c717c37
Binary files /dev/null and b/src/assets/202202/roadmap/icon-gray-tube.png differ
diff --git a/src/assets/202202/roadmap/icon-kick-off-s.png b/src/assets/202202/roadmap/icon-kick-off-s.png
new file mode 100644
index 0000000..269c8e9
Binary files /dev/null and b/src/assets/202202/roadmap/icon-kick-off-s.png differ
diff --git a/src/assets/202202/roadmap/icon-kick-off.png b/src/assets/202202/roadmap/icon-kick-off.png
new file mode 100644
index 0000000..d79fe65
Binary files /dev/null and b/src/assets/202202/roadmap/icon-kick-off.png differ
diff --git a/src/assets/202202/roadmap/icon-launch-s.png b/src/assets/202202/roadmap/icon-launch-s.png
new file mode 100644
index 0000000..710da74
Binary files /dev/null and b/src/assets/202202/roadmap/icon-launch-s.png differ
diff --git a/src/assets/202202/roadmap/icon-launch.png b/src/assets/202202/roadmap/icon-launch.png
new file mode 100644
index 0000000..d8c21bf
Binary files /dev/null and b/src/assets/202202/roadmap/icon-launch.png differ
diff --git a/src/assets/202202/roadmap/icon-opersting-s.png b/src/assets/202202/roadmap/icon-opersting-s.png
new file mode 100644
index 0000000..cc331a9
Binary files /dev/null and b/src/assets/202202/roadmap/icon-opersting-s.png differ
diff --git a/src/assets/202202/roadmap/icon-opersting.png b/src/assets/202202/roadmap/icon-opersting.png
new file mode 100644
index 0000000..97d9145
Binary files /dev/null and b/src/assets/202202/roadmap/icon-opersting.png differ
diff --git a/src/assets/202202/roadmap/icon-research-s.png b/src/assets/202202/roadmap/icon-research-s.png
new file mode 100644
index 0000000..52be998
Binary files /dev/null and b/src/assets/202202/roadmap/icon-research-s.png differ
diff --git a/src/assets/202202/roadmap/icon-research.png b/src/assets/202202/roadmap/icon-research.png
new file mode 100644
index 0000000..93a0533
Binary files /dev/null and b/src/assets/202202/roadmap/icon-research.png differ
diff --git a/src/assets/202202/roadmap/icon-text.png b/src/assets/202202/roadmap/icon-text.png
new file mode 100644
index 0000000..fe69d87
Binary files /dev/null and b/src/assets/202202/roadmap/icon-text.png differ
diff --git a/src/assets/202202/roadmap/icon-yellow-tube.png b/src/assets/202202/roadmap/icon-yellow-tube.png
new file mode 100644
index 0000000..12570f7
Binary files /dev/null and b/src/assets/202202/roadmap/icon-yellow-tube.png differ
diff --git a/src/assets/202202/roadmap/step1.png b/src/assets/202202/roadmap/step1.png
new file mode 100644
index 0000000..0b9a957
Binary files /dev/null and b/src/assets/202202/roadmap/step1.png differ
diff --git a/src/assets/202202/roadmap/step2.png b/src/assets/202202/roadmap/step2.png
new file mode 100644
index 0000000..1328ea7
Binary files /dev/null and b/src/assets/202202/roadmap/step2.png differ
diff --git a/src/assets/202202/roadmap/step3.png b/src/assets/202202/roadmap/step3.png
new file mode 100644
index 0000000..b39bfd6
Binary files /dev/null and b/src/assets/202202/roadmap/step3.png differ
diff --git a/src/assets/202202/roadmap/step4.png b/src/assets/202202/roadmap/step4.png
new file mode 100644
index 0000000..aca7c40
Binary files /dev/null and b/src/assets/202202/roadmap/step4.png differ
diff --git a/src/assets/202202/roadmap/step5.png b/src/assets/202202/roadmap/step5.png
new file mode 100644
index 0000000..a65ce32
Binary files /dev/null and b/src/assets/202202/roadmap/step5.png differ
diff --git a/src/assets/202202/tokennomic/allocation-chart.png b/src/assets/202202/tokenomic/allocation-chart.png
similarity index 100%
rename from src/assets/202202/tokennomic/allocation-chart.png
rename to src/assets/202202/tokenomic/allocation-chart.png
diff --git a/src/assets/202202/tokennomic/allocation.png b/src/assets/202202/tokenomic/allocation.png
similarity index 100%
rename from src/assets/202202/tokennomic/allocation.png
rename to src/assets/202202/tokenomic/allocation.png
diff --git a/src/assets/202202/tokennomic/cec.png b/src/assets/202202/tokenomic/cec.png
similarity index 100%
rename from src/assets/202202/tokennomic/cec.png
rename to src/assets/202202/tokenomic/cec.png
diff --git a/src/assets/202202/tokennomic/ceg.png b/src/assets/202202/tokenomic/ceg.png
similarity index 100%
rename from src/assets/202202/tokennomic/ceg.png
rename to src/assets/202202/tokenomic/ceg.png
diff --git a/src/assets/202202/tokennomic/copy.png b/src/assets/202202/tokenomic/copy.png
similarity index 100%
rename from src/assets/202202/tokennomic/copy.png
rename to src/assets/202202/tokenomic/copy.png
diff --git a/src/assets/202202/tokennomic/schedule-table.png b/src/assets/202202/tokenomic/schedule-table.png
similarity index 100%
rename from src/assets/202202/tokennomic/schedule-table.png
rename to src/assets/202202/tokenomic/schedule-table.png
diff --git a/src/assets/202202/tokennomic/schedule.png b/src/assets/202202/tokenomic/schedule.png
similarity index 100%
rename from src/assets/202202/tokennomic/schedule.png
rename to src/assets/202202/tokenomic/schedule.png
diff --git a/src/assets/202202/tokennomic/tab-active.png b/src/assets/202202/tokenomic/tab-active.png
similarity index 100%
rename from src/assets/202202/tokennomic/tab-active.png
rename to src/assets/202202/tokenomic/tab-active.png
diff --git a/src/assets/202202/tokennomic/tokennomic_bg.png b/src/assets/202202/tokenomic/tokennomic_bg.png
similarity index 100%
rename from src/assets/202202/tokennomic/tokennomic_bg.png
rename to src/assets/202202/tokenomic/tokennomic_bg.png
diff --git a/src/assets/202202/tokennomic/user-case.png b/src/assets/202202/tokenomic/user-case.png
similarity index 100%
rename from src/assets/202202/tokennomic/user-case.png
rename to src/assets/202202/tokenomic/user-case.png
diff --git a/src/assets/mobile/tokennomic/cebg_banner4.png b/src/assets/mobile/tokenomic/cebg_banner4.png
similarity index 100%
rename from src/assets/mobile/tokennomic/cebg_banner4.png
rename to src/assets/mobile/tokenomic/cebg_banner4.png
diff --git a/src/components/index/DesktopFooter.vue b/src/components/index/DesktopFooter.vue
index 14c1a10..fa214b0 100644
--- a/src/components/index/DesktopFooter.vue
+++ b/src/components/index/DesktopFooter.vue
@@ -19,7 +19,7 @@
         <div class="title">Product</div>
         <a href="/">Home</a>
         <a href="/gameplay">Gameplay</a>
-        <a href="/tokennomic">Tokennomic</a>
+        <a href="/tokenomic">Tokenomic</a>
         <a href="/nft">NFT</a>
         <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
       </div>
diff --git a/src/components/index/DesktopHeader.vue b/src/components/index/DesktopHeader.vue
index ccb84bd..67efd64 100644
--- a/src/components/index/DesktopHeader.vue
+++ b/src/components/index/DesktopHeader.vue
@@ -7,7 +7,7 @@
       <li :class="{'active': currentSection === 'home'}"><a href="/">Home</a></li>
       <li :class="{'active': currentSection === 'gameplay'}"><a href="/gameplay">GamePlay</a></li>
       <li :class="{'active': currentSection === 'nft'}"><a href="/nft">NFT</a></li>
-      <li :class="{'active': currentSection === 'tokennomic'}"><a href="/tokennomic">Tokennomic</a></li>
+      <li :class="{'active': currentSection === 'tokenomic'}"><a href="/tokenomic">Tokenomic</a></li>
       <li :class="{'active': currentSection === 'team'}" ><a href="/team">Team</a></li>
       <li :class="{'active': currentSection === 'roadmap'}"><a href="/roadmap">Roadmap</a></li>
     </ul>
diff --git a/src/components/mobile/main/MobileFooter.vue b/src/components/mobile/main/MobileFooter.vue
index f608ec5..43adf33 100644
--- a/src/components/mobile/main/MobileFooter.vue
+++ b/src/components/mobile/main/MobileFooter.vue
@@ -22,7 +22,7 @@
         </div>
         <a href="/">Home</a>
         <a href="/gameplay">Gameplay</a>
-        <a href="/tokennomic">Tokennomic</a>
+        <a href="/tokenomic">Tokenomic</a>
         <a href="/nft">NFT</a>
         <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
       </div>
diff --git a/src/components/mobile/main/MobileHeader.vue b/src/components/mobile/main/MobileHeader.vue
index 31cb4ee..afad717 100644
--- a/src/components/mobile/main/MobileHeader.vue
+++ b/src/components/mobile/main/MobileHeader.vue
@@ -7,7 +7,7 @@
         <a class="one-menu" href="/" :class="{'active': currentSection === 'home'}">Home</a>
         <a class="one-menu" href="/gameplay" :class="{'active': currentSection === 'gameplay'}">GamePlay</a>
         <a class="one-menu" href="/nft" :class="{'active': currentSection === 'nft'}">NFT</a>
-        <a class="one-menu" href="/tokennomic" :class="{'active': currentSection === 'tokennomic'}">Tokennomic</a>
+        <a class="one-menu" href="/tokenomic" :class="{'active': currentSection === 'tokenomic'}">Tokenomic</a>
         <a class="one-menu" href="/team" :class="{'active': currentSection === 'team'}">Team</a>
         <a class="one-menu" href="/roadmap" :class="{'active': currentSection === 'roadmap'}">Roadmap</a>
         <div class="market-btn" @click="comingSoon">
diff --git a/src/components/roadmap/InfoPanel.vue b/src/components/roadmap/InfoPanel.vue
new file mode 100644
index 0000000..9bad17e
--- /dev/null
+++ b/src/components/roadmap/InfoPanel.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="root" :class="{'mobile': mobile}">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'InfoPanel',
+  components: {
+  }
+})
+export default class InfoPanel extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.root{
+
+}
+</style>
diff --git a/src/components/roadmap/OneIcon.vue b/src/components/roadmap/OneIcon.vue
new file mode 100644
index 0000000..61b449c
--- /dev/null
+++ b/src/components/roadmap/OneIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'OneIcon',
+  components: {
+  }
+})
+export default class OneIcon extends Vue {}
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/roadmap/ProgressBar.vue b/src/components/roadmap/ProgressBar.vue
new file mode 100644
index 0000000..d496d82
--- /dev/null
+++ b/src/components/roadmap/ProgressBar.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="" :class="{'mobile': mobile}">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'ProgressBar',
+  components: {
+  }
+})
+export default class ProgressBar extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/roadmap/ProgressMap.vue b/src/components/roadmap/ProgressMap.vue
new file mode 100644
index 0000000..453f9f1
--- /dev/null
+++ b/src/components/roadmap/ProgressMap.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="root" :class="{'mobile': mobile}">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'ProgressMap',
+  components: {
+  }
+})
+export default class ProgressMap extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.root{
+  height: 637px;
+  padding: 60px 353px 106px 0
+}
+</style>
diff --git a/src/components/tokennomic/IconTitleBar.vue b/src/components/tokenomic/IconTitleBar.vue
similarity index 100%
rename from src/components/tokennomic/IconTitleBar.vue
rename to src/components/tokenomic/IconTitleBar.vue
diff --git a/src/components/tokennomic/TabAllocation.vue b/src/components/tokenomic/TabAllocation.vue
similarity index 73%
rename from src/components/tokennomic/TabAllocation.vue
rename to src/components/tokenomic/TabAllocation.vue
index 5f9928e..735830b 100644
--- a/src/components/tokennomic/TabAllocation.vue
+++ b/src/components/tokenomic/TabAllocation.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="root" :class="{'mobile': mobile}">
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/allocation.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/allocation.png')"></icon-title-bar>
     <div class="main-img-container">
-      <img class="main-img" src="@/assets/202202/tokennomic/allocation-chart.png" alt="allocation"/>
+      <img class="main-img" src="@/assets/202202/tokenomic/allocation-chart.png" alt="allocation"/>
     </div>
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/schedule.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/schedule.png')"></icon-title-bar>
     <div class="main-img-container">
-      <img class="schedule" src="@/assets/202202/tokennomic/schedule-table.png" alt="schedule"/>
+      <img class="schedule" src="@/assets/202202/tokenomic/schedule-table.png" alt="schedule"/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
+import IconTitleBar from '@/components/tokenomic/IconTitleBar.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
diff --git a/src/components/tokennomic/TabBar.vue b/src/components/tokenomic/TabBar.vue
similarity index 95%
rename from src/components/tokennomic/TabBar.vue
rename to src/components/tokenomic/TabBar.vue
index 64be06e..9873c76 100644
--- a/src/components/tokennomic/TabBar.vue
+++ b/src/components/tokenomic/TabBar.vue
@@ -72,7 +72,7 @@ export default class extends Vue {
     font-size: 24px;
     &.active {
       color: #A37734;
-      background-image: url('../../assets/202202/tokennomic/tab-active.png');
+      background-image: url('../../assets/202202/tokenomic/tab-active.png');
       background-repeat: no-repeat;
       background-position: top;
       background-size: 100% 100%;
diff --git a/src/components/tokennomic/TabCec.vue b/src/components/tokenomic/TabCec.vue
similarity index 77%
rename from src/components/tokennomic/TabCec.vue
rename to src/components/tokenomic/TabCec.vue
index 0714ace..a281aa6 100644
--- a/src/components/tokennomic/TabCec.vue
+++ b/src/components/tokenomic/TabCec.vue
@@ -2,18 +2,18 @@
   <div class="root" :class="{'mobile': mobile}">
     <token-info-table :token-data="tokenInfo"></token-info-table>
     <token-address :token-data="tokenInfo"></token-address>
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/user-case.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/user-case.png')"></icon-title-bar>
     <div class="main-img-container">
-    <img class="main-img" src="@/assets/202202/tokennomic/cec.png" alt="cec"/>
+    <img class="main-img" src="@/assets/202202/tokenomic/cec.png" alt="cec"/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
-import TokenInfoTable, { ITokenData } from '@/components/tokennomic/TokenInfoTable.vue'
-import TokenAddress from '@/components/tokennomic/TokenAddress.vue'
+import IconTitleBar from '@/components/tokenomic/IconTitleBar.vue'
+import TokenInfoTable, { ITokenData } from '@/components/tokenomic/TokenInfoTable.vue'
+import TokenAddress from '@/components/tokenomic/TokenAddress.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
diff --git a/src/components/tokennomic/TabCeg.vue b/src/components/tokenomic/TabCeg.vue
similarity index 77%
rename from src/components/tokennomic/TabCeg.vue
rename to src/components/tokenomic/TabCeg.vue
index 8c2e83c..a169901 100644
--- a/src/components/tokennomic/TabCeg.vue
+++ b/src/components/tokenomic/TabCeg.vue
@@ -2,18 +2,18 @@
   <div class="root" :class="{'mobile': mobile}">
     <token-info-table :token-data="tokenInfo"></token-info-table>
     <token-address :token-data="tokenInfo"></token-address>
-    <icon-title-bar :title-img="require('@/assets/202202/tokennomic/user-case.png')"></icon-title-bar>
+    <icon-title-bar :title-img="require('@/assets/202202/tokenomic/user-case.png')"></icon-title-bar>
     <div class="main-img-container">
-      <img class="main-img" src="@/assets/202202/tokennomic/ceg.png" alt="ceg"/>
+      <img class="main-img" src="@/assets/202202/tokenomic/ceg.png" alt="ceg"/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import IconTitleBar from '@/components/tokennomic/IconTitleBar.vue'
-import TokenInfoTable, { ITokenData } from '@/components/tokennomic/TokenInfoTable.vue'
-import TokenAddress from '@/components/tokennomic/TokenAddress.vue'
+import IconTitleBar from '@/components/tokenomic/IconTitleBar.vue'
+import TokenInfoTable, { ITokenData } from '@/components/tokenomic/TokenInfoTable.vue'
+import TokenAddress from '@/components/tokenomic/TokenAddress.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
diff --git a/src/components/tokennomic/TokenAddress.vue b/src/components/tokenomic/TokenAddress.vue
similarity index 97%
rename from src/components/tokennomic/TokenAddress.vue
rename to src/components/tokenomic/TokenAddress.vue
index 97f4efc..a0bf8d9 100644
--- a/src/components/tokennomic/TokenAddress.vue
+++ b/src/components/tokenomic/TokenAddress.vue
@@ -4,7 +4,7 @@
       <div>${{tokenData.symbol}} Contract Address</div>
       <img
         class='cp-btn'
-        src="@/assets/202202/tokennomic/copy.png"
+        src="@/assets/202202/tokenomic/copy.png"
         v-clipboard:copy="tokenData.address"
         v-clipboard:success="onCopy"
         v-clipboard:error="onCopyError"
diff --git a/src/components/tokennomic/TokenInfoTable.vue b/src/components/tokenomic/TokenInfoTable.vue
similarity index 100%
rename from src/components/tokennomic/TokenInfoTable.vue
rename to src/components/tokenomic/TokenInfoTable.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index 3fabc66..8754928 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,7 +8,7 @@ import Index from '@/views/desktop/Index.vue'
 import Presale from '@/views/desktop/Presale.vue'
 import NFT from '@/views/desktop/NFT.vue'
 import Gameplay from '@/views/desktop/Gameplay.vue'
-import Tokennomic from '@/views/desktop/Tokennomic.vue'
+import Tokenomic from '@/views/desktop/Tokenomic.vue'
 import Team from '@/views/desktop/Team.vue'
 import Roadmap from '@/views/desktop/Roadmap.vue'
 import MobileIndex from '@/views/mobile/Index.vue'
@@ -16,7 +16,7 @@ import { AppModule, DeviceType } from '@/store/modules/app'
 import { isMobile } from '@/utils/resize'
 import MobileGameplay from '@/views/mobile/Gameplay.vue'
 import MobileNft from '@/views/mobile/NFT.vue'
-import MobileTokennomic from '@/views/mobile/Tokennomic.vue'
+import MobileTokennomic from '@/views/mobile/Tokenomic.vue'
 import MobileTeam from '@/views/mobile/Team.vue'
 
 Vue.use(VueRouter)
@@ -75,9 +75,9 @@ const routes: Array<RouteConfig> = [
     component: mobile ? MobileGameplay : Gameplay
   },
   {
-    path: '/tokennomic',
-    name: 'Tokennomic',
-    component: mobile ? MobileTokennomic : Tokennomic
+    path: '/tokenomic',
+    name: 'Tokenomic',
+    component: mobile ? MobileTokennomic : Tokenomic
   },
   {
     path: '/team',
diff --git a/src/views/desktop/Gameplay.vue b/src/views/desktop/Gameplay.vue
index 5c12148..221f344 100644
--- a/src/views/desktop/Gameplay.vue
+++ b/src/views/desktop/Gameplay.vue
@@ -17,7 +17,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
 import VideoSection from '@/components/gameplay/VideoSection.vue'
-import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
+import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
 import DataCell from '@/components/gameplay/DataCell.vue'
 
 @Component({
diff --git a/src/views/desktop/Roadmap.vue b/src/views/desktop/Roadmap.vue
index ea7a657..96088bb 100644
--- a/src/views/desktop/Roadmap.vue
+++ b/src/views/desktop/Roadmap.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="container" :style="cstyle">
     <desktop-header current-section="roadmap"></desktop-header>
+    <div class="content">
+      <div class="title-bar">
+        <img src="@/assets/202202/roadmap/icon-text.png" alt="funder team"/>
+      </div>
+      <progress-map></progress-map>
+    </div>
     <desktop-footer></desktop-footer>
   </div>
 </template>
@@ -9,10 +15,12 @@
 import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
+import ProgressMap from '@/components/roadmap/ProgressMap.vue'
 
 @Component({
   name: 'Roadmap',
   components: {
+    ProgressMap,
     DesktopFooter,
     DesktopHeader
   }
@@ -22,7 +30,6 @@ export default class extends Vue {
   private initWidth = 1920
   get cstyle() {
     return {
-      // transform: `scale(${this.scale})`
       zoom: this.scale
     }
   }
@@ -55,5 +62,23 @@ export default class extends Vue {
   margin: 0 auto;
   background-color: #171717;
   transform-origin: top;
+  .content{
+    width: 1920px;
+    height: 1170px;
+    background-image: url('../../assets/202202/roadmap/background.png');
+    background-repeat: repeat;
+    background-color: white;
+    display: flex;
+    .title-bar {
+      margin-top: 90px;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      img{
+        width: 410px;
+        height: 82px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/desktop/Team.vue b/src/views/desktop/Team.vue
index 5c05119..aef7c07 100644
--- a/src/views/desktop/Team.vue
+++ b/src/views/desktop/Team.vue
@@ -47,7 +47,7 @@ export default class extends Vue {
   private teamList = [{
     avatar: require('@/assets/202202/team/luca_ganzedda.png'),
     name: 'Luca Ganzedda',
-    job: 'Tokennomic Manager',
+    job: 'Tokenomic Manager',
     intro: [
       'Luca has accumulated a lot of project experience in different field, including DAO,NFT, Gamefi and DeFi, and good at token economic model design,digital asset consulting, IDO/IEO guidance.',
       'Luca has the master degree in economics, and double bachelor’s degree in macroeconomics and Economics.'
diff --git a/src/views/desktop/Tokennomic.vue b/src/views/desktop/Tokenomic.vue
similarity index 82%
rename from src/views/desktop/Tokennomic.vue
rename to src/views/desktop/Tokenomic.vue
index 6b74714..771274c 100644
--- a/src/views/desktop/Tokennomic.vue
+++ b/src/views/desktop/Tokenomic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container" :style="cstyle">
-    <desktop-header current-section="tokennomic"></desktop-header>
-    <img class="top-bg" src="@/assets/202202/tokennomic/tokennomic_bg.png" alt="top bg"/>
+    <desktop-header current-section="tokenomic"></desktop-header>
+    <img class="top-bg" src="@/assets/202202/tokenomic/tokennomic_bg.png" alt="top bg"/>
     <tab-bar
       :select-tab="activeTab"
       :tab-datas="tabs"
@@ -19,13 +19,13 @@
 import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
-import TabCec from '@/components/tokennomic/TabCec.vue'
-import TabCeg from '@/components/tokennomic/TabCeg.vue'
-import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
-import TabAllocation from '@/components/tokennomic/TabAllocation.vue'
+import TabCec from '@/components/tokenomic/TabCec.vue'
+import TabCeg from '@/components/tokenomic/TabCeg.vue'
+import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
+import TabAllocation from '@/components/tokenomic/TabAllocation.vue'
 
 @Component({
-  name: 'Tokennomic',
+  name: 'Tokenomic',
   components: {
     TabAllocation,
     TabCeg,
diff --git a/src/views/mobile/Gameplay.vue b/src/views/mobile/Gameplay.vue
index 4e61d52..a200c84 100644
--- a/src/views/mobile/Gameplay.vue
+++ b/src/views/mobile/Gameplay.vue
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import VideoSection from '@/components/gameplay/VideoSection.vue'
-import { ITabData } from '@/components/tokennomic/TabBar.vue'
+import { ITabData } from '@/components/tokenomic/TabBar.vue'
 import DataCell from '@/components/gameplay/DataCell.vue'
 import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
 import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
diff --git a/src/views/mobile/Team.vue b/src/views/mobile/Team.vue
index 7f594c5..f0781b0 100644
--- a/src/views/mobile/Team.vue
+++ b/src/views/mobile/Team.vue
@@ -49,7 +49,7 @@ export default class MobileTeam extends Vue {
   private teamList = [{
     avatar: require('@/assets/202202/team/luca_ganzedda.png'),
     name: 'Luca Ganzedda',
-    job: 'Tokennomic Manager',
+    job: 'Tokenomic Manager',
     intro: [
       'Luca has accumulated a lot of project experience in different field, including DAO,NFT, Gamefi and DeFi, and good at token economic model design,digital asset consulting, IDO/IEO guidance.',
       'Luca has the master degree in economics, and double bachelor’s degree in macroeconomics and Economics.'
diff --git a/src/views/mobile/Tokennomic.vue b/src/views/mobile/Tokenomic.vue
similarity index 77%
rename from src/views/mobile/Tokennomic.vue
rename to src/views/mobile/Tokenomic.vue
index 998d0ab..66911c5 100644
--- a/src/views/mobile/Tokennomic.vue
+++ b/src/views/mobile/Tokenomic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container" >
-    <mobile-header current-section="tokennomic"></mobile-header>
-    <img class="top-bg" src="@/assets/mobile/tokennomic/cebg_banner4.png" alt="top bg"/>
+    <mobile-header current-section="tokenomic"></mobile-header>
+    <img class="top-bg" src="@/assets/mobile/tokenomic/cebg_banner4.png" alt="top bg"/>
     <tab-bar
       :select-tab="activeTab"
       :tab-datas="tabs"
@@ -18,16 +18,16 @@
 import { Component, Vue } from 'vue-property-decorator'
 import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
-import TabCec from '@/components/tokennomic/TabCec.vue'
-import TabCeg from '@/components/tokennomic/TabCeg.vue'
-import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
-import TabAllocation from '@/components/tokennomic/TabAllocation.vue'
+import TabCec from '@/components/tokenomic/TabCec.vue'
+import TabCeg from '@/components/tokenomic/TabCeg.vue'
+import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
+import TabAllocation from '@/components/tokenomic/TabAllocation.vue'
 import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
 import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
 @Component({
-  name: 'MobileTokennomic',
+  name: 'MobileTokenomic',
   components: {
     MobileFooter,
     MobileHeader,
@@ -39,7 +39,7 @@ import { AppModule, DeviceType } from '@/store/modules/app'
     TabBar
   }
 })
-export default class MobileTokennomic extends Vue {
+export default class MobileTokenomic extends Vue {
   private activeTab = 'cec'
 
   get mobile() {