diff --git a/src/assets/main/avatar/n_aoi.png b/src/assets/main/avatar/n_aoi.png
new file mode 100644
index 0000000..6ef5b87
Binary files /dev/null and b/src/assets/main/avatar/n_aoi.png differ
diff --git a/src/assets/main/avatar/n_astral.png b/src/assets/main/avatar/n_astral.png
new file mode 100644
index 0000000..2880bc9
Binary files /dev/null and b/src/assets/main/avatar/n_astral.png differ
diff --git a/src/assets/main/avatar/n_canoe.png b/src/assets/main/avatar/n_canoe.png
new file mode 100644
index 0000000..09a3412
Binary files /dev/null and b/src/assets/main/avatar/n_canoe.png differ
diff --git a/src/assets/main/avatar/n_dragonscale.png b/src/assets/main/avatar/n_dragonscale.png
new file mode 100644
index 0000000..0e23876
Binary files /dev/null and b/src/assets/main/avatar/n_dragonscale.png differ
diff --git a/src/assets/main/avatar/n_hill.png b/src/assets/main/avatar/n_hill.png
new file mode 100644
index 0000000..86a233b
Binary files /dev/null and b/src/assets/main/avatar/n_hill.png differ
diff --git a/src/assets/main/avatar/n_kurosawa.png b/src/assets/main/avatar/n_kurosawa.png
new file mode 100644
index 0000000..82a75d6
Binary files /dev/null and b/src/assets/main/avatar/n_kurosawa.png differ
diff --git a/src/assets/main/avatar/n_lazar.png b/src/assets/main/avatar/n_lazar.png
new file mode 100644
index 0000000..20daf30
Binary files /dev/null and b/src/assets/main/avatar/n_lazar.png differ
diff --git a/src/assets/main/avatar/n_mariana.png b/src/assets/main/avatar/n_mariana.png
new file mode 100644
index 0000000..e54b6bc
Binary files /dev/null and b/src/assets/main/avatar/n_mariana.png differ
diff --git a/src/assets/main/avatar/n_miffy.png b/src/assets/main/avatar/n_miffy.png
new file mode 100644
index 0000000..3302aa4
Binary files /dev/null and b/src/assets/main/avatar/n_miffy.png differ
diff --git a/src/assets/main/avatar/n_yamada.png b/src/assets/main/avatar/n_yamada.png
new file mode 100644
index 0000000..634fa0a
Binary files /dev/null and b/src/assets/main/avatar/n_yamada.png differ
diff --git a/src/components/market/NftInfo.vue b/src/components/market/NftInfo.vue
index a22b95e..a07835e 100644
--- a/src/components/market/NftInfo.vue
+++ b/src/components/market/NftInfo.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="card-outlet">
-    <div class="nft-id">#{{data.id}}</div>
+  <div class="card-info-outlet">
   <a class="card-root" :href="data.id? `/item/${data.id}`: 'javascript:void(0)'">
-    <div class="nft-id">#{{data.id}}</div>
-    <nft-item :data="data" ></nft-item>
+    <hero-nft :data="data" class="item"></hero-nft>
     <div class="attr-div">
 <!--      <div class="one-col-info nft-id-mobile">-->
 <!--        <div class="one-info">-->
@@ -52,6 +50,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { ISpineData } from '@/utils/SpineRender'
 import NftItem from '@/components/market/NftItem.vue'
