diff --git a/src/components/market/TopMenu.vue b/src/components/market/TopMenu.vue
index df9712c..e36b7d6 100644
--- a/src/components/market/TopMenu.vue
+++ b/src/components/market/TopMenu.vue
@@ -13,7 +13,7 @@
         <a class="menu-item" href="/">
           <div class="item" >Home</div>
         </a>
-        <a class="menu-item" href="/official" >
+        <a class="menu-item" href="/mall" >
           <div class="item" :class="{'active': currentTab==='official'}">
             Official Shop
             <div class="active-bottom" v-if="currentTab==='official'"></div>
diff --git a/src/components/market/mall/OneBox.vue b/src/components/market/mall/OneBox.vue
index 7811b46..9c64640 100644
--- a/src/components/market/mall/OneBox.vue
+++ b/src/components/market/mall/OneBox.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="box-root">
-    <div class="glow common"></div>
+    <div class="glow" :class="boxData.level"></div>
     <img draggable="false"
-         src="@/assets/market/box_01.png"
+         :src="require('@/assets/market/box_0'+boxData.id+'.png')"
          alt="box"
          class="icon">
-    <svg-icon name="normal_bg" class="header common"></svg-icon>
+    <svg-icon name="normal_bg" class="header" :class="boxData.level"></svg-icon>
 
-    <div class="common"></div>
+    <div :class="boxData.level"></div>
     <div class="background">
       <div class="name">
         <span class="spanName">Common box</span>
@@ -34,13 +34,18 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 
+export interface IBoxData{
+  level: string
+  id: number
+}
 @Component({
   name: 'OneBox',
   components: {}
 })
 export default class OneBox extends Vue {
+  @Prop() private boxData: IBoxData
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/icons/components/clock.ts b/src/icons/components/clock.ts
new file mode 100644
index 0000000..5d7bc80
--- /dev/null
+++ b/src/icons/components/clock.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'clock': {
+    width: 57,
+    height: 57,
+    viewBox: '0 0 57 57',
+    data: '<rect pid="0" width="57" height="57" rx="12" _fill="#4B1BFF"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M28.5 39.333c-5.98 0-10.834-4.843-10.834-10.834 0-5.98 4.853-10.833 10.833-10.833 5.991 0 10.834 4.853 10.834 10.833 0 5.991-4.843 10.834-10.834 10.834zm3.455-6.814a.804.804 0 001.116-.282.816.816 0 00-.282-1.116l-3.856-2.297V23.82a.811.811 0 10-1.625 0v5.471c0 .282.151.542.4.694l4.247 2.535z" _fill="#fff"/>'
+  }
+})
diff --git a/src/icons/components/index.ts b/src/icons/components/index.ts
index 0653ce3..4c26eeb 100644
--- a/src/icons/components/index.ts
+++ b/src/icons/components/index.ts
@@ -1,9 +1,11 @@
 /* tslint:disable */
 import './bsc'
 import './clipboard'
+import './clock'
 import './copy'
 import './inventory'
 import './kcc'
+import './lock'
 import './metamask'
 import './normal_bg'
 import './setting'
