diff --git a/src/libs/utils.js b/src/libs/utils.js
index 6645bbfe..bc7ed928 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -195,12 +195,13 @@ export function consensusPubkeyToHexAddress(consensusPubkey) {
   let raw = null
   if (typeof consensusPubkey === 'object') {
     if (consensusPubkey['@type'] === '/cosmos.crypto.ed25519.PubKey') {
-      raw = toBase64(fromHex(toHex(sha256(fromBase64(consensusPubkey.key))).slice(0, 40)))
+      // raw = toBase64(fromHex(toHex(sha256(fromBase64(consensusPubkey.key))).slice(0, 40)))
+      raw = toHex(sha256(fromBase64(consensusPubkey.key))).slice(0, 40).toUpperCase()
       return raw
     }
     // /cosmos.crypto.secp256k1.PubKey
     if (consensusPubkey['@type'] === '/cosmos.crypto.secp256k1.PubKey') {
-      raw = toBase64(fromHex(new RIPEMD160().update(Buffer.from(sha256(fromBase64(consensusPubkey.key)))).digest('hex')))
+      raw = new RIPEMD160().update(Buffer.from(sha256(fromBase64(consensusPubkey.key)))).digest('hex')
       return raw
     }
     if (consensusPubkey.type === 'tendermint/PubKeySecp256k1') {
diff --git a/src/views/ConsensusStates.vue b/src/views/ConsensusStates.vue
index b71afdf8..442c1cf9 100644
--- a/src/views/ConsensusStates.vue
+++ b/src/views/ConsensusStates.vue
@@ -26,19 +26,64 @@
         {{ httpstatus }}: {{ httpStatusText }}
       </div>
     </b-card>
+    <b-row v-if="roundState['height/round/step']">
+      <b-col
+        lg="3"
+        sm="6"
+      >
+        <dashboard-card-horizontal
+          icon="ArrowUpCircleIcon"
+          color="danger"
+
+          :statistic="rate"
+          statistic-title="Onboard Rate"
+        />
+      </b-col>
+      <b-col
+        lg="3"
+        sm="6"
+      >
+        <dashboard-card-horizontal
+          icon="HashIcon"
+          color="success"
+          :statistic="height"
+          statistic-title="Height"
+        />
+      </b-col>
+      <b-col
+        lg="3"
+        sm="6"
+      >
+        <dashboard-card-horizontal
+          icon="RepeatIcon"
+          :statistic="round"
+          statistic-title="Round"
+        />
+      </b-col>
+      <b-col
+        lg="3"
+        sm="6"
+      >
+        <dashboard-card-horizontal
+          icon="CodeIcon"
+          color="info"
+          :statistic="step"
+          statistic-title="Step"
+        />
+      </b-col>
+    </b-row>
     <b-card v-if="roundState['height/round/step']">
       <b-card-title class="d-flex justify-content-between">
-        <span>Height/Round/Step: {{ roundState['height/round/step'] }}</span>
         <small class="text-danger">Updated at {{ format(updatetime) }}</small>
       </b-card-title>
       <div
         v-for="item in roundState.height_vote_set"
         :key="item.round"
       >
-        Round: {{ item.round }} {{ item.precommits_bit_array }}
+        Round: {{ item.round }} {{ item.prevotes_bit_array }}
         <b-card-body class="px-0">
           <b-button
-            v-for="(pre, i) in item.precommits"
+            v-for="(pre, i) in item.prevotes"
             :key="i"
             size="sm"
             style="margin: 2px;"
@@ -76,7 +121,9 @@
         Tips
       </h4>
       <div class="alert-body">
-        <span>If you want to change the default rpc endpoint. make sure that "https" and "CORS" are enabled on your server.</span>
+        <ul>
+          <li>If you want to change the default rpc endpoint. make sure that "https" and "CORS" are enabled on your server.</li>
+        </ul>
       </div>
     </b-alert>
   </div>
@@ -92,6 +139,7 @@ import {
   consensusPubkeyToHexAddress, getLocalChains, getCachedValidators, toDay,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
+import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue'
 
 export default {
   components: {
@@ -108,6 +156,7 @@ export default {
     BAvatar,
     BCardTitle,
     vSelect,
+    DashboardCardHorizontal,
   },
 
   data() {
@@ -122,6 +171,10 @@ export default {
       positions: [],
       updatetime: new Date(),
       rpc: '',
+      height: '-',
+      round: '-',
+      step: '-',
+      rate: '-',
     }
   },
   computed: {
@@ -132,6 +185,8 @@ export default {
   created() {
     this.validators()
     this.rpc = `${this.chains[this.selected].rpc[0]}/consensus_state`
+    this.fetchPosition()
+    this.update()
     this.timer = setInterval(this.update, 6000)
   },
   beforeDestroy() {
@@ -145,7 +200,18 @@ export default {
       }
       return txt === 'nil-Vote' ? 'outline-secondary' : 'success'
     },
+    fetchPosition() {
+      const dumpurl = this.rpc.replace('consensus_state', 'dump_consensus_state')
+      fetch(dumpurl).then(data => {
+        this.httpstatus = data.status
+        this.httpStatusText = data.httpStatusText
+        return data.json()
+      }).then(res => {
+        this.positions = res.result.round_state.validators.validators
+      })
+    },
     update() {
+      this.rate = '0%'
       this.updatetime = new Date()
       if (this.httpstatus === 200) {
         fetch(this.rpc).then(data => {
@@ -154,6 +220,21 @@ export default {
           return data.json()
         }).then(res => {
           this.roundState = res.result.round_state
+          const raw = this.roundState['height/round/step'].split('/')
+          // eslint-disable-next-line prefer-destructuring
+          this.height = raw[0]
+          // eslint-disable-next-line prefer-destructuring
+          this.round = raw[1]
+          // eslint-disable-next-line prefer-destructuring
+          this.step = raw[2]
+
+          // find the highest onboard rate
+          this.roundState.height_vote_set.forEach(element => {
+            const rate = Number(element.prevotes_bit_array.substring(element.prevotes_bit_array.length - 4))
+            if (rate > 0) {
+              this.rate = `${rate * 100}%`
+            }
+          })
         }).catch(err => {
           this.httpstatus = 500
           this.httpStatusText = err
diff --git a/src/views/Uptime.vue b/src/views/Uptime.vue
index 3fcc6540..309303ed 100644
--- a/src/views/Uptime.vue
+++ b/src/views/Uptime.vue
@@ -108,7 +108,7 @@ import {
 import {
   consensusPubkeyToHexAddress, getCachedValidators, timeIn, toDay,
 } from '@/libs/utils'
-import { fromBech32, toBase64 } from '@cosmjs/encoding'
+import { fromBech32, fromHex, toBase64 } from '@cosmjs/encoding'
 
 export default {
   components: {
@@ -150,7 +150,7 @@ export default {
       vals.sort((a, b) => b.delegator_shares - a.delegator_shares)
       const rets = vals.map(x => ({
         validator: x.description,
-        address: consensusPubkeyToHexAddress(x.consensus_pubkey),
+        address: this.hex2base64(consensusPubkeyToHexAddress(x.consensus_pubkey)),
       }))
       if (this.missedFilter) {
         return rets.filter(x => this.missing[x.address].missed_blocks_counter > 0)
@@ -223,10 +223,13 @@ export default {
     initColor() {
       const sigs = {}
       this.validators.forEach(x => {
-        sigs[consensusPubkeyToHexAddress(x.consensus_pubkey)] = 'bg-danger'
+        sigs[this.hex2base64(consensusPubkeyToHexAddress(x.consensus_pubkey))] = 'bg-danger'
       })
       return sigs
     },
+    hex2base64(v) {
+      return toBase64(fromHex(v))
+    },
     fetch_status(height, resolve) {
       const block = this.blocks.find(b => b.height === height)
       if (block) {