+import HeroNft from '@/components/market/nft/HeroNft.vue'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -62,6 +61,7 @@ declare module 'vue/types/vue' {
 @Component({
   name: 'NftInfo',
   components: {
+    HeroNft,
     NftItem
   },
   props: ['data']
@@ -72,7 +72,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.card-outlet{
+.card-info-outlet{
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -147,13 +147,13 @@ export default class extends Vue {
     }
   }
   @media (max-width: 767px) {
-    .card-outlet{
+    .card-info-outlet{
       display: flex;
       flex-direction: column;
       align-items: center;
-      width: 100%;
+      width: 100vw;
       .nft-id {
-        width: 90%;
+        width: 100%;
         color: #46E0F4;
         text-decoration: none;
         margin-bottom: 5px;
@@ -161,19 +161,19 @@ export default class extends Vue {
       }
     }
     .card-root{
-      width: 90%;
+      width: 85vw;
       flex-direction: row;
       justify-content: space-between;
       .card{
-        width: 40vw;
+        width: 50vw;
       }
       .nft-id{
         display: none;
       }
       .attr-div{
-        width: 45vw;
-        margin-top: 0;
-        margin-left: 20px;
+        width: 35vw;
+        margin-top: 16px;
+        margin-left: 0;
         .two-col-info {
           display: flex;
           flex-direction: column;
diff --git a/src/components/market/NftList.vue b/src/components/market/NftList.vue
index 1a77a3c..163c6d3 100644
--- a/src/components/market/NftList.vue
+++ b/src/components/market/NftList.vue
@@ -30,14 +30,35 @@ declare module 'vue/types/vue' {
 export default class extends Vue {
   private cardList: ISpineData[] = []
 
-  @Watch('nftDatas')
-  private onNftDataChange() {
-    if (!this.nftDatas) {
-      return
-    }
-    this.cardList.length = 0
-    for (const data of this.nftDatas) {
-      this.cardList.push(data)
+  // @Watch('nftDatas')
+  // private onNftDataChange() {
+  //   if (!this.nftDatas) {
+  //     return
+  //   }
+  //   this.cardList.length = 0
+  //   for (const data of this.nftDatas) {
+  //     this.cardList.push(data)
+  //   }
+  // }
+
+  created() {
+    for (let i = 0; i < 10; i++) {
+      this.cardList.push({
+        id: '10000000000' + i,
+        type: 0,
+        skelName: 'n_aoi',
+        name: 'miffy',
+        price: 10,
+        priceDiscount: 10,
+        decimals: 0,
+        currency: 'BNB',
+        class: 0,
+        repeat: false,
+        showBuy: false,
+        info: {
+          level: 1
+        }
+      })
     }
   }
 }
@@ -46,6 +67,7 @@ export default class extends Vue {
 .card-list {
   margin-top: 2.0265em;
   width: 100%;
+  margin-bottom: 2em;
 }
 
 .card-list .grid {
diff --git a/src/components/market/NftTypeBar.vue b/src/components/market/NftTypeBar.vue
index 1315b0d..ff46e55 100644
--- a/src/components/market/NftTypeBar.vue
+++ b/src/components/market/NftTypeBar.vue
@@ -40,7 +40,7 @@ export default class NftTypeBar extends Vue {
   box-sizing: border-box;
   .type-item{
     font-size: 20px;
-    line-height: 32px;
+    line-height: 18px;
     cursor: pointer;
     &.active{
       color: #46E0F4;
diff --git a/src/components/market/SearchResult.vue b/src/components/market/SearchResult.vue
index c919c0e..c0c3f05 100644
--- a/src/components/market/SearchResult.vue
+++ b/src/components/market/SearchResult.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="searchResult">
     <div class="wrapper">
-      <sort-select v-if="showSort"></sort-select>
+      <sort-select
+        v-if="showSort"
+        :filters="sorts"
+        @filter-change="sortChange"
+      ></sort-select>
       <button class="general-btn btnFilter" v-if="showSort" @click="showFilter">
         <span>FILTERS</span>
       </button>
@@ -31,9 +35,14 @@ declare module 'vue/types/vue' {
   props: ['showSort']
 })
 export default class extends Vue {
+  private sorts = ['None', 'Latest', 'Cheapest Item', 'Most Expensive']
   showFilter() {
     this.$emit('filter-show', true)
   }
+
+  sortChange(id: number) {
+    console.log('sort change: ', id)
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -62,9 +71,10 @@ export default class extends Vue {
 .searchResult .wrapper .btnFilter {
   width: 14.5em;
   font-size: inherit;
-  height: auto;
+  height: 40px;
   padding: 1em 0;
   display: none;
+  line-height: 18px;
   border-radius: 0.5em;
   background: #3b2a8b;
 }
diff --git a/src/components/market/SortSelect.vue b/src/components/market/SortSelect.vue
index 77cd501..e4778d2 100644
--- a/src/components/market/SortSelect.vue
+++ b/src/components/market/SortSelect.vue
@@ -16,7 +16,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component({
   name: 'SortSelect',
@@ -26,7 +26,7 @@ import { Component, Vue } from 'vue-property-decorator'
 export default class extends Vue {
   dropShow = false
   selectedIndex = 0
-  filters = ['None', 'Latest', 'Cheapest Item', 'Most Expensive']
+  @Prop() filters: string[]
 
   toggleMenu() {
     this.dropShow = !this.dropShow
@@ -39,7 +39,7 @@ export default class extends Vue {
   selectItem(val: number) {
     this.selectedIndex = val
     this.toggleMenu()
-    this.$emit('filter-change', this.itemSelect)
+    this.$emit('filter-change', this.selectedIndex)
   }
 }
 </script>
@@ -91,6 +91,7 @@ export default class extends Vue {
   font-weight: lighter;
   font-size: 1.125em;
   color: white;
+  text-transform: capitalize;
 }
 
 .sort-select .label.placeholder {
@@ -129,6 +130,7 @@ export default class extends Vue {
   font-weight: lighter;
   font-size: 1.125em;
   color: white;
+  text-transform: capitalize;
   &:not(:last-child) {
     border-bottom: 1px solid #5D58B2;
   }
diff --git a/src/components/market/TopMenu.vue b/src/components/market/TopMenu.vue
index 43a0292..4a686bd 100644
--- a/src/components/market/TopMenu.vue
+++ b/src/components/market/TopMenu.vue
@@ -34,18 +34,18 @@
         <div v-if="!logined" @click="collectToWallet" class="walletBtn active">
           <span>Connect Wallet</span>
         </div>
-        <div v-if="logined" @click="disconnectWallet" class="walletBtn">
-          <span>Logout</span>
-        </div>
-<!--        <img-->
-<!--          draggable="false"-->
-<!--          v-if="walletCollected"-->
-<!--          class="avatar"-->
-<!--          ref="avatar"-->
-<!--          src="https://assets.thetanarena.com/cosmetic/avatar/3.png"-->
-<!--          alt="avatar"-->
-<!--          @click="infoPanelShow=!infoPanelShow"-->
-<!--        >-->
+<!--        <div v-if="logined" @click="disconnectWallet" class="walletBtn">-->
+<!--          <span>Logout</span>-->
+<!--        </div>-->
+        <img
+          draggable="false"
+          v-if="logined"
+          class="avatar"
+          ref="avatar"
+          src="@/assets/main/avatar/n_aoi.png"
+          alt="avatar"
+          @click="infoPanelShow=!infoPanelShow"
+        >
       </div>
     </div>
     <top-user-info
@@ -66,24 +66,24 @@
       <a class="navItem" href="javascript:void(0);" @click.stop="comingSoon">Official Shop</a>
       <a class="navItem dash" href="javascript:void(0);" @click.stop="comingSoon">Marketplace</a>
       <label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
-      <!--      <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">-->
-      <!--        <span>Connect Wallet</span>-->
-      <!--      </button>-->
-      <!--      <label class="navItem contact">Contact us</label>-->
-      <!--      <label class="navItem profile" v-if="walletCollected" @click="subShow=!subShow">-->
-      <!--        <div>My Profile</div>-->
-      <!--        <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">-->
-      <!--      </label>-->
+      <button v-if="!logined" class="general-btn connectButton mobile" @click="collectToWallet">
+        <span>Connect Wallet</span>
+      </button>
+<!--      <label class="navItem contact">Contact us</label>-->
+      <label class="navItem profile" v-if="logined" @click="subShow=!subShow">
+        <div>My Profile</div>
+        <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
+      </label>
       <label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
       <div class="navChild" :class="{'show': subShow}">
         <label class="navItem profile" @click="subShow=!subShow">
           <img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
           <div class="lbl">My Profile</div>
         </label>
-        <label class="navItem">Inventory</label>
-        <label class="navItem">Account Setting</label>
-        <label class="navItem">Wallet</label>
-        <label class="navItem contact">Contact us</label>
+        <a class="navItem" href="/mynft">Inventory</a>
+        <a class="navItem" href="javascript:void(0)" @click="comingSoon">Account Setting</a>
+        <a class="navItem" href="javascript:void(0)" @click="comingSoon">Wallet</a>
+<!--        <label class="navItem contact">Contact us</label>-->
       </div>
     </div>
   </div>
diff --git a/src/components/market/TopUserInfo.vue b/src/components/market/TopUserInfo.vue
index c04066d..31423a5 100644
--- a/src/components/market/TopUserInfo.vue
+++ b/src/components/market/TopUserInfo.vue
@@ -17,15 +17,15 @@
       <div class="menu">
         <div class="item">
           <img class="icon" src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0)'%3e %3cpath d='M8.39289 16.2647L10.5253 21.7961H0.770458L2.84474 16.2647H8.39289Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M13.474 21.7961L15.6063 16.2647H21.0965L23.2289 21.7961H13.474ZM21.0849 16.2345L21.085 16.2349L21.0849 16.2345Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M7.14497 13.3584L9.21925 7.827H14.6036L16.8507 13.3584H7.14497Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M12.7031 3.56334V2.15706C12.7031 1.76841 12.3887 1.45392 12 1.45392C11.6114 1.45392 11.2969 1.76841 11.2969 2.15706V3.56334C11.2969 3.95199 11.6114 4.26648 12 4.26648C12.3887 4.26648 12.7031 3.95199 12.7031 3.56334Z' fill='white' /%3e %3cpath d='M14.9584 4.85562C15.3156 5.00351 15.7293 4.83508 15.8772 4.47451L16.4141 3.17534C16.5624 2.81622 16.3921 2.40559 16.0337 2.25727C15.6739 2.10825 15.2619 2.27926 15.115 2.63837L14.578 3.93755C14.4296 4.29671 14.5999 4.7073 14.9584 4.85562Z' fill='white' /%3e %3cpath d='M9.03678 4.85562C9.39519 4.7073 9.56549 4.29531 9.41718 3.93685L8.87885 2.63772C8.73054 2.27997 8.32267 2.10901 7.96008 2.25732C7.60166 2.40564 7.43136 2.81763 7.57968 3.1761L8.11801 4.47527C8.2689 4.83762 8.68169 5.00267 9.03678 4.85562Z' fill='white' /%3e %3cpath d='M20.4376 4.26443C20.0489 4.26443 19.7344 4.57893 19.7344 4.96758V5.67072H19.0313C18.6426 5.67072 18.3281 5.98521 18.3281 6.37386C18.3281 6.76251 18.6426 7.077 19.0313 7.077H19.7344V7.78015C19.7344 8.1688 20.0489 8.48329 20.4376 8.48329C20.8262 8.48329 21.1407 8.1688 21.1407 7.78015V7.077H21.8438C22.2325 7.077 22.547 6.76251 22.547 6.37386C22.547 5.98521 22.2325 5.67072 21.8438 5.67072H21.1407V4.96758C21.1407 4.57893 20.8262 4.26443 20.4376 4.26443Z' fill='white' /%3e %3cpath d='M3.56133 7.077C3.17268 7.077 2.85819 7.39149 2.85819 7.78014V8.48328H2.15505C1.7664 8.48328 1.4519 8.79777 1.4519 9.18642C1.4519 9.57507 1.7664 9.88956 2.15505 9.88956H2.85819V10.5927C2.85819 10.9813 3.17268 11.2958 3.56133 11.2958C3.94998 11.2958 4.26447 10.9813 4.26447 10.5927V9.88956H4.96761C5.35626 9.88956 5.67075 9.57507 5.67075 9.18642C5.67075 8.79777 5.35626 8.48328 4.96761 8.48328H4.26447V7.78014C4.26447 7.39149 3.94998 7.077 3.56133 7.077Z' fill='white' /%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0'%3e %3crect width='24' height='24' fill='white' /%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e">
-          <span class="itemName">Inventory</span>
+          <a class="itemName" href="/mynft">Inventory</a>
         </div>
         <div class="item">
           <img class="icon" src="data:image/svg+xml,%3csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.8067 6.62358L18.1842 5.54349C17.6577 4.62957 16.4907 4.31429 15.5755 4.83869V4.83869C15.1399 5.09531 14.6201 5.16812 14.1307 5.04106C13.6413 4.91399 13.2226 4.59749 12.9668 4.16134C12.8023 3.88412 12.7139 3.56836 12.7105 3.24601V3.24601C12.7254 2.72919 12.5304 2.22837 12.17 1.85764C11.8096 1.48691 11.3145 1.27783 10.7975 1.27805H9.5435C9.03697 1.27804 8.55131 1.47988 8.194 1.83891C7.83669 2.19795 7.63717 2.68456 7.63961 3.19109V3.19109C7.6246 4.23689 6.77248 5.07678 5.72657 5.07667C5.40421 5.07332 5.08846 4.98491 4.81123 4.82038V4.82038C3.89606 4.29598 2.72911 4.61126 2.20254 5.52519L1.53435 6.62358C1.00841 7.53636 1.3194 8.70258 2.23 9.23228V9.23228C2.8219 9.57401 3.18653 10.2056 3.18653 10.889C3.18653 11.5725 2.8219 12.204 2.23 12.5458V12.5458C1.32056 13.0719 1.00923 14.2353 1.53435 15.1453V15.1453L2.16593 16.2346C2.41265 16.6798 2.8266 17.0083 3.31619 17.1474C3.80578 17.2866 4.33064 17.2249 4.77462 16.976V16.976C5.21108 16.7213 5.73119 16.6515 6.21934 16.7822C6.70749 16.9128 7.12324 17.233 7.37416 17.6716C7.5387 17.9489 7.62711 18.2646 7.63046 18.587V18.587C7.63046 19.6435 8.48696 20.5 9.5435 20.5H10.7975C11.8505 20.5 12.7055 19.6491 12.7105 18.5961V18.5961C12.7081 18.088 12.9089 17.6 13.2682 17.2407C13.6275 16.8814 14.1155 16.6806 14.6236 16.6831C14.9452 16.6917 15.2596 16.7797 15.5389 16.9394V16.9394C16.4517 17.4653 17.6179 17.1543 18.1476 16.2437V16.2437L18.8067 15.1453C19.0618 14.7075 19.1318 14.186 19.0012 13.6963C18.8706 13.2067 18.5502 12.7893 18.111 12.5366V12.5366C17.6718 12.2839 17.3514 11.8665 17.2208 11.3769C17.0902 10.8873 17.1603 10.3658 17.4154 9.92793C17.5812 9.63831 17.8214 9.39817 18.111 9.23228V9.23228C19.0161 8.70286 19.3264 7.54346 18.8067 6.63274V6.63274V6.62358Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3ccircle cx='10.175' cy='10.889' r='2.63616' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
-          <span class="itemName">Account Setting</span>
+          <a class="itemName" href="javascript:void(0)" @click="comingSoon">Account Setting</a>
         </div>
         <div class="item">
           <img class="icon" src="data:image/svg+xml,%3csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.6389 12.3958H16.5906C15.1042 12.3949 13.8993 11.1909 13.8984 9.70449C13.8984 8.21804 15.1042 7.01413 16.5906 7.01321H20.6389' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M17.0485 9.64288H16.7369' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.74766 1H15.3911C18.2892 1 20.6388 3.34951 20.6388 6.24766V13.4247C20.6388 16.3229 18.2892 18.6724 15.3911 18.6724H6.74766C3.84951 18.6724 1.5 16.3229 1.5 13.4247V6.24766C1.5 3.34951 3.84951 1 6.74766 1Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M6.03564 5.53816H11.4346' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
-          <span class="itemName">Wallet</span>
+          <a class="itemName" href="javascript:void(0)" @click="comingSoon">Wallet</a>
         </div>
         <div class="item">
           <span class="itemName" @click="disconnectWallet">Logout</span>
@@ -92,8 +92,8 @@ export default class extends Vue {
 
 <style lang="scss" scoped>
 .position {
-  top: 116px;
-  right: 59px;
+  top: 84px;
+  right: 32px;
   z-index: 9;
 }
 .container {
@@ -193,6 +193,8 @@ export default class extends Vue {
     }
     .itemName {
       padding: 0 0.5em;
+      text-decoration: none;
+      color: white;
     }
   }
 
diff --git a/src/components/market/nft/HeroNft.vue b/src/components/market/nft/HeroNft.vue
index 754c0a7..523d12d 100644
--- a/src/components/market/nft/HeroNft.vue
+++ b/src/components/market/nft/HeroNft.vue
@@ -187,6 +187,9 @@ $height: 18.33em;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
+  div:last-child{
+    margin-bottom: 0;
+  }
   .name-label {
     color: white;
     text-transform:capitalize;
@@ -197,7 +200,7 @@ $height: 18.33em;
     color: yellow;
     margin-bottom: -$height * 20 / 389;
     margin-top: -$height * 5 / 389;
-    text-shadow: black 0.1em 0.1em 0.2em
+    text-shadow: black 0.1em 0.1em 0.2em;
   }
   .info-div {
     background-image: url('../../../assets/main/card/name_bg.png');
@@ -262,6 +265,8 @@ $height: 18.33em;
 .nft-id {
   color: #46E0F4;
   display: unset;
+  width: $width;
+  margin-bottom: 5px;
 }
 
 </style>
diff --git a/src/views/desktop/MyNft.vue b/src/views/desktop/MyNft.vue
index 92e1f20..fe274cc 100644
--- a/src/views/desktop/MyNft.vue
+++ b/src/views/desktop/MyNft.vue
@@ -1,11 +1,19 @@
 <template>
   <div>
-  <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
-  <section class="root">
-    <div class="container">
-      <nft-list :nft-datas="nftList"></nft-list>
-    </div>
-  </section>
+    <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
+    <section class="mynft">
+      <div class="container">
+        <div class="wrapper">
+          <nft-type-bar :select-idx="nftType" @nft-type-changed="onNftTypeClicked" class="left-bar"></nft-type-bar>
+          <sort-select
+            :filters="filters"
+            @filter-change="filterChange"
+          ></sort-select>
+        </div>
+        <nft-list :nft-datas="nftList"></nft-list>
+        <pagination class="page-comp"></pagination>
+      </div>
+    </section>
     <base-footer></base-footer>
   </div>
 </template>
@@ -13,6 +21,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import SearchPanel from '@/components/market/SearchPanel.vue'
+import Pagination from '@/components/market/Pagination.vue'
 import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
 import NftList from '@/components/market/NftList.vue'
@@ -20,13 +29,18 @@ import { INftAttr, ISpineData } from '@/utils/SpineRender'
 import { getNftList } from '@/api/Mall'
 import { AppModule } from '@/store/modules/app'
 import BaseFooter from '@/components/layout/BaseFooter.vue'
+import NftTypeBar from '@/components/market/NftTypeBar.vue'
+import SortSelect from '@/components/market/SortSelect.vue'
 
 @Component({
   components: {
+    SortSelect,
+    NftTypeBar,
     BaseFooter,
     NftList,
     SearchResult,
     SearchPanel,
+    Pagination,
     TopMenu
   }
 })
@@ -34,15 +48,22 @@ export default class MyNft extends Vue {
   mobileFilterShow = false
   currentTab = ''
   nftList: ISpineData[] = []
-
-  created() {
-    this.fetchDatas()
-  }
+  nftType = 0
+  private filters = ['All Items', 'Selling', 'Processing']
 
   get accountId() {
     return AppModule.accountId
   }
 
+  onNftTypeClicked(id: number) {
+    console.log('nft type clicked: ', id)
+    this.nftType = id
+  }
+
+  filterChange(id: number) {
+    console.log('filter change: ', id)
+  }
+
   @Watch('accountId')
   private accountChange() {
     console.log('account change: ', AppModule.accountId)
@@ -98,28 +119,49 @@ export default class MyNft extends Vue {
 </script>
 <style lang="scss" scoped>
 @import '../../scss/breakpoints.scss';
-.root {
+.mynft {
   display: flex;
   flex-direction: column;
   align-items: center;
+  .container {
+    display: flex;
+    flex-direction: column;
+    width: 1440px;
+    max-width: 100%;
+    box-sizing: border-box;
+    .wrapper{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-end;
+      padding: 0 4%;
+      .left-bar{
+        width: 40%;
+      }
+    }
+  }
 }
-.container {
-  display: flex;
-  flex-direction: row;
-  width: 1440px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
+
 .mobile-top {
   display: none;
 }
+.page-comp{
+  width: 100%;
+}
 
 @include media('<desktop') {
   .container {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
     flex-direction: column;
+    .wrapper{
+      margin-top: 80px;
+      margin-bottom: -76px;
+      padding: 0;
+      .left-bar{
+        flex-grow: 1;
+        width: 50%!important;
+        padding: 0 15px;
+      }
+    }
   }
   .searchPanel {
     width: 100%;
@@ -150,17 +192,17 @@ export default class MyNft extends Vue {
 }
 
 @media (min-width: 1024px) and (max-width: 1439px) {
-  .root {
+  .mynft {
     font-size: 11px;
   }
-  .root .container {
+  .mynft .container {
     width: 1024px;
     max-width: 100%;
   }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {
-  .root {
+  .mynft {
     font-size: 20px;
   }
   .container {
@@ -169,13 +211,13 @@ export default class MyNft extends Vue {
 }
 
 @media (max-width: 767px) {
-  .root {
+  .mynft {
     font-size: 11px;
   }
 }
 
 @media (max-width: 767px) and (max-width: 320px) {
-  .root {
+  .mynft {
     font-size: 9px;
   }
 }
diff --git a/vue.config.js b/vue.config.js
index 3b57371..446662a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -12,7 +12,7 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
-    https: true
+    https: false
   },
   pwa: {
     name: name