diff --git a/src/icons/components/lock.ts b/src/icons/components/lock.ts
new file mode 100644
index 0000000..1a1efbb
--- /dev/null
+++ b/src/icons/components/lock.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'lock': {
+    width: 52,
+    height: 52,
+    viewBox: '0 0 52 52',
+    data: '<path pid="0" d="M24.424 1.227a3.04 3.04 0 013.04 0L46.5 12.218a3.04 3.04 0 011.52 2.633v21.981a3.04 3.04 0 01-1.52 2.633l-19.037 10.99a3.04 3.04 0 01-3.04 0L5.387 39.466a3.04 3.04 0 01-1.52-2.633V14.851c0-1.086.58-2.09 1.52-2.633l19.037-10.99z" _fill="#5336D0"/><g clip-path="url(#clip0_2459_1131)"><path pid="1" d="M19.896 21.15v3.024h-1.297a1.728 1.728 0 00-1.728 1.729v8.641a1.728 1.728 0 001.728 1.728h13.826a1.728 1.728 0 001.729-1.728v-8.641a1.728 1.728 0 00-1.729-1.729H31.13V21.15a5.617 5.617 0 10-11.233 0zm2.16 3.024V21.15a3.456 3.456 0 116.913 0v3.024h-6.913zm1.728 4.753a1.729 1.729 0 112.672 1.448l-.007.005s.169 1.02.359 2.22v.002a.648.648 0 01-.648.647h-1.297a.648.648 0 01-.648-.648l.359-2.221a1.73 1.73 0 01-.792-1.452h.002z" _fill="#fff"/></g><defs><clipPath id="clip0_2459_1131"><path pid="2" _fill="#fff" transform="translate(16.871 15.533)" d="M0 0h17.283v20.739H0z"/></clipPath></defs>'
+  }
+})
diff --git a/src/icons/svg/clock.svg b/src/icons/svg/clock.svg
new file mode 100644
index 0000000..bb81cfc
--- /dev/null
+++ b/src/icons/svg/clock.svg
@@ -0,0 +1,6 @@
+<svg width='57' height='57' viewBox='0 0 57 57' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <rect x='-0.000488281' width='57' height='57' rx='12' fill='#4B1BFF'/>
+    <path fill-rule='evenodd' clip-rule='evenodd'
+          d='M28.4993 39.3327C22.5193 39.3327 17.666 34.4902 17.666 28.4993C17.666 22.5193 22.5193 17.666 28.4993 17.666C34.4902 17.666 39.3327 22.5193 39.3327 28.4993C39.3327 34.4902 34.4902 39.3327 28.4993 39.3327ZM31.9552 32.5185C32.0852 32.5943 32.226 32.6377 32.3777 32.6377C32.6485 32.6377 32.9193 32.4968 33.071 32.2368C33.2985 31.8577 33.1793 31.3593 32.7893 31.121L28.9327 28.8243V23.8193C28.9327 23.3643 28.5643 23.0068 28.1202 23.0068C27.676 23.0068 27.3077 23.3643 27.3077 23.8193V29.2902C27.3077 29.5718 27.4593 29.8318 27.7085 29.9835L31.9552 32.5185Z'
+          fill='white'/>
+</svg>
diff --git a/src/icons/svg/lock.svg b/src/icons/svg/lock.svg
new file mode 100644
index 0000000..4b6d49a
--- /dev/null
+++ b/src/icons/svg/lock.svg
@@ -0,0 +1,13 @@
+<svg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M24.424 1.22715C25.3646 0.684126 26.5234 0.684126 27.4639 1.22715L46.5006 12.218C47.4412 12.761 48.0206 13.7646 48.0206 14.8506V36.8323C48.0206 37.9183 47.4412 38.9219 46.5006 39.4649L27.4639 50.4558C26.5234 50.9988 25.3646 50.9988 24.4241 50.4558L5.38735 39.4649C4.44681 38.9219 3.86741 37.9183 3.86741 36.8323V14.8506C3.86741 13.7646 4.44681 12.761 5.38735 12.218L24.424 1.22715Z'
+          fill='#5336D0'/>
+    <g clip-path='url(#clip0_2459_1131)'>
+        <path d='M19.8956 21.1501V24.1745H18.5994C18.141 24.1745 17.7014 24.3566 17.3773 24.6807C17.0532 25.0048 16.8711 25.4444 16.8711 25.9028V34.5441C16.8711 35.0024 17.0532 35.442 17.3773 35.7661C17.7014 36.0902 18.141 36.2723 18.5994 36.2723H32.4254C32.8838 36.2723 33.3234 36.0902 33.6475 35.7661C33.9716 35.442 34.1537 35.0024 34.1537 34.5441V25.9028C34.1537 25.4444 33.9716 25.0048 33.6475 24.6807C33.3234 24.3566 32.8838 24.1745 32.4254 24.1745H31.1292V21.1501C31.1292 19.6604 30.5375 18.2317 29.4841 17.1783C28.4307 16.125 27.0021 15.5332 25.5124 15.5332C24.0227 15.5332 22.594 16.125 21.5407 17.1783C20.4873 18.2317 19.8956 19.6604 19.8956 21.1501ZM22.0559 24.1745V21.1501C22.0559 20.2333 22.42 19.3541 23.0683 18.7059C23.7165 18.0577 24.5957 17.6935 25.5124 17.6935C26.4291 17.6935 27.3083 18.0577 27.9565 18.7059C28.6048 19.3541 28.9689 20.2333 28.9689 21.1501V24.1745H22.0559ZM23.7841 28.9272C23.7842 28.6278 23.862 28.3336 24.01 28.0733C24.158 27.813 24.3711 27.5957 24.6284 27.4425C24.8857 27.2894 25.1783 27.2057 25.4776 27.1997C25.777 27.1937 26.0728 27.2655 26.336 27.4082C26.5992 27.5509 26.8208 27.7595 26.9792 28.0136C27.1375 28.2677 27.2271 28.5586 27.2392 28.8577C27.2513 29.1569 27.1855 29.4541 27.0482 29.7201C26.9109 29.9862 26.7069 30.212 26.456 30.3755L26.4491 30.3798C26.4491 30.3798 26.6176 31.3995 26.8077 32.6006V32.6015C26.8077 32.7732 26.7395 32.9378 26.6182 33.0592C26.4968 33.1805 26.3322 33.2487 26.1605 33.2487H24.8626C24.6909 33.2487 24.5263 33.1805 24.4049 33.0592C24.2835 32.9378 24.2153 32.7732 24.2153 32.6015V32.6006L24.574 30.3798C24.3313 30.2232 24.1318 30.0082 23.9935 29.7546C23.8552 29.5011 23.7827 29.2169 23.7824 28.9281L23.7841 28.9272Z'
+              fill='white'/>
+    </g>
+    <defs>
+        <clipPath id='clip0_2459_1131'>
+            <rect width='17.2826' height='20.7391' fill='white' transform='translate(16.8711 15.5332)'/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/src/views/desktop/Mall.vue b/src/views/desktop/Mall.vue
index 9c038e3..411f5c0 100644
--- a/src/views/desktop/Mall.vue
+++ b/src/views/desktop/Mall.vue
@@ -9,11 +9,18 @@
             <p>CEBG box contains various heroes with certain drop rates.</p>
           </div>
         </div>
