diff --git a/dev.js b/dev.js
index 113a9bc..e6a25ba 100644
--- a/dev.js
+++ b/dev.js
@@ -28,7 +28,7 @@ app.use('/background', express.static('./background'))
 app.use('/', express.static('./src'))
 app.use('/dist', express.static('./dist'))
 
-app.use('/lang', proxy('hongkong.webxoss.com:8080', {
+app.use('/lang', proxy('webxoss.com', {
   proxyReqPathResolver: req => '/lang' + url.parse(req.url).path,
   https: true,
 }))
diff --git a/src/app.vue b/src/app.vue
index e581fea..bb7a82c 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -5,7 +5,7 @@ export default {
     let deckFileNames = localStorage.getItem('deck_filenames')
     let fileNames = JSON.parse(deckFileNames)
 
-    this.$store.commit('changeWindowWidth', window.innerWidth)
+    this.$store.commit('setWindowData')
     this.$store.commit('changeLanguage', localStorage.getItem('language') || 'en')
 
     // if no deck in localStorage, initialize WHITE_HOPE
diff --git a/src/components/ActionButtonBar.vue b/src/components/ActionButtonBar.vue
new file mode 100644
index 0000000..eb9ccd5
--- /dev/null
+++ b/src/components/ActionButtonBar.vue
@@ -0,0 +1,124 @@
+<script>
+import { mapState } from 'vuex'
+import Icon from 'components/Icon'
+import Localize from 'js/Localize'
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    searching: {
+      require: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'selectedPids',
+      'deckName',
+    ]),
+    count() {
+      return this.selectedPids.length
+    },
+    visable() {
+      return !!this.selectedPids.length
+    },
+  },
+  methods: {
+    add() {
+      for (let pid of this.selectedPids)  {
+        // TODO: use dispatch and toast message
+        this.$store.commit('addCard', pid)
+      }
+    },
+    remove() {
+      for (let pid of this.selectedPids) {
+        this.$store.commit('delCard', pid)
+      }
+      this.$store.commit('clearSelectedPids')
+    },
+    cancel() {
+      this.$store.commit('clearSelectedPids')
+    },
+    L(text, arg) {
+      return Localize(text, arg)
+    },
+  },
+}
+</script>
+
+<template>
+  <transition name="slide">
+    <div v-show="visable" :class="$style.wrapper">
+      <div :class="$style.count"> {{ L('card_selected', count) }}</div>
+      <div v-show="searching" :class="$style.deck">
+        <span>{{ L('add_to_deck') }}</span>
+        <span :class="$style.name">{{ deckName }}</span>
+      </div>
+      <template v-if="!searching">
+        <a :class="$style.action" @click="remove">{{ L('delete') }}</a>
+        <a :class="$style.cancel" @click="cancel">{{ L('cancel') }}</a>
+      </template>
+      <template v-if="searching">
+        <a :class="$style.action" @click="add">{{ L('add') }}</a>
+        <a :class="$style.cancel" @click="cancel">{{ L('finished') }}</a>
+      </template>
+    </div>
+  </transition>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-action-button-bar);
+  height: var(--header-height);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  line-height: var(--header-height);
+  font-size: 1.2em;
+  background-color: var(--main-color);
+  color: #fff;
+  text-transform: capitalize;
+}
+.count {
+  width: 15%;
+  padding-left: 2rem;
+}
+.deck {
+  padding-left: .5rem;
+}
+.name {
+  padding-left: 2rem;
+}
+.action {
+  margin-left: auto;
+}
+.cancel,
+.action {
+  cursor: pointer;
+  padding: 0 1rem;
+}
+.cancel:hover,
+.action:hover {
+  background-color: rgba(0,0,0,.27);
+}
+.wrapper:global(.slide-enter-active) {
+  animation: slide-in .3s;
+}
+.wrapper:global(.slide-leave-active) {
+  animation: slide-in .3s reverse;
+}
+@keyframes slide-in {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+</style>
diff --git a/src/components/AppHeader/HeaderMenu.vue b/src/components/AppHeader/HeaderMenu.vue
index a935f40..34fdc8a 100644
--- a/src/components/AppHeader/HeaderMenu.vue
+++ b/src/components/AppHeader/HeaderMenu.vue
@@ -9,6 +9,9 @@ export default {
       type: Array,
       required: true,
     },
+    decktopView: {
+      required: false,
+    },
   },
   computed: {
     opened() {
@@ -42,7 +45,7 @@ export default {
 <template>
   <div :class="[$style.wrapper, opened ? $style.opened : '']" @click.self="close">
     <transition name="pop">
-      <ul :class="$style.menu" v-show="opened">
+      <ul :class="[$style.menu, decktopView ? $style.decktopPostion : $style.postion]" v-show="opened">
         <li
           :class="$style.item"
           v-for="item in items"
@@ -69,8 +72,6 @@ export default {
 }
 .menu {
   position: fixed;
-  top: var(--padding);
-  right: var(--padding);
   z-index: var(--z-header-menu);
 
   background-color: #fff;
@@ -79,6 +80,14 @@ export default {
   will-change: transform;
   transform-origin: right top;
 }
+.postion {
+  top: var(--padding);
+  right: var(--padding);
+}
+.decktopPostion {
+  top: calc(var(--header-height) - var(--padding));
+  right: calc(10% + 2 * var(--padding));
+}
 .item {
   padding: var(--padding);
   padding-right: calc(2 * var(--padding));
diff --git a/src/components/Block.vue b/src/components/Block.vue
index 6aa99d3..e33e20f 100644
--- a/src/components/Block.vue
+++ b/src/components/Block.vue
@@ -11,40 +11,39 @@ export default {
       type: Object,
       require: true,
     },
+    showCount: {
+      type: Boolean,
+      require: false,
+    },
   },
   computed: {
     ...mapGetters([
       'deckPids',
     ]),
-    detailRoute() {
-      return {
-        path: '/detail',
-        query: {
-          pid: this.card.pid,
-        },
-      }
-    },
     count() {
       return this.deckPids.filter(pid => pid === this.card.pid).length
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('click', this.card.pid)
+    },
+  },
 }
 </script>
 
 <template>
-  <router-link :to="detailRoute" :class="$style.block">
-    <card-image :pid="card.pid" :class="$style.image"/>
-    <div :class="$style.dimmer">×{{ count }}</div>
-  </router-link>
+  <a :class="$style.block" @click.stop="handleClick">
+    <card-image :pid="card.pid" :class="$style.image" />
+    <div v-if="showCount" :class="$style.dimmer">×{{ count }}</div>
+  </a>
 </template>
 
-<style src="css/colors.css" module="$color"></style>
 <style module>
 .block {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  padding: .2em;
 }
 .image {
   width: 100%;
@@ -55,6 +54,7 @@ export default {
   right: .2em;
   bottom: .2em;
   padding: 0 .2em;
+  font-size: 1.2em;
   color: #fff;
   background-color: color(#000 a(.6));
 }
diff --git a/src/components/Box.vue b/src/components/Box.vue
new file mode 100644
index 0000000..63d0812
--- /dev/null
+++ b/src/components/Box.vue
@@ -0,0 +1,149 @@
+<script>
+import { mapState } from 'vuex'
+import Thumbnail from 'components/Thumbnail'
+import Icon from 'components/Icon'
+import Localize from 'js/Localize'
+
+export default {
+  props: {
+    card: {
+      type: Object,
+      require: true,
+    },
+  },
+  components: {
+    Thumbnail,
+    Icon,
+  },
+  data: () => ({
+    selected: false,
+  }),
+  computed:{
+    ...mapState([
+      'selectedPids',
+    ]),
+    selecting() {
+      return !!this.selectedPids.length
+    },
+    name() {
+      return Localize.cardName(this.card)
+    },
+    pid() {
+      return this.card.pid
+    },
+  },
+  methods: {
+    click() {
+      if (this.selected) {
+        this.selected = false
+        this.$store.commit('delSelectedPid', this.pid)
+      } else {
+        this.selected = true
+        this.$store.commit('addSelectedPid', this.pid)
+      }
+    },
+    actionClick() {
+      this.$store.commit('setShownPid', this.pid)
+    },
+  },
+  watch: {
+    selecting(selecting) {
+      if (selecting === false) {
+        this.selected = false
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.wrapper">
+    <div
+      :class="$style.box"
+      @click.stop="click">
+      <thumbnail :class="$style.image" :pid="card.pid" />
+      <div v-show="selected" :class="$style.relative">
+        <div :class="$style.dimmer">
+          <icon :class="$style.circle" name="check" />
+        </div>
+      </div>
+      <div :class="$style.content">
+        <div :class="$style.title" :title="name">{{ name }}</div>
+        <a :class="$style.action" @click.stop="actionClick">
+          <icon name="information" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.wrapper {
+  height: 10.1rem;
+  width: 8rem;
+  padding: .5rem;
+}
+.box {
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  @apply --shadow-2dp;
+  transition: .3s;
+}
+.box:hover {
+  @apply --shadow-6dp;
+}
+.image {
+  width: 8rem;
+  height: 8rem;
+}
+.dimmer {
+  position: relative;
+  top: -8rem;
+  left: 0;
+  height: 8rem;
+  width: 8rem;
+  background-color: color(#000 a(.65))
+}
+.relative {
+  position: relative;
+  height: 0;
+}
+.circle {
+  position: absolute;
+  top: .5em;
+  right: .5em;
+  z-index: var(--z-box-counter);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+  padding: .2em;
+  color: #000;
+  background-color: color(#fff a(.9));
+  border-radius: 50%;
+}
+.content {
+  display: flex;
+  height: 2.1em;
+  background-color: #333;
+}
+.title {
+  flex: 1;
+  font-size: .7rem;
+  padding: 1em 0 1em 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+}
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  color: #fff;
+}
+</style>
diff --git a/src/components/BoxContainer.vue b/src/components/BoxContainer.vue
new file mode 100644
index 0000000..2c14430
--- /dev/null
+++ b/src/components/BoxContainer.vue
@@ -0,0 +1,83 @@
+<script>
+import Box from 'components/Box'
+
+export default {
+  components: {
+    Box,
+  },
+  props: {
+    cards: {
+      type: Array,
+      require: true,
+    },
+    loadMoreEnabled: {
+      require: false,
+    },
+  },
+  data: () => ({
+    colunms: 1,
+    rows: 10,
+    request: 0,
+  }),
+  computed: {
+    shownCount() {
+      return this.colunms * this.rows
+    },
+    iterator() {
+      if (this.loadMoreEnabled) {
+        return this.shownCount < this.cards.length
+          ? this.cards.slice(0, this.shownCount)
+          : this.cards
+      } else {
+        return this.cards
+      }
+    },
+  },
+  methods: {
+    loadMore() {
+      this.rows += 5
+    },
+    resetRows() {
+      this.rows = 10
+    },
+    calcColunms() {
+      if (this.$children.length) {
+        let itemWidth = this.$children[0].$el.clientWidth
+        if (itemWidth) {
+          let selfWidth = this.$el.clientWidth
+          this.colunms = Math.floor(selfWidth / itemWidth)
+        }
+      }
+      this.request = requestIdleCallback(this.calcColunms)
+    },
+  },
+  mounted() {
+    this.calcColunms()
+    window.onscroll = () => {
+      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
+        if (this.shownCount < this.cards.length) {
+          this.loadMore()
+        }
+      }
+    }
+  },
+  destroyed() {
+    cancelIdleCallback(this.request)
+    window.onscroll = false
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <box v-for="card in iterator" :card="card" />
+  </div>
+</template>
+
+<style module>
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/components/CardInfoTable.vue b/src/components/CardInfoTable.vue
new file mode 100644
index 0000000..d8420b8
--- /dev/null
+++ b/src/components/CardInfoTable.vue
@@ -0,0 +1,130 @@
+<script>
+import Localize from 'js/Localize'
+
+export default {
+  props: {
+    card: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    name() {
+      return Localize.cardName(this.card)
+    },
+    limiting() {
+      return Localize.limiting(this.card)
+    },
+    cardEffect() {
+      return Localize.effectTexts(this.card)
+    },
+    lifeBurst() {
+      return Localize.burstEffectTexts(this.card)
+    },
+    rows() {
+      let card = this.card
+      let type = {
+        key: Localize('cardType'),
+        value: Localize(card.cardType),
+      }
+      let color = {
+        key: Localize('color'),
+        value: Localize(card.color),
+      }
+      let level = {
+        key: Localize('level'),
+        value: card.level,
+      }
+      let power = {
+        key: Localize('power'),
+        value: card.power,
+      }
+      let limit = {
+        key: Localize('limit'),
+        value: (card.limit < 1024) ? card.limit : '∞',
+      }
+      let cost = {
+        key: Localize('cost'),
+        value: Localize.cost(card),
+      }
+      let timing = {
+        key: Localize('timings'),
+        value: Localize.timings(card),
+      }
+      let classes = {
+        key: Localize('classes'),
+        value: Localize.classes(card),
+      }
+      let guard = {
+        key: Localize('guard'),
+        value: Localize.guard(card),
+      }
+      return {
+        'RESONA': [
+          [type, color],
+          [level, classes],
+          [power, guard],
+        ],
+        'SIGNI': [
+          [type, color],
+          [level, classes],
+          [power, guard],
+        ],
+        'SPELL': [
+          [type, color],
+          [cost],
+        ],
+        'LRIG': [
+          [type, color],
+          [level, classes],
+          [limit, cost],
+        ],
+        'ARTS': [
+          [type, color],
+          [cost],
+          [timing],
+        ],
+      }[card.cardType] || []
+    },
+  },
+}
+
+</script>
+
+<template>
+  <div>
+    <table :class="$style.table">
+      <tbody>
+        <tr v-for="row in rows" :class="$style.rows">
+          <template v-for="meta in row">
+            <td :class="$style.key">{{ meta.key }}</td>
+            <td :colspan="row.length === 1 ? 3 : 1">{{ meta.value }}</td>
+          </template>
+        </tr>
+        <tr>
+          <td colspan="4">{{ cardEffect }}</td>
+        </tr>
+        <tr>
+          <td colspan="4">{{ lifeBurst }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style module scoped>
+.table {
+  width: 100%;
+  line-height: 1.5;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+td {
+  border: 1px solid #cbcbcb;
+  padding: .5em .2em;
+}
+.key {
+  width: 20%;
+  text-align: center;
+}
+</style>
diff --git a/src/components/Cell.vue b/src/components/Cell.vue
index aec47d6..9f3834c 100644
--- a/src/components/Cell.vue
+++ b/src/components/Cell.vue
@@ -193,16 +193,28 @@ export default {
       </div>
     </div>
   </router-link>
-
 </template>
 
 <style src="css/colors.css" module="$color"></style>
 <style module>
 @import 'css/vars.css';
-
+.cell {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--padding);
+  height: 8rem;
+  justify-content: center;
+  border-bottom: 1px solid var(--cell-border-color);
+}
 .translucent {
   opacity: 0.7;
 }
+.thumbnail {
+  width: calc(8rem - 2 * var(--padding));
+  height: calc(8rem - 2 * var(--padding));
+  border: 2px solid currentColor;
+  margin: auto 0;
+}
 .wrapper {
   position: relative;
   height: 0;
@@ -225,20 +237,6 @@ export default {
     left: 0;
   }
 }
-.cell {
-  display: flex;
-  box-sizing: border-box;
-  padding: var(--padding);
-  height: 8rem;
-  justify-content: center;
-  border-bottom: 1px solid var(--cell-border-color);
-}
-.thumbnail {
-  width: calc(8rem - 2 * var(--padding));
-  height: calc(8rem - 2 * var(--padding));
-  border: 2px solid currentColor;
-  margin: auto 0;
-}
 .left {
   align-self: center;
 }
diff --git a/src/components/CellContainer.vue b/src/components/CellContainer.vue
index d613397..282b363 100644
--- a/src/components/CellContainer.vue
+++ b/src/components/CellContainer.vue
@@ -1,22 +1,12 @@
 <script>
 import { mapState } from 'vuex'
-import Cell from 'components/Cell'
-
-// 8rem
-let cellHeight = 8
 
 export default {
-  components: {
-    Cell,
-  },
   props: {
     cards: {
       type: Array,
       required: true,
     },
-    protectionEnabled: {
-      require: false,
-    },
     longListOpimizationEnabled: {
       require: false,
     },
@@ -36,18 +26,19 @@ export default {
         See `updateIndex` for details.
     */
     index: 0,
+    itemHeight: 8,
   }),
   computed: {
     ...mapState([
       'windowWidth',
+      'fontSize',
     ]),
-    isTwoColunm() {
-      return this.windowWidth >= 1024
+    colunms() {
+      // window's width > 1024px, use 2 colunm view
+      return this.windowWidth > 961 ? 2 : 1
     },
-    allColunmsCount() {
-      return this.isTwoColunm
-        ? Math.ceil(this.cards.length / 2)
-        : this.cards.length
+    rows() {
+      return this.cards.length / this.colunms
     },
     start() {
       // 5 colunms before index
@@ -55,29 +46,25 @@ export default {
     },
     end() {
       // 10 colunms after index
-      return Math.min(this.allColunmsCount, this.index + 10)
+      return Math.min(this.rows, this.index + 10)
     },
     shownCards() {
-      return this.isTwoColunm
-        ? this.cards.slice(2 * this.start, 2 * this.end)
-        : this.cards.slice(this.start, this.end)
+      return this.cards.slice(this.colunms * this.start, this.colunms * this.end)
     },
-    shownColunmsCount() {
-      return this.isTwoColunm
-        ? Math.ceil(this.shownCards.length / 2)
-        : this.shownCards.length
+    shownRows() {
+      return Math.ceil(this.shownCards.length / this.colunms)
     },
     padding() {
-      // Paddings before / after shown cells.
+      // Paddings upper / under shown cells.
       // They keep list height and scroll position from changing。
-      let beforeCount = this.start
-      let afterCount = this.allColunmsCount - this.shownColunmsCount - beforeCount
+      let upperCount = this.start
+      let underCount = this.rows - this.shownRows - upperCount
       return {
-        'padding-top': `${cellHeight * beforeCount}rem`,
-        'padding-bottom': `${cellHeight * afterCount}rem`,
+        'padding-top': `${this.itemHeight * upperCount}rem`,
+        'padding-bottom': `${this.itemHeight * underCount}rem`,
       }
     },
-    cardIterator() {
+    iterator() {
       return this.longListOpimizationEnabled
         ? this.shownCards
         : this.cards
@@ -85,10 +72,8 @@ export default {
   },
   methods: {
     updateIndex() {
-      // Find the top cell in viewport according to `window.scrollY`.
-      let fontSize = +window.getComputedStyle(window.document.body)
-        .fontSize.slice(0, -2)
-      this.index = Math.round(window.scrollY / (cellHeight * fontSize))
+      // Find the top item in viewport according to`window.scrollY`.
+      this.index = Math.round(window.scrollY / this.itemHeight / this.fontSize)
       this.request = requestIdleCallback(this.updateIndex)
     },
   },
@@ -105,20 +90,19 @@ export default {
 
 <template>
   <div :class="$style.row" :style="padding">
-    <div v-for="card in cardIterator" :class="$style.col">
-      <cell :card="card" :protectionEnabled="protectionEnabled"/>
-    </div>
+    <slot v-for="item in iterator" :card="item"/>
   </div>
 </template>
 
 <style module>
 .row {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
-.col {
+.row>* {
   width: 100%;
-  @media (width >= 1024px) {
+  @media (min-width: 961px) {
     width: 50%;
   }
 }
diff --git a/src/components/DeckHead.vue b/src/components/DeckHead.vue
index 82b0267..c0c095b 100644
--- a/src/components/DeckHead.vue
+++ b/src/components/DeckHead.vue
@@ -1,22 +1,22 @@
 <script>
+import { mapGetters } from 'vuex'
 import Localize from 'js/Localize'
 import checkMayusRoom from 'js/MayusRoom'
 
 export default {
   props: {
-    scrolledToLrig: {
-      require: true,
-    },
-    previewing: {
-      require: true,
-    },
-    shadow: {
-      require: true,
+    lrig: {
+      require: false,
     },
   },
   computed: {
+    ...mapGetters([
+      'deck',
+      'mainDeck',
+      'lrigDeck',
+    ]),
     burstCount() {
-      return this.$store.getters.deck
+      return this.deck
         .map(card => CardInfo[card.cid]) // TODO: utils
         .filter(card => card.burstEffectTexts)
         .length
@@ -25,19 +25,19 @@ export default {
       return this.burstCount === 20 ? '' : this.$style.warn
     },
     mainCount() {
-      return this.$store.getters.mainDeck.length
+      return this.mainDeck.length
     },
     mainClass() {
       return this.mainCount === 40 ? '' : this.$style.warn
     },
     lrigCount() {
-      return this.$store.getters.lrigDeck.length
+      return this.lrigDeck.length
     },
     lrigClass() {
       return this.lrigCount <= 10 ? '' : this.$style.warn
     },
     deckBanned() {
-      return checkMayusRoom(this.$store.getters.deck)
+      return checkMayusRoom(this.deck)
     },
   },
   methods: {
@@ -46,70 +46,49 @@ export default {
     },
   },
 }
-</script>
 
+</script>
 <template>
-  <div :class="$style.wrapper">
-    <div :class="[$style.head, shadow ? $style.shadow : '']">
-      <template v-if="previewing">
-        <span>{{ L('overview') }}</span>
-      </template>
+  <div :class="$style.subheader">
+    <template v-if="!lrig">
+      <span :class="$style.name">{{ L('main_deck') }}</span>
+      <span :class="mainClass">{{ mainCount }}</span>/40
 
-      <template v-if="!previewing && !scrolledToLrig">
-        <span :class="$style.deckName">{{ L('main_deck')}} </span>
-        (<span :class="mainClass">{{ mainCount }}</span>/40)
-      </template>
+      <span :class="$style.right">
+        <span v-show="!lrig && deckBanned" :class="[$style.mayu, $style.warn]">
+            {{ L('mayu_room') }}
+        </span>
 
-      <template v-if="!previewing && scrolledToLrig">
-        <span :class="$style.deckName">{{ L('lrig_deck') }} </span>
-        (<span :class="lrigClass">{{ lrigCount }}</span>/10)
-      </template>
+        <span>
+          {{ L('life_burst_short') }}:
+        </span>
+        <span :class="burstClass">{{ burstCount }}</span>/20
+      </span>
+    </template>
+
+    <template v-if="lrig">
+      <span :class="$style.name">{{ L('lrig_deck') }}</span>
+      <span :class="lrigClass">{{ lrigCount }}</span>/10
+    </template>
 
-      <div :class="$style.right">
-        <span :class="[$style.warn, $style.mayu]" v-show="deckBanned">{{ L('mayu_room') }}</span>
-        <span>{{ L('life_burst_short') }}: <span :class="burstClass">{{ burstCount }}</span>/20</span>
-      </div>
-    </div>
   </div>
 </template>
-
 <style module>
-@import 'css/vars.css';
-:root {
-  --height: calc(0.8 * var(--header-height));
+.subheader {
+  display: flex;
+  color: #666;
+  padding: 0 .5rem;
 }
-.wrapper {
-  height: var(--height)
+.name {
+  padding-right: .5em;
 }
-.head {
-  position: fixed;
-  top: var(--header-height);
-  left: 0;
-  right: 0;
-  z-index: var(--z-header);
-
-  display: flex;
-  align-items: center;
-
-  padding: 0 var(--padding);
-  height: var(--height);
-
-  background-color: #fff;
-  border-bottom: 1px solid var(--cell-border-color);
-
-  &.shadow {
-    @apply --shadow-2dp;
-    border-bottom: transparent;
-  }
+.mayu {
+  padding-right: 1em;
 }
 .right {
-  flex: 1;
-  text-align: right;
+  margin-left: auto;
 }
 .warn {
   color: #ff5722;
 }
-.mayu {
-  margin-right: .5em;
-}
 </style>
diff --git a/src/components/DeckModals.vue b/src/components/DeckModals.vue
index b0b9a68..53cabe4 100644
--- a/src/components/DeckModals.vue
+++ b/src/components/DeckModals.vue
@@ -73,7 +73,13 @@ export default {
   },
   methods: {
     open(type) {
-      this.$router.replace({
+      let assignRoute
+      if (Object.getOwnPropertyNames(this.$route.query).length) {
+        assignRoute = this.$router.replace.bind(this.$router)
+      } else {
+        assignRoute = this.$router.push.bind(this.$router)
+      }
+      assignRoute({
         path: this.$route.path,
         query: Object.assign({}, this.$route.query, {
           modal: type,
diff --git a/src/components/DeckSubheader.vue b/src/components/DeckSubheader.vue
new file mode 100644
index 0000000..a4d4d5f
--- /dev/null
+++ b/src/components/DeckSubheader.vue
@@ -0,0 +1,60 @@
+<script>
+import DeckHead from 'components/DeckHead'
+
+export default {
+  components: {
+    DeckHead,
+  },
+  props: {
+    scrolledToLrig: {
+      require: true,
+    },
+    shadow: {
+      require: true,
+    },
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.wrapper">
+    <div :class="[$style.head, shadow ? $style.shadow : '']">
+      <deck-head :class="$style.subheader" :lrig="scrolledToLrig" />
+    </div>
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+:root {
+  --height: calc(0.8 * var(--header-height));
+}
+.wrapper {
+  height: var(--height)
+}
+.head {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  z-index: var(--z-header);
+
+  display: flex;
+  align-items: center;
+
+  padding: 0 var(--padding);
+  height: var(--height);
+
+  background-color: #fff;
+  border-bottom: 1px solid var(--cell-border-color);
+
+  &.shadow {
+    @apply --shadow-2dp;
+    border-bottom: transparent;
+  }
+}
+.subheader {
+  width: 100%;
+  font-size: 1.3em;
+}
+</style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a876102..aba61e7 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -25,6 +25,9 @@ export default {
     cancelText() {
       return this.config.cancelText || L('cancel')
     },
+    opened() {
+      return this.$route.query.modal
+    },
   },
   methods: {
     setInputValue(value) {
@@ -44,6 +47,11 @@ export default {
       this.$emit('ok', this.input)
     },
   },
+  watch: {
+    opened(opened) {
+      document.body.style.overflow = opened ? 'hidden' : 'auto'
+    },
+  },
 }
 </script>
 
@@ -52,6 +60,7 @@ export default {
     ref="wrapper"
     :class="$style.wrapper"
     tabindex="0"
+    @click.self="cancel"
     @keyup.esc="cancel">
     <form :class="$style.dialog" @submit.prevent="ok">
       <h3 :class="$style.title" v-if="config.title">{{ config.title }}</h3>
@@ -103,6 +112,9 @@ export default {
   background-color: #fff;
   border-radius: 2px;
   @apply --shadow-24dp;
+  @media (min-width: 1281px) {
+    width: 30%;
+  }
 }
 .title,
 .content,
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..fc95484
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,91 @@
+<script>
+import { mapState } from 'vuex'
+import CardImage from 'components/CardImage'
+import CardInfoTable from 'components/CardInfoTable'
+import Localize from 'js/Localize'
+
+export default {
+  components: {
+    CardImage,
+    CardInfoTable,
+  },
+  data: () => ({
+    pid: 0,
+  }),
+  computed: {
+    ...mapState([
+      'shownPid',
+    ]),
+    visible() {
+      return !!this.shownPid
+    },
+    card() {
+      return CardInfo[this.pid]
+    },
+    name() {
+      return Localize.cardName(this.card)
+    },
+    limiting() {
+      return Localize.limiting(this.card)
+    },
+  },
+  watch: {
+    shownPid(pid) {
+      if (0 < pid && pid < Object.keys(CardInfo).length) {
+        this.pid = pid
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <transition name="slide">
+    <div v-show="visible" :class="$style.sidebar">
+      <card-image :class="$style.image" :pid="pid"/>
+      <div style="display: flex;">
+        <span>{{ card.wxid }}</span>
+        <span style="margin-left: auto;">{{ limiting }}</span>
+      </div>
+      <div style="font-size: 1.5em;">{{ name }}</div>
+      <card-info-table :card="card"/>
+    </div>
+  </transition>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.sidebar {
+  position: fixed;
+  z-index: var(--z-sidebar);
+  top: 4rem;
+  right: 0;
+  width: 20%;
+  height: calc(100% - var(--header-height));
+  background-color: #fafafa;
+  overflow-y: auto;
+  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .15);
+  padding: .5em;
+}
+.image {
+  width: 80%;
+  display: block;
+  margin: 0 auto;
+}
+.sidebar:global(.slide-enter-active) {
+  animation: slide-in .3s;
+}
+.sidebar:global(.slide-leave-active) {
+  animation: slide-in .3s reverse;
+}
+@keyframes slide-in {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+</style>
diff --git a/src/components/Tips.vue b/src/components/Tips.vue
new file mode 100644
index 0000000..3419d2f
--- /dev/null
+++ b/src/components/Tips.vue
@@ -0,0 +1,59 @@
+<script>
+import marked from 'marked'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      require: true,
+    },
+  },
+  data: () => ({
+    tips: {
+      searchTips: require('../pages/searchTips.md'),
+      emptyTips: require('../pages/emptyTips.md'),
+    },
+  }),
+  computed: {
+    html() {
+      return this.tips[this.name] ? marked(this.tips[this.name]) : ''
+    },
+  },
+}
+</script>
+
+<template>
+  <section :class="$style.tips">
+    <div v-html="html" />
+  </section>
+</template>
+
+<style module>
+.tips {
+  padding: 2rem 2rem 0 2rem;
+  color: #666;
+  line-height: 1.5;
+
+  & h3 {
+    font-size: 1.5em;
+  }
+
+  & p,
+  & ul {
+    margin: .5em 0; 
+  }
+
+  & ul {
+    list-style-type: disc;
+    list-style-position: outside;
+    padding-left: 2em;
+  }
+
+  & code {
+    margin: 0 .2em;
+    font-family: monospace;
+    white-space: nowrap;
+    border-bottom: 1px dotted #333;
+  }
+}
+</style>
diff --git a/src/css/common.css b/src/css/common.css
index 4ba26e3..726e9b2 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -3,33 +3,34 @@
   font-family: PingFangSC-Regular, 'Helvetica Neue', Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
   color: #333;
 
-  /* small mobile (iPhone5) */
-  @media (width <= 320px) {
+  /* smartphones, iPhone, portrait 480x320 phones */
+  @media (min-width: 320px) {
     font-size: 12px;
   }
 
-  /* middle mobile (iPhone6) */
-  @media (width > 375px) {
-    font-size: 16px;
+  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
+  @media (min-width: 481px) {
+    font-size: 14px;
   }
 
-  /* large mobile (iPhone6 Plus) */
-  @media (width > 425px) {
+  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
+  @media (min-width: 641px) {
     font-size: 18px;
   }
 
-  /* larger mobile */
-  @media (width >= 667px) {
+  /* tablet, landscape iPad, lo-res laptops ands desktops */
+  @media (min-width: 961px) {
     font-size: 20px;
   }
 
-  /* tablet */
-  @media (width >= 768px) and (width < 1024px) {
-    font-size: 24px;
+  /* big landscape tablets, laptops, and desktops */ 
+  @media (min-width: 1025px){
+    font-size: 22px;
   }
 
-  @media (width >= 1280px){
-    font-size: 24px;
+  /* hi-res laptops and desktops */
+  @media (min-width: 1281px) {
+    font-size: 22px;
   }
 }
 
diff --git a/src/css/vars.css b/src/css/vars.css
index 7fda267..bb79561 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,13 +1,17 @@
 :root {
   --main-color: #2196f3;
   --header-height: 4rem;
-  --padding: .8rem;
+  --padding: .8em;
   --cell-border-color: #d6d6d6;
 
   /* z-indexes */
-  --z-header: 1;
-  --z-header-menu: 2;
-  --z-modal: 3;
+  --z-box-counter: 1;
+  --z-sidebar: 8;
+  --z-header: 16;
+  --z-header-menu: 32;
+  --z-nav: 64;
+  --z-action-button-bar: 96;
+  --z-modal: 128;
 
   /* shadows */
   --shadow-2dp: {
diff --git a/src/js/Icon.js b/src/js/Icon.js
index a0d1782..235b882 100644
--- a/src/js/Icon.js
+++ b/src/js/Icon.js
@@ -14,3 +14,6 @@ export const burst = require('media/burst.svg')
 export const hexagon = require('media/hexagon.svg')
 export const list = require('media/list.svg')
 export const blocks = require('media/blocks.svg')
+export const information = require('media/information.svg')
+export const check = require('media/check.svg')
+export const bulb = require('media/bulb.svg')
diff --git a/src/lang/en.hjson b/src/lang/en.hjson
index 98b02d8..ca89c83 100644
--- a/src/lang/en.hjson
+++ b/src/lang/en.hjson
@@ -29,6 +29,11 @@ confirm_delete: Are you sure to delete %s ?
 // cell component
 no_cost: no cost
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: Type
 classes: Class
diff --git a/src/lang/it.hjson b/src/lang/it.hjson
index 36e0caf..2db9c6f 100644
--- a/src/lang/it.hjson
+++ b/src/lang/it.hjson
@@ -29,6 +29,11 @@ confirm_delete: Are you sure to delete %s ?
 // cell component
 no_cost: no cost
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: Tipo
 classes: Classe
diff --git a/src/lang/jp.hjson b/src/lang/jp.hjson
index a8f8172..e49a1f0 100644
--- a/src/lang/jp.hjson
+++ b/src/lang/jp.hjson
@@ -29,6 +29,11 @@ confirm_delete: Are you sure to delete %s ?
 // cell component
 no_cost: no cost
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: 種類
 classes: タイプ
diff --git a/src/lang/ko.hjson b/src/lang/ko.hjson
index 06a21ed..641e60f 100644
--- a/src/lang/ko.hjson
+++ b/src/lang/ko.hjson
@@ -29,6 +29,11 @@ confirm_delete: 정말로 %s 를 삭제합니까?
 // cell component
 no_cost: 코스트 없음
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: 종류
 classes: 타입
diff --git a/src/lang/ru.hjson b/src/lang/ru.hjson
index 1c78fa0..b213062 100644
--- a/src/lang/ru.hjson
+++ b/src/lang/ru.hjson
@@ -29,6 +29,11 @@ confirm_delete: Вы точно хотите удалить %s ?
 // cell component
 no_cost: нет цены
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: Тип
 classes: Класс
diff --git a/src/lang/zh_Hans.hjson b/src/lang/zh_Hans.hjson
index 759fb3d..e4ab8f1 100644
--- a/src/lang/zh_Hans.hjson
+++ b/src/lang/zh_Hans.hjson
@@ -3,7 +3,7 @@ suffix: _zh_CN
 // common
 ok: 确定
 cancel: 取消
-add: 新建
+add: 添加
 create: 创建
 reserve: 保留
 
@@ -29,6 +29,11 @@ confirm_delete: 确定删除卡组 %s ？
 // cell component
 no_cost: 无费用
 
+// action button bar
+card_selected: 已选择 %s 张卡片
+add_to_deck: 添加到卡组
+finished: 完成
+
 // prop
 cardType: 种类
 classes: 类别
diff --git a/src/media/bulb.svg b/src/media/bulb.svg
new file mode 100644
index 0000000..25a9978
--- /dev/null
+++ b/src/media/bulb.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z" /></svg>
\ No newline at end of file
diff --git a/src/media/check.svg b/src/media/check.svg
new file mode 100644
index 0000000..68e30c1
--- /dev/null
+++ b/src/media/check.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
\ No newline at end of file
diff --git a/src/media/information.svg b/src/media/information.svg
new file mode 100644
index 0000000..f411fc0
--- /dev/null
+++ b/src/media/information.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
\ No newline at end of file
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index 75f2d02..7f8082d 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -4,8 +4,9 @@ import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
 import DeckFloatButton from 'components/DeckFloatButton'
 import CellContainer from 'components/CellContainer'
+import Cell from 'components/Cell'
 import Block from 'components/Block'
-import DeckHead from 'components/DeckHead'
+import DeckSubheader from 'components/DeckSubheader'
 import Icon from 'components/Icon'
 import { defaultSort, isLrigCard } from 'js/util'
 import _ from 'lodash'
@@ -19,8 +20,9 @@ export default {
     DeckModals,
     DeckFloatButton,
     CellContainer,
+    Cell,
     Block,
-    DeckHead,
+    DeckSubheader,
     Icon,
   },
   data: () => ({
@@ -122,7 +124,7 @@ export default {
     closeModal() {
       this.$refs.modals.close()
     },
-    updateDeckHeader() {
+    updateDeckSubheaderer() {
       let lrigDeck = this.$refs.lrigDeck
       if (!lrigDeck) {
         return
@@ -131,7 +133,7 @@ export default {
       let top = $lrigDeck ? $lrigDeck.getBoundingClientRect().top : 0
       this.scrolledToLrig = top <= window.innerHeight / 2
       this.scrolledToTop = window.scrollY <= 0
-      this.request = requestIdleCallback(this.updateDeckHeader)
+      this.request = requestIdleCallback(this.updateDeckSubheaderer)
     },
     toggleView() {
       this.previewing ? this.goListView() : this.goBlockView()
@@ -139,9 +141,6 @@ export default {
     goListView() {
       this.$router.push({
         path: '/deck',
-        // query: {
-        //   mode: 'list',
-        // },
       })
     },
     goBlockView() {
@@ -152,9 +151,17 @@ export default {
         },
       })
     },
+    goDetail(pid) {
+      this.$router.push({
+        path: '/detail',
+        query: {
+          pid,
+        },
+      })
+    },
   },
   mounted() {
-    this.updateDeckHeader()
+    this.updateDeckSubheaderer()
   },
   destroyed() {
     cancelIdleCallback(this.request)
@@ -175,25 +182,33 @@ export default {
         @click.native="toggleView"/>
       <header-icon slot="right" name="more" @click.native="openMenu"/>
     </app-header>
-    <deck-head
+    <deck-subheader
+      v-show="!previewing"
       :scrolledToLrig="scrolledToLrig"
-      :previewing="previewing"
       :shadow="!scrolledToTop">
-    </deck-head>
+    </deck-subheader>
 
     <!-- List view -->
     <template v-if="!previewing">
-      <cell-container :cards="shownMainDeck" :protectionEnabled="true"/>
-      <cell-container ref="lrigDeck" :cards="shownLrigDeck" :protectionEnabled="true"/>
+      <cell-container :cards="shownMainDeck">
+        <template scope="props">
+          <cell :card="props.card" :protectionEnabled="true"/>
+        </template>
+      </cell-container>
+      <cell-container ref="lrigDeck" :cards="shownLrigDeck">
+        <template scope="props">
+          <cell :card="props.card" :protectionEnabled="true"/>
+        </template>
+      </cell-container>
     </template>
 
     <!-- Block view -->
     <div :class="$style.blocks" v-if="previewing">
       <div>
-        <block v-for="card in shownMainDeck" :class="$style.block" :card="card"/>
+        <block v-for="card in shownMainDeck" :class="$style.block" :card="card" :showCount="true" @click="goDetail"/>
       </div>
       <div>
-        <block v-for="card in shownLrigDeck" :class="$style.block" :card="card"/>
+        <block v-for="card in shownLrigDeck" :class="$style.block" :card="card" :showCount="true" @click="goDetail"/>
       </div>
     </div>
 
@@ -218,5 +233,6 @@ export default {
 }
 .block {
   width: 20%;
+  padding: .2em;
 }
 </style>
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
new file mode 100644
index 0000000..a61625a
--- /dev/null
+++ b/src/pages/DeckEditor.vue
@@ -0,0 +1,374 @@
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
+import DeckModals from 'components/DeckModals'
+import ActionButtonBar from 'components/ActionButtonBar'
+import BoxContainer from 'components/BoxContainer'
+import DeckHead from 'components/DeckHead'
+import Sidebar from 'components/Sidebar'
+import Tips from 'components/Tips'
+import Icon from 'components/Icon'
+import Box from 'components/Box'
+import Block from 'components/Block'
+import { defaultSort } from 'js/util'
+import Searcher from 'js/Searcher.js'
+import Localize from 'js/Localize'
+import _ from 'lodash'
+
+export default {
+  components: {
+    AppHeader,
+    HeaderIcon,
+    HeaderMenu,
+    DeckModals,
+    ActionButtonBar,
+    BoxContainer,
+    DeckHead,
+    Sidebar,
+    Tips,
+    Icon,
+    Box,
+    Block,
+  },
+  data: () => ({
+    queryString: '',
+    timer: -1,
+    blocking: false,
+
+    shownTips: false,
+    previewing: false,
+  }),
+  computed: {
+    ...mapState([
+      'selectedPids',
+    ]),
+    ...mapGetters([
+      'deckPids',
+      'mainDeck',
+      'lrigDeck',
+      'deckNames',
+    ]),
+    menuItems() {
+      return [
+        {
+          title: Localize('clone'),
+          icon: 'copy',
+          action: () => {
+            this.openModal('clone')
+          },
+        },
+        {
+          title: Localize('import'),
+          icon: 'download',
+          action: () => {
+            alert('Not yet implemented.')
+          },
+        },
+        {
+          title: Localize('export'),
+          icon: 'upload',
+          action: () => {
+            alert('Not yet implemented.')
+          },
+        },
+      ]
+    },
+    query: {
+      get() {
+        return this.$route.query.query || ''
+      },
+      set(query) {
+        if (this.blocking) {
+          clearTimeout(this.timer)
+          this.timer = setTimeout(() => {
+            this.queryString = query
+            this.blocking = false
+            this.scrollToTop()
+          }, 500)
+          return
+        }
+
+        this.updateQueryPart({
+          query,
+        })
+        this.scrollToTop()
+        this.blocking = true
+        this.timer = setTimeout(() => {
+          this.blocking = false
+        }, 500)
+      },
+    },
+    resultVisible() {
+      return !!this.query
+    },
+    deckName: {
+      get() {
+        return this.$store.state.deckName
+      },
+      set(name) {
+        if (name && !this.deckNames.includes(name)) {
+          this.$store.commit('renameDeck', {
+            origin: this.deckName,
+            name,
+          })
+        }
+      },
+    },
+    matchedCards() {
+      return Searcher.search(this.query)
+    },
+    shownMainDeck() {
+      let deck = _.unionBy(this.mainDeck, 'pid')
+      return defaultSort(deck)
+    },
+    shownLrigDeck() {
+      let deck = _.unionBy(this.lrigDeck, 'pid')
+      return defaultSort(deck)
+    },
+  },
+  methods: {
+    defaultSort,
+    updateQueryPart(part) {
+      let query = Object.assign({}, this.$route.query, part)
+      Object.keys(query).forEach(key => {
+        if (!query[key]) {
+          delete query[key]
+        }
+      })
+      this.$router.replace({
+        path: this.$route.path,
+        query,
+      })
+    },
+    openMenu() {
+      this.$refs.menu.open()
+    },
+    closeMenu() {
+      this.$refs.menu.close()
+    },
+    openModal(type) {
+      this.$refs.modals.open(type)
+    },
+    closeModal() {
+      this.$refs.modals.close()
+    },
+    closeBar() {
+      this.$store.commit('clearSelectedPids')
+      this.$store.commit('clearShownPid')
+    },
+    changeDeck(name) {
+      this.query = ''
+      this.closeBar()
+      this.$store.commit('switchDeck', name)
+    },
+    tooglePreview() {
+      this.previewing ? this.previewing = false : this.previewing = true
+    },
+    toogleTips() {
+      this.shownTips ? this.shownTips = false : this.shownTips = true
+    },
+    scrollToTop() {
+      window.scrollTo(0, 0)
+      this.shownTips = false
+      if (this.$refs.boxContainer) {
+        this.$refs.boxContainer.resetRows()
+      }
+    },
+    L(text) {
+      return Localize(text)
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <div :class="$style.nav">
+      <div :class="$style.flexCenter">
+        <a href="#" :class="$style.title"> WEBXOSS </a>
+      </div>
+      <div :class="$style.flexCenter">
+        <button @click="openModal('add')" :class="[$style.mainColor, $style.button]">
+          {{ L('new_deck') }}
+        </button>
+      </div>
+      <div :class="$style.navList">
+        <a v-for="name in deckNames" @click="changeDeck(name)">
+          <div :class="[$style.navItem, name === deckName ? $style.navItemSelected : '']">{{ name }}</div>
+        </a>
+      </div>
+    </div>
+    <div>
+      <app-header>
+        <div slot="left" style="width: 15%;" />
+        <input
+          :class="$style.searchBar"
+          placeholder="Search..."
+          spellcheck="false"
+          autocomplete="off"
+          autocapitalize="none"
+          maxlength="30"
+          v-model="query"/>
+        <template v-if="!resultVisible">
+          <header-icon slot="right" :style="{ width: 'initial' }" name="blocks" @click.native="tooglePreview" />
+          <header-icon slot="right" name="more" @click.native="openMenu"/>
+        </template>
+        <template v-if="resultVisible">
+          <header-icon slot="right" name="bulb" @click.native="toogleTips" />
+        </template>
+        <div slot="right" style="width: 10%;"/>
+      </app-header>
+      <div :class="$style.container" @click="closeBar">
+        <div v-if="resultVisible" :class="$style.content">
+          <box-container
+            v-if="matchedCards.length && !shownTips"
+            ref="boxContainer"
+            :loadMoreEnabled="true"
+            :cards="matchedCards" />
+          <tips v-if="!matchedCards.length && !shownTips" name="emptyTips" />
+          <tips v-if="shownTips" name="searchTips" />
+        </div>
+        <div v-show="!resultVisible" :class="$style.content">
+          <template v-if="!previewing">
+            <div :class="$style.flex">
+              <input
+                v-model.lazy.trim="deckName"
+                spellcheck="false"
+                autocomplete="off"
+                autocapitalize="none"
+                maxlength="20"
+                :class="$style.deckNameInput" />
+              <div style="margin-left: auto;">
+                <button
+                  :class="[$style.grey, $style.button]"
+                  @click="openModal('delete')">
+                  {{ L('delete')}}
+                </button>
+              </div>
+            </div>
+            <deck-head />
+            <box-container :cards="defaultSort(mainDeck)" />
+            <deck-head :lrig="true" />
+            <box-container :cards="defaultSort(lrigDeck)" />
+          </template>
+          <template v-if="previewing">
+            <div :class="$style.blocks">
+              <div>
+                <block v-for="card in shownMainDeck" :class="$style.block" :card="card" :showCount="true" />
+              </div>
+              <div>
+                <block v-for="card in shownLrigDeck" :class="$style.block" :card="card" :showCount="true" />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <sidebar />
+    <action-button-bar :searching="resultVisible" />
+    <header-menu ref="menu" :items="menuItems" :decktopView="true" />
+    <deck-modals ref="modals"/>
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.nav {
+  position: fixed;
+  z-index: var(--z-nav);
+  top: 0;
+  left: 0;
+  width: 15%;
+  height: 100vh;
+  font-size: 1.2em;
+  box-shadow: 0 0 4px rgba(0,0,0,.14), 2px 4px 8px rgba(0,0,0,.28);
+  background-color: #fff;
+}
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  border-bottom: 1px solid var(--cell-border-color);
+}
+.title {
+  font-size: 1.7rem;
+  color: var(--main-color);
+}
+.mainColor {
+  color: #fff;
+  background-color: var(--main-color);
+}
+.grey {
+  color: #000;
+  background-color: #eee;
+}
+.button {
+  padding: .2em 2em;
+  text-transform: capitalize;
+  @apply --shadow-4dp;
+  transition: .3s;
+}
+.button:hover {
+  @apply --shadow-8dp;
+}
+.navList {
+  color: #757575;
+  padding: 1em 0;
+}
+.navItem {
+  padding: .4em 1em;
+}
+.navItem:hover {
+  background-color: rgba(0,0,0,.03);
+}
+.navItemSelected {
+  background-color: rgba(0,0,0,.05);
+  color: #212121;
+}
+.searchBar {
+  flex: 1;
+  color: #fff;
+  padding: .3em .5em;
+  margin-left: 2em;
+  margin-right: 40%;
+  background-color: color(var(--main-color) l(+10%));
+  border-radius: 3px;
+}
+.searchBar::placeholder {
+  color: #fffa;
+}
+.searchBar::selection {
+  color: #333;
+  background-color: #ffff00;
+}
+.container {
+  padding: 0 10% 0 15%;
+  min-height: calc(100vh - var(--header-height));
+}
+.content {
+  margin-left: 2em;
+  padding-top: .5em;
+  background-color: #fafafa;
+}
+.flex {
+  display: flex;
+  align-items: center;
+  padding: .5rem;
+}
+.deckNameInput {
+  font-size: 1.5em;
+  cursor: text;
+  display: block;
+}
+.deckNameInput:hover {
+  background-color: rgba(77,144,254,0.15);
+}
+.blocks {
+  padding: var(--padding);
+}
+.block {
+  width: 12%;
+  padding: .2em;
+}
+</style>
diff --git a/src/pages/Detail.vue b/src/pages/Detail.vue
index 2641c5c..9386bf4 100644
--- a/src/pages/Detail.vue
+++ b/src/pages/Detail.vue
@@ -1,12 +1,14 @@
 <script>
 import AppHeader from 'components/AppHeader'
 import Thumbnail from 'components/Thumbnail'
+import CardInfoTable from 'components/CardInfoTable'
 import Localize from 'js/Localize'
 
 export default {
   components: {
     AppHeader,
     Thumbnail,
+    CardInfoTable,
   },
   computed: {
     pid: {
@@ -33,73 +35,9 @@ export default {
     name() {
       return Localize.cardName(this.card)
     },
-    type() {
-      return Localize(this.card.cardType)
-    },
-    color() {
-      return Localize(this.card.color)
-    },
     limiting() {
       return Localize.limiting(this.card)
     },
-    cardEffect() {
-      return Localize.effectTexts(this.card)
-    },
-    lifeBurst() {
-      return Localize.burstEffectTexts(this.card)
-    },
-    rows() {
-      let card = this.card
-      let level = {
-        key: Localize('level'),
-        value: card.level,
-      }
-      let power = {
-        key: Localize('power'),
-        value: card.power,
-      }
-      let limit = {
-        key: Localize('limit'),
-        value: (card.limit < 1024) ? card.limit : '∞',
-      }
-      let cost = {
-        key: Localize('cost'),
-        value: Localize.cost(card),
-      }
-      let timing = {
-        key: Localize('timings'),
-        value: Localize.timings(card),
-      }
-      let classes = {
-        key: Localize('classes'),
-        value: Localize.classes(card),
-      }
-      let guard = {
-        key: Localize('guard'),
-        value: Localize.guard(card),
-      }
-      return {
-        'RESONA': [
-          [level, classes],
-          [power, guard],
-        ],
-        'SIGNI': [
-          [level, classes],
-          [power, guard],
-        ],
-        'SPELL': [
-          [cost],
-        ],
-        'LRIG': [
-          [level, classes],
-          [limit, cost],
-        ],
-        'ARTS': [
-          [cost],
-          [timing],
-        ],
-      }[card.cardType] || []
-    },
   },
   methods: {
     goGallery() {
@@ -123,34 +61,18 @@ export default {
         <thumbnail :class="[$style.thumbnail, $color[card.color]]" :pid="pid" @click.native="goGallery"></thumbnail>
         <div :class="$style.main">
           <div>
-            <div>
+            <div style="display: flex;">
               <span>{{ card.wxid }}</span>
-              <span :class="$style.right">{{ card.rarity }}</span>
+              <span style="margin-left: auto;">{{ card.rarity }}</span>
             </div>
-            <div :class="$style.title">{{ name }}</div>
+            <div style="font-size: 1.5em;">{{ name }}</div>
           </div>
-          <div>
-            <span>{{ type }}</span>
-            <span :class="$style.right">{{ limiting }}</span>
+          <div style="display: flex;">
+            <span style="margin-left: auto;">{{ limiting }}</span>
           </div>
         </div>
       </div>
-      <table :class="$style.table">
-        <tbody>
-          <tr v-for="row in rows" :class="$style.rows">
-          	<template v-for="meta in row">
-              <td :class="$style.key">{{ meta.key }}</td>
-              <td :colspan="row.length === 1 ? 3 : 1">{{ meta.value }}</td>
-            </template>
-          </tr>
-          <tr>
-            <td colspan="4">{{ cardEffect }}</td>
-          </tr>
-          <tr>
-            <td colspan="4">{{ lifeBurst }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <card-info-table :card="card"/>
     </div>
   </div>
 </template>
@@ -165,24 +87,6 @@ export default {
   display: flex;
   margin-bottom: 0.5em;
 }
-.title {
-  font-size: 1.5em;
-}
-.table {
-  width: 100%;
-  line-height: 1.5;
-  white-space: pre-line;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-td {
-  border: 1px solid #cbcbcb;
-  padding: .5em .2em;
-}
-.key {
-  width: 15%;
-  text-align: center;
-}
 .thumbnail {
   width: 11em; 
   height: 11em; 
@@ -196,7 +100,4 @@ td {
   overflow: hidden;
   padding: .5em;
 }
-.right {
-  float: right;
-}
 </style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 109673e..073d69d 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -2,23 +2,22 @@
 import { AppHeader, HeaderIcon } from 'components/AppHeader'
 import CellContainer from 'components/CellContainer'
 import Searcher from 'js/Searcher.js'
-import marked from 'marked'
+import Cell from 'components/Cell'
+import Tips from 'components/Tips'
 
 export default {
   components: {
     AppHeader,
     HeaderIcon,
     CellContainer,
+    Cell,
+    Tips,
   },
   data: () => ({
     // To improve performance when user typing,
     // block the search for a short time after input.
     timer: -1,
     blocking: false,
-    request: -1,
-
-    searchTips: require('./searchTips.md'), // test
-    emptyTips: require('./emptyTips.md'), // test
   }),
   computed: {
     query: {
@@ -53,7 +52,6 @@ export default {
     },
   },
   methods: {
-    marked,
     updateQueryPart(part) {
       let query = Object.assign({}, this.$route.query, part)
       Object.keys(query).forEach(key => {
@@ -90,14 +88,14 @@ export default {
       <header-icon name="more"/>
     </app-header>
     <section v-if="query && matchedCards.length">
-      <cell-container :cards="matchedCards" :longListOpimizationEnabled="true"/>
-    </section>
-    <section :class="$style.tips" v-if="!query">
-      <div v-html="marked(searchTips)"></div>
-    </section>
-    <section :class="$style.tips" v-if="query && !matchedCards.length">
-      <div v-html="marked(emptyTips)"></div>
+      <cell-container :cards="matchedCards" :longListOpimizationEnabled="true">
+        <template scope="props">
+          <cell :card="props.card"/>
+        </template>
+      </cell-container>
     </section>
+    <tips v-if="!query" name="searchTips" />
+    <tips v-if="query && !matchedCards.length" name="emptyTips" />
   </div>
 </template>
 
@@ -117,31 +115,4 @@ export default {
   color: #333;
   background-color: #ffff00;
 }
-.tips {
-  padding: 2rem 2rem 0 2rem;
-  color: #666;
-  line-height: 1.5;
-
-  & h3 {
-    font-size: 1.5em;
-  }
-
-  & p,
-  & ul {
-    margin: .5em 0; 
-  }
-
-  & ul {
-    list-style-type: disc;
-    list-style-position: outside;
-    padding-left: 2em;
-  }
-
-  & code {
-    margin: 0 .2em;
-    font-family: monospace;
-    white-space: nowrap;
-    border-bottom: 1px dotted #333;
-  }
-}
 </style>
diff --git a/src/pages/introduce.md b/src/pages/introduce.md
index a0965eb..490bcbc 100644
--- a/src/pages/introduce.md
+++ b/src/pages/introduce.md
@@ -7,3 +7,4 @@
 * GitHub: [webxoss-deckeditor2](https://github.com/Deardrops/webxoss-deckeditor2)
 
 ## [👉 Try our new DeckEditor](#/deck)
+## [DeckEditor | desktop view | WIP](#/deckeditor)
diff --git a/src/router.js b/src/router.js
index 59329e3..23b7b1e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -26,5 +26,9 @@ export default new Router({
       path: '/gallery',
       component: require('pages/Gallery'),
     },
+    {
+      path: '/deckeditor',
+      component: require('pages/DeckEditor'),
+    },
   ],
 })
diff --git a/src/store.js b/src/store.js
index 9e8319a..5346eb8 100644
--- a/src/store.js
+++ b/src/store.js
@@ -29,11 +29,15 @@ const state = {
 
   // current selected deck name
   deckName: '',
+  shownPid: 0,
+  selectedPids: [],
 
   localization: {
     lang: 'en',
   },
+
   windowWidth: 0,
+  fontSize: 14,
 }
 
 Localize.config = state.localization
@@ -164,8 +168,32 @@ const mutations = {
     state.localization.lang = lang
     setLanguegeCardInfo(lang)
   },
-  changeWindowWidth(state, width) {
-    state.windowWidth = width
+  setWindowData(state) {
+    state.windowWidth = window.innerWidth
+    state.fontSize = +window.getComputedStyle(window.document.body)
+        .fontSize.slice(0, -2)
+  },
+  setShownPid(state, pid) {
+    if (0 < pid && pid < Object.keys(CardInfo).length) {
+      state.shownPid = pid
+    }
+  },
+  clearShownPid(state) {
+    state.shownPid = 0
+  },
+  addSelectedPid(state, pid) {
+    if (0 < pid && pid < Object.keys(CardInfo).length) {
+      state.selectedPids.push(pid)
+    }
+  },
+  delSelectedPid(state, pid) {
+    let idx = state.selectedPids.indexOf(pid)
+    if (idx !== -1) {
+      state.selectedPids.splice(idx, 1)
+    }
+  },
+  clearSelectedPids(state) {
+    state.selectedPids.splice(0)
   },
 }
 
@@ -211,8 +239,6 @@ store.watch((state, getters) => {
   localStorage.setItem(deckName, JSON.stringify(file))
 })
 
-window.addEventListener('resize', () => {
-  store.commit('changeWindowWidth', window.innerWidth)
-}, false)
+window.addEventListener('resize', store.setWindowData, false)
 
 export default store