diff --git a/public/assets/fonts/zitic-regular.ttf b/public/assets/fonts/zitic-regular.ttf
new file mode 100644
index 0000000..e52b403
Binary files /dev/null and b/public/assets/fonts/zitic-regular.ttf differ
diff --git a/public/index.html b/public/index.html
index 9b0e917..bf3049d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,6 +20,10 @@
             font-family: zitic;
             src: url('/assets/fonts/zitic.ttf');
         }
+        @font-face {
+            font-family: zitic-r;
+            src: url('/assets/fonts/zitic-regular.ttf');
+        }
         html *
         {
             font-family: zitic,serif;
diff --git a/src/assets/202202/roadmap/background.png b/src/assets/202202/roadmap/background.png
index 3102793..354b10b 100644
Binary files a/src/assets/202202/roadmap/background.png 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
index a9ecd65..4b75bb5 100644
Binary files a/src/assets/202202/roadmap/icon-circle.png 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
index d06f167..eb13fc7 100644
Binary files a/src/assets/202202/roadmap/icon-fin-dev-s.png 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
index a8e9bbd..f5c12ea 100644
Binary files a/src/assets/202202/roadmap/icon-fin-dev.png and b/src/assets/202202/roadmap/icon-fin-dev.png differ
diff --git a/src/assets/202202/roadmap/icon-kick-off-s.png b/src/assets/202202/roadmap/icon-kick-off-s.png
index ee33368..06da96b 100644
Binary files a/src/assets/202202/roadmap/icon-kick-off-s.png 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
index 92391d7..ca709d0 100644
Binary files a/src/assets/202202/roadmap/icon-kick-off.png 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
index e8332b8..6db22e8 100644
Binary files a/src/assets/202202/roadmap/icon-launch-s.png 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
index 23542cc..733378c 100644
Binary files a/src/assets/202202/roadmap/icon-launch.png 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
index 0f5e392..dddd336 100644
Binary files a/src/assets/202202/roadmap/icon-opersting-s.png 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
index dd04dc8..b891d38 100644
Binary files a/src/assets/202202/roadmap/icon-opersting.png 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
index e4e3943..4516c63 100644
Binary files a/src/assets/202202/roadmap/icon-research-s.png 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
index 3d522e6..f3c2767 100644
Binary files a/src/assets/202202/roadmap/icon-research.png 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
index ccaf683..db1558f 100644
Binary files a/src/assets/202202/roadmap/icon-text.png 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
index 9a365fe..b53cde0 100644
Binary files a/src/assets/202202/roadmap/icon-yellow-tube.png 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
index eef0410..ecedac6 100644
Binary files a/src/assets/202202/roadmap/step1.png 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
index 60c7b7e..42e667f 100644
Binary files a/src/assets/202202/roadmap/step2.png 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
index 4a419e2..bf138b7 100644
Binary files a/src/assets/202202/roadmap/step3.png 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
index f1b9dca..8845dad 100644
Binary files a/src/assets/202202/roadmap/step4.png 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
index cefc656..43427ba 100644
Binary files a/src/assets/202202/roadmap/step5.png and b/src/assets/202202/roadmap/step5.png differ
diff --git a/src/components/roadmap/InfoPanel.vue b/src/components/roadmap/InfoPanel.vue
index 7f3c01b..5018166 100644
--- a/src/components/roadmap/InfoPanel.vue
+++ b/src/components/roadmap/InfoPanel.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="info-panel" :class="{'mobile': mobile}">
-    <img :src="img" alt="step" />
+    <road-deck :deck-data="currentDeckData"></road-deck>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule, DeviceType } from '@/store/modules/app'
+import RoadDeck from '@/components/roadmap/RoadDeck.vue'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -16,18 +17,93 @@ declare module 'vue/types/vue' {
 @Component({
   name: 'InfoPanel',
   components: {
+    RoadDeck
   },
   props: ['dataIndex']
 })
 export default class InfoPanel extends Vue {
+  private currentIdx = 1
   private img = require('@/assets/202202/roadmap/step1.png')
+
+  private infos = [
+    {
+      id: 1,
+      texts: [
+        {
+          title: 'Jul. 2021',
+          desc: ['Game development kick off']
+        }
+      ]
+    },
+    {
+      id: 2,
+      texts: [
+        {
+          title: 'Nov. 2021',
+          desc: ['Complete Alpha Test']
+        }
+      ]
+    },
+    {
+      id: 3,
+      texts: [
+        {
+          title: 'Jan. 2022',
+          desc: ['Angel round financing']
+        },
+        {
+          title: 'Feb. 2022',
+          desc: ['Private round financing', 'Official website & whitepaper']
+        },
+        {
+          title: 'Mar. 2022',
+          desc: ['IGO', 'Beta test']
+        }
+      ]
+    },
+    {
+      id: 4,
+      texts: [
+        {
+          title: 'Apr. 2022',
+          desc: ['IDO', 'Official publication, including:', '- Free-to-play ', '- PVP', '- Chatting room ', '- NFT can be leveled up to Lv.10']
+        },
+        {
+          title: 'May. 2022',
+          desc: ['New function release:', 'PVE', 'PVP Ranking NFT', 'can be leveled up to Lv.15', 'Mobile version on App Store and Google Play']
+        }
+      ]
+    },
+    {
+      id: 5,
+      texts: [
+        {
+          title: 'Jan. 2022',
+          desc: ['Streaming to 3rd party platform']
+        },
+        {
+          title: 'Jul. 2022',
+          desc: ['Endorsement from famous esport player']
+        },
+        {
+          title: 'Aug. 2022',
+          desc: ['3D version game available']
+        }
+      ]
+    }
+  ]
+
   get mobile() {
     return AppModule.device === DeviceType.Mobile
   }
 
   @Watch('dataIndex')
   private indexChange() {
-    this.img = require(`@/assets/202202/roadmap/step${this.dataIndex || 1}.png`)
+    this.currentIdx = this.dataIndex!
+  }
+
+  get currentDeckData() {
+    return this.infos[(this.dataIndex || 1) - 1]
   }
 }
 </script>
diff --git a/src/components/roadmap/RoadDeck.vue b/src/components/roadmap/RoadDeck.vue
new file mode 100644
index 0000000..ae2534d
--- /dev/null
+++ b/src/components/roadmap/RoadDeck.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="road-deck" :class="{'mobile': mobile}" :style="cstyle">
+    <div class="content">
+      <div class="one-line" v-for="d in deckData.texts" :key="d.title">
+        <div class="title">
+          {{d.title}}
+        </div>
+        <div class="desc" v-for="s in d.desc" :key="s">
+          {{s}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+export interface IDeckData{
+  id: number
+  texts: [
+    {
+      title: string
+      desc: [string]
+    }
+  ]
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    deckData?: IDeckData
+  }
+}
+
+@Component({
+  name: 'RoadDeck',
+  components: {
+  },
+  props: ['deckData']
+})
+export default class RoadDeck extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
+  get cstyle() {
+    const bgImg = require(`@/assets/202202/roadmap/step${this.deckData!.id}.png`)
+    return {
+      'background-image': `url(${bgImg})`
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .road-deck{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    position: relative;
+    .content{
+      position: absolute;
+      width: 280px;
+      height: 280px;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .one-line{
+        &:not(:first-child) {
+          margin-top: 10px;
+        }
+        .title{
+          color: #DA7C00;
+          font-size: 24px;
+        }
+        .desc{
+          color: #5A5A5A;
+          font-family: zitic-r,serif;
+          font-size: 14px;
+        }
+      }
+    }
+
+  }
+  .road-deck.mobile{
+    .content{
+      width: 60vw;
+      height: 60vw;
+      .one-line{
+        &:not(:first-child) {
+          margin-top: 4vw;
+        }
+        .title{
+          color: #DA7C00;
+          font-size: 4.3vw;
+        }
+        .desc{
+          color: #5A5A5A;
+          font-size: 3vw;
+        }
+      }
+    }
+  }
+</style>