diff --git a/src/views/desktop/Gameplay.vue b/src/views/desktop/Gameplay.vue
index e674c01..7ae1551 100644
--- a/src/views/desktop/Gameplay.vue
+++ b/src/views/desktop/Gameplay.vue
@@ -8,7 +8,7 @@
       @tab-change="tabChange"
     ></tab-bar>
     <data-cell v-for="data in currentCell" :key="data.title" :data="data"></data-cell>
-    <desktop-footer></desktop-footer>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -19,10 +19,12 @@ import DesktopFooter from '@/components/index/DesktopFooter.vue'
 import VideoSection from '@/components/gameplay/VideoSection.vue'
 import TabBar, { ITabData } from '@/components/tokenomic/TabBar.vue'
 import DataCell from '@/components/gameplay/DataCell.vue'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   name: 'Gameplay',
   components: {
+    BaseFooter,
     DataCell,
     VideoSection,
     DesktopFooter,
diff --git a/src/views/desktop/Index.vue b/src/views/desktop/Index.vue
index f90964f..f0213f8 100644
--- a/src/views/desktop/Index.vue
+++ b/src/views/desktop/Index.vue
@@ -6,7 +6,7 @@
     <hero-section></hero-section>
     <investors-section></investors-section>
     <partner-section></partner-section>
-    <desktop-footer></desktop-footer>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -19,10 +19,12 @@ import TopSection from '@/components/index/TopSection.vue'
 import MainSection from '@/components/index/MainSection.vue'
 import HeroSection from '@/components/index/HeroSection.vue'
 import PartnerSection from '@/components/index/PartnerSection.vue'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   name: 'Index',
   components: {
+    BaseFooter,
     PartnerSection,
     HeroSection,
     MainSection,
diff --git a/src/views/desktop/NFT.vue b/src/views/desktop/NFT.vue
index 07b10f4..ffabccd 100644
--- a/src/views/desktop/NFT.vue
+++ b/src/views/desktop/NFT.vue
@@ -5,8 +5,8 @@
     <nft-section @dialog-show="showInfo(0)" ></nft-section>
     <weapon-section @dialog-show="showInfo(1)"></weapon-section>
     <chip-section @dialog-show="showInfo(2)"></chip-section>
-    <desktop-footer></desktop-footer>
     <nft-info :dialog-show="infoShow" :type="infoType" @dialog-show="infoShowStatusChange"></nft-info>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -19,10 +19,12 @@ import NftSection from '@/components/nft/NftSection.vue'
 import WeaponSection from '@/components/nft/WeaponSection.vue'
 import ChipSection from '@/components/nft/ChipSection.vue'
 import NftInfo from '@/components/nft/NftInfo.vue'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   name: 'Nft',
   components: {
+    BaseFooter,
     NftInfo,
     ChipSection,
     WeaponSection,
diff --git a/src/views/desktop/Official.vue b/src/views/desktop/Official.vue
index 83c444b..0a9370b 100644
--- a/src/views/desktop/Official.vue
+++ b/src/views/desktop/Official.vue
@@ -9,6 +9,7 @@
       <nft-list></nft-list>
     </div>
   </section>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -19,9 +20,11 @@ import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
 import NftList from '@/components/market/NftList.vue'
 import NftTypeBar from '@/components/market/NftTypeBar.vue'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   components: {
+    BaseFooter,
     NftTypeBar,
     NftList,
     SearchResult,
diff --git a/src/views/desktop/Roadmap.vue b/src/views/desktop/Roadmap.vue
index 0d7b7aa..bfd23d2 100644
--- a/src/views/desktop/Roadmap.vue
+++ b/src/views/desktop/Roadmap.vue
@@ -7,7 +7,7 @@
       </div>
       <progress-map></progress-map>
     </div>
-    <desktop-footer></desktop-footer>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -16,10 +16,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'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   name: 'Roadmap',
   components: {
+    BaseFooter,
     ProgressMap,
     DesktopFooter,
     DesktopHeader
diff --git a/src/views/desktop/Team.vue b/src/views/desktop/Team.vue
index bb731ed..7fc7c92 100644
--- a/src/views/desktop/Team.vue
+++ b/src/views/desktop/Team.vue
@@ -15,7 +15,7 @@
         <advisor-member v-for="(d, i) in advisors" :data="d" :key="i"></advisor-member>
       </div>
     </div>
-    <desktop-footer></desktop-footer>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -25,10 +25,12 @@ import DesktopHeader from '@/components/index/DesktopHeader.vue'
 import DesktopFooter from '@/components/index/DesktopFooter.vue'
 import TeamMember from '@/components/team/Member.vue'
 import AdvisorMember from '@/components/team/AdvisorMember.vue'
+import BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   name: 'Team',
   components: {
+    BaseFooter,
     AdvisorMember,
     TeamMember,
     DesktopFooter,
diff --git a/src/views/desktop/Tokenomic.vue b/src/views/desktop/Tokenomic.vue
index 663050f..529b4ad 100644
--- a/src/views/desktop/Tokenomic.vue
+++ b/src/views/desktop/Tokenomic.vue
@@ -11,7 +11,7 @@
     <tab-cec v-show="activeTab==='cec'"></tab-cec>
     <tab-ceg v-show="activeTab==='ceg'"></tab-ceg>
     <tab-allocation v-show="activeTab==='allocation'" ></tab-allocation>
-    <desktop-footer></desktop-footer>
+    <base-footer></base-footer>
   </div>
 </template>
 
@@ -23,10 +23,12 @@ 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 BaseFooter from '@/components/layout/BaseFooter.vue'
 
 @Component({
   name: 'Tokenomic',
   components: {
+    BaseFooter,
     TabAllocation,
     TabCeg,
     TabCec,