diff --git a/src/router/index.js b/src/router/index.js
index 03729f1d..2cf41702 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,20 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/:chain/blocks',
+      name: 'blocks',
+      component: () => import('@/views/Blocks.vue'),
+      meta: {
+        pageTitle: 'Block',
+        breadcrumb: [
+          {
+            text: 'Blocks',
+            active: true,
+          },
+        ],
+      },
+    },
     {
       path: '/:chain/block/:height',
       name: 'block',
diff --git a/src/views/Blocks.vue b/src/views/Blocks.vue
new file mode 100644
index 00000000..4d348490
--- /dev/null
+++ b/src/views/Blocks.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <b-card
+      no-body
+    >
+      <b-card-header>
+        <b-card-title>
+          Blocks
+        </b-card-title>
+      </b-card-header>
+      <b-table
+        :items="blocks"
+        :fields="list_fields"
+        :sort-desc="true"
+        sort-by="tokens"
+        striped
+        hover
+        responsive="sm"
+      >
+        <!-- Column: Height -->
+        <template #cell(height)="data">
+          <router-link :to="`./block/${data.item.block.header.height}`">
+            #{{ data.item.block.header.height }}
+          </router-link>
+        </template>
+        <template #cell(hash)="data">
+          {{ data.item.block_id.hash }}
+        </template>
+        <template #cell(time)="data">
+          {{ formatTime(data.item.block.header.time) }}
+        </template>
+        <template #cell(proposer)="data">
+          {{ data.item.block.header.proposer_address }}
+        </template>
+        <template #cell(txs)="data">
+          {{ length(data.item.block.data.txs) }}
+        </template>
+
+      </b-table>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import {
+  BTable, BCard, BCardHeader, BCardTitle, VBTooltip,
+} from 'bootstrap-vue'
+import {
+  toDay,
+} from '@/libs/data'
+// import fetch from 'node-fetch'
+
+export default {
+  components: {
+    BCard,
+    BTable,
+    BCardHeader,
+    BCardTitle,
+  },
+  directives: {
+    'b-tooltip': VBTooltip,
+  },
+  data() {
+    return {
+      islive: true,
+      blocks: [],
+      list_fields: [
+        { key: 'height', sortable: true },
+        {
+          key: 'hash',
+          tdClass: 'text-truncate',
+        },
+        {
+          key: 'proposer',
+          tdClass: 'text-truncate',
+        },
+        {
+          key: 'txs',
+          // formatter: (value, i, data) => this.apr(value, i, data),
+          tdClass: 'text-right',
+          thClass: 'text-right',
+        },
+        { key: 'time' },
+      ],
+    }
+  },
+  created() {
+    this.$http.getLatestBlock().then(res => {
+      this.blocks.push(res)
+      const list = []
+      const { height } = res.block.header
+      for (let i = 1; i < 20; i += 1) {
+        list.push(height - i)
+      }
+      console.log(height, list)
+      let promise = Promise.resolve()
+      list.forEach(item => {
+        promise = promise.then(() => new Promise(resolve => {
+          this.$http.getBlockByHeight(item).then(b => {
+            resolve()
+            this.blocks.push(b)
+          })
+        }))
+      })
+      this.timer = setInterval(this.fetch, 6000)
+    })
+  },
+  beforeDestroy() {
+    this.islive = false
+    clearInterval(this.timer)
+  },
+  methods: {
+    length: v => (Array.isArray(v) ? v.length : 0),
+    formatTime: v => toDay(v),
+    fetch() {
+      this.$http.getLatestBlock().then(b => {
+        const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)
+        if (has < 0) this.blocks.unshift(b)
+        if (this.blocks.length > 200) this.blocks.pop()
+      })
+    },
+  },
+}
+</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0de1f275..55a46198 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -25,50 +25,53 @@
           md="4"
           sm="6"
         >
-          <b-card
-            v-if="data"
-            no-body
-          >
-            <b-card-header>
-              <h4 class="mb-0 text-uppercase">
-                {{ data.chain_name }}
-              </h4>
-              <b-card-text class="mb-0">
-                Updated on {{ data.time }}
-              </b-card-text>
-            </b-card-header>
-
-            <b-img
-              :src="data.logo"
-              height="145"
-              class="mb-2"
-            />
-            <b-row class="text-center mx-0">
-              <b-col
-                cols="6"
-                class="border-top border-right d-flex align-items-between flex-column py-1"
-              >
-                <b-card-text class="text-muted mb-0">
-                  SDK Version
+          <router-link :to="data.chain_name">
+            <b-card
+              v-if="data"
+              no-body
+              hover
+            >
+              <b-card-header>
+                <h4 class="mb-0 text-uppercase">
+                  {{ data.chain_name }}
+                </h4>
+                <b-card-text class="mb-0">
+                  Updated on {{ data.time }}
                 </b-card-text>
-                <h3 class="font-weight-bolder mb-0">
-                  {{ data.sdk_version }}
-                </h3>
-              </b-col>
+              </b-card-header>
 
-              <b-col
-                cols="6"
-                class="border-top d-flex align-items-between flex-column py-1"
-              >
-                <b-card-text class="text-muted mb-0">
-                  Height
-                </b-card-text>
-                <h3 class="font-weight-bolder mb-0">
-                  {{ data.height }}
-                </h3>
-              </b-col>
-            </b-row>
-          </b-card>
+              <b-img
+                :src="data.logo"
+                height="145"
+                class="mb-2"
+              />
+              <b-row class="text-center mx-0">
+                <b-col
+                  cols="6"
+                  class="border-top border-right d-flex align-items-between flex-column py-1"
+                >
+                  <b-card-text class="text-muted mb-0">
+                    SDK Version
+                  </b-card-text>
+                  <h3 class="font-weight-bolder mb-0">
+                    {{ data.sdk_version }}
+                  </h3>
+                </b-col>
+
+                <b-col
+                  cols="6"
+                  class="border-top d-flex align-items-between flex-column py-1"
+                >
+                  <b-card-text class="text-muted mb-0">
+                    Height
+                  </b-card-text>
+                  <h3 class="font-weight-bolder mb-0">
+                    {{ data.height }}
+                  </h3>
+                </b-col>
+              </b-row>
+            </b-card>
+          </router-link>
         </b-col>
 
         <!-- no result found -->