+        <div class="detail-info-bar">
+          <div class="detailBox">
+            <svg-icon name="clock" class="circle"></svg-icon>
+            <div class="content">
+              <span class="info">Unlimited</span>
+              <span class="title">Time Remaining</span>
+            </div>
+          </div>
+
+        </div>
         <div class="box-list">
-          <one-box></one-box>
-          <one-box></one-box>
-          <one-box></one-box>
-          <one-box></one-box>
+          <one-box v-for="data in boxDatas" :key="data.level" :box-data="data"></one-box>
           <comming-box></comming-box>
         </div>
       </div>
@@ -26,7 +33,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import TopMenu from '@/components/market/TopMenu.vue'
 import BaseFooter from '@/components/layout/BaseFooter.vue'
-import OneBox from '@/components/market/mall/OneBox.vue'
+import OneBox, { IBoxData } from '@/components/market/mall/OneBox.vue'
 import CommingBox from '@/components/market/mall/CommingBox.vue'
 
 @Component({
@@ -41,6 +48,20 @@ export default class Official extends Vue {
   mobileFilterShow = false;
   currentTab = 'official';
   nftType = 0;
+  private boxDatas: IBoxData[] = [
+    {
+      level: 'common',
+      id: 1
+    },
+    {
+      level: 'epic',
+      id: 2
+    },
+    {
+      level: 'legendary',
+      id: 3
+    }
+  ]
 
   onNftTypeClicked(id: number) {
     console.log('nft type clicked: ', id)
@@ -59,18 +80,22 @@ export default class Official extends Vue {
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .container {
     display: flex;
     flex-direction: column;
     width: 1440px;
     max-width: 100%;
     box-sizing: border-box;
+    align-items: center;
+
     .box-info {
       width: 100%;
       color: white;
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .info-title {
         font-size: 50px;
         padding: 60px 20px 20px 20px;
@@ -78,7 +103,8 @@ export default class Official extends Vue {
     }
   }
 }
-.box-list{
+
+.box-list {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -89,7 +115,69 @@ export default class Official extends Vue {
   justify-content: center;
 }
 
-@include media ('<wide') {
+.detail-info-bar {
+  width: toEm(969px);
+  max-width: 100%;
+  height: toEm(93px);
+  margin-top: toEm(32px);
+  display: flex;
+  justify-content: center;
+  .detailBox {
+    width: toEm(302px);
+    border-radius: toEm(8px);
+    padding: 0 toEm(36px);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    background: rgba(4, 4, 34, 0.56);
+    transform: matrix(0.98, 0, -0.19, 1, 0, 0);
+    .circle {
+      width: toEm(57px);
+      height: toEm(57px);
+      fill: currentColor;
+      stroke: none;
+      margin-right: toEm(24px);
+      transform: skewX(11deg);
+    }
+    .content {
+      display: flex;
+      flex-direction: column;
+      transform: skewX(11deg);
+      .title {
+        font-style: normal;
+        text-transform: uppercase;
+        font-size: toEm(14px);
+        line-height: 1.57;
+        color: #c9c5db;
+      }
+      .info {
+        font-style: normal;
+        font-weight: bold;
+        font-size: toEm(24px);
+        line-height: 1.25;
+        text-transform: uppercase;
+        color: #ffffff;
+        margin-bottom: toEm(8px);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .total {
+          color: #8a8ab2;
+        }
+      }
+      .timeUp {
+        color: #ff5c5c;
+      }
+      .unavailableTime {
+        font-size: 1.125em;
+        text-transform: none;
+      }
+    }
+  }
+}
+
+@include media('<wide') {
   .root {
     font-size: 11px;
   }
@@ -99,13 +187,15 @@ export default class Official extends Vue {
   }
 }
 
-@include media ('<desktop') {
+@include media('<desktop') {
   .root {
     font-size: 20px;
+
     .container {
       width: 768px;
       flex-direction: column;
-      .box-list{
+
+      .box-list {
         flex-direction: column;
         align-items: center;
       }
@@ -113,19 +203,30 @@ export default class Official extends Vue {
   }
 }
 
-@include media ('<tablet') {
+@include media('<tablet') {
   .root {
     font-size: 11px;
+
     .container {
       width: 375px;
     }
   }
 }
 
-@include media ('<phone') {
+@include media('<phone') {
   .root {
     font-size: 9px;
   }
 }
 
 </style>
+<style lang="scss">
+.circle {
+  rect {
+    fill: #4B1BFF;
+  }
+  path {
+    fill: white;
+  }
+}
+</style>