diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index c2ac75fc..dcca7a95 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import {
-    useBlockchain,
-    useFormatter,
-    useStakingStore,
-    useTxDialog,
+  useBlockchain,
+  useFormatter,
+  useStakingStore,
+  useTxDialog,
 } from '@/stores';
 import { select } from '@/components/dynamic/index';
 import type { PaginatedProposals } from '@/types';
@@ -12,263 +12,234 @@ import type { PropType } from 'vue';
 import { ref } from 'vue';
 const dialog = useTxDialog();
 defineProps({
-    proposals: { type: Object as PropType<PaginatedProposals> },
+  proposals: { type: Object as PropType<PaginatedProposals> },
 });
 
 const format = useFormatter();
 const staking = useStakingStore();
 const chain = useBlockchain();
 function showType(v: string) {
-    if (v) {
-        return v.substring(v.lastIndexOf('.') + 1);
-    }
-    return v;
+  if (v) {
+    return v.substring(v.lastIndexOf('.') + 1);
+  }
+  return v;
 }
 
 const statusMap: Record<string, string> = {
-    PROPOSAL_STATUS_VOTING_PERIOD: 'VOTING',
-    PROPOSAL_STATUS_PASSED: 'PASSED',
-    PROPOSAL_STATUS_REJECTED: 'REJECTED',
+  PROPOSAL_STATUS_VOTING_PERIOD: 'VOTING',
+  PROPOSAL_STATUS_PASSED: 'PASSED',
+  PROPOSAL_STATUS_REJECTED: 'REJECTED',
 };
 const voterStatusMap: Record<string, string> = {
-    No_With_Veto: '',
-    VOTE_OPTION_YES: 'success',
-    VOTE_OPTION_NO: 'error',
-    VOTE_OPTION_ABSTAIN: 'warning',
+  VOTE_OPTION_NO_WITH_VETO: '',
+  VOTE_OPTION_YES: 'success',
+  VOTE_OPTION_NO: 'error',
+  VOTE_OPTION_ABSTAIN: 'warning',
 };
 
 const proposalInfo = ref();
 </script>
 <template>
-    <div class="bg-white dark:bg-[#28334e] rounded text-sm">
-        <table class="table-compact w-full table-fixed hidden lg:!table">
-            <tbody>
-                <tr v-for="(item, index) in proposals?.proposals" :key="index">
-                    <td class="px-4 w-20">
-                        <label
-                            for="proposal-detail-modal"
-                            class="text-main text-base hover:text-indigo-400 cursor-pointer"
-                            @click="proposalInfo = item"
-                        >
-                            #{{ item?.proposal_id }}</label
-                        >
-                    </td>
-                    <td class="w-full">
-                        <div>
-                            <RouterLink
-                                :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-                                class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
-                            >
-                                {{ item?.content?.title }}
-                            </RouterLink>
-                            <div
-                                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
-                            >
-                                {{ showType(item.content['@type']) }}
-                            </div>
-                        </div>
-                    </td>
-                    <td class="w-60">
-                        <ProposalProcess
-                            :pool="staking.pool"
-                            :tally="item.final_tally_result"
-                        ></ProposalProcess>
-                    </td>
-                    <td class="w-36">
-                        <div class="pl-4">
-                            <div
-                                class="flex items-center"
-                                :class="
-                                    statusMap?.[item?.status] === 'PASSED'
-                                        ? 'text-yes'
-                                        : statusMap?.[item?.status] ===
-                                          'REJECTED'
-                                        ? 'text-no'
-                                        : 'text-info'
-                                "
-                            >
-                                <div
-                                    class="w-1 h-1 rounded-full mr-2"
-                                    :class="
-                                        statusMap?.[item?.status] === 'PASSED'
-                                            ? 'bg-yes'
-                                            : statusMap?.[item?.status] ===
-                                              'REJECTED'
-                                            ? 'bg-no'
-                                            : 'bg-info'
-                                    "
-                                ></div>
-                                <div class="text-xs">
-                                    {{
-                                        statusMap?.[item?.status] ||
-                                        item?.status
-                                    }}
-                                </div>
-                            </div>
-                            <div
-                                class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
-                            >
-                                {{ format.toDay(item.voting_end_time, 'from') }}
-                            </div>
-                        </div>
-                    </td>
-
-                    <td
-                        v-if="statusMap?.[item?.status] === 'VOTING'"
-                        class="w-40"
-                    >
-                        <div class="">
-                            <label
-                                for="vote"
-                                class="btn btn-xs btn-primary rounded-sm"
-                                @click="
-                                    dialog.open('vote', {
-                                        proposal_id: item?.proposal_id,
-                                    })
-                                "
-                            >
-                                <span v-if="item?.voterStatus">{{
-                                    item?.voterStatus.replace(
-                                        'VOTE_OPTION_',
-                                        ''
-                                    )
-                                }}</span>
-                                <span v-else>Vote</span>
-                            </label>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-
-        <div class="lg:!hidden">
-            <div
-                v-for="(item, index) in proposals?.proposals"
-                :key="index"
-                class="px-4 py-4"
+  <div class="bg-white dark:bg-[#28334e] rounded text-sm">
+    <table class="table-compact w-full table-fixed hidden lg:!table">
+      <tbody>
+        <tr v-for="(item, index) in proposals?.proposals" :key="index">
+          <td class="px-4 w-20">
+            <label
+              for="proposal-detail-modal"
+              class="text-main text-base hover:text-indigo-400 cursor-pointer"
+              @click="proposalInfo = item"
             >
-                <div
-                    class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
-                >
-                    <RouterLink
-                        :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-                        class="flex-1 w-0 truncate mr-4"
-                        >{{ item?.content?.title }}</RouterLink
-                    >
-                    <label
-                        for="proposal-detail-modal"
-                        class="text-main text-base hover:text-indigo-400 cursor-pointer"
-                        @click="proposalInfo = item"
-                    >
-                        #{{ item?.proposal_id }}</label
-                    >
-                </div>
-
-                <div class="grid grid-cols-4 mt-2 mb-2">
-                    <div class="col-span-2">
-                        <div
-                            class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
-                        >
-                            {{ showType(item.content['@type']) }}
-                        </div>
-                    </div>
-                    <div
-                        class="flex items-center"
-                        :class="
-                            statusMap?.[item?.status] === 'PASSED'
-                                ? 'text-yes'
-                                : statusMap?.[item?.status] === 'REJECTED'
-                                ? 'text-no'
-                                : 'text-info'
-                        "
-                    >
-                        <div
-                            class="w-1 h-1 rounded-full mr-2"
-                            :class="
-                                statusMap?.[item?.status] === 'PASSED'
-                                    ? 'bg-yes'
-                                    : statusMap?.[item?.status] === 'REJECTED'
-                                    ? 'bg-no'
-                                    : 'bg-info'
-                            "
-                        ></div>
-                        <div class="text-xs flex items-center">
-                            {{ statusMap?.[item?.status] || item?.status }}
-                        </div>
-                    </div>
-                    <div
-                        class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
-                    >
-                        {{ format.toDay(item.voting_end_time, 'from') }}
-                    </div>
-                </div>
-
-                <div>
-                    <ProposalProcess
-                        :pool="staking.pool"
-                        :tally="item.final_tally_result"
-                    ></ProposalProcess>
-                </div>
-
-                <div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
-                    <div class="" v-show="item?.voterStatus === 'No With Veto'">
-                        <label
-                            for="vote"
-                            class="btn btn-xs btn-primary rounded-sm"
-                            @click="
-                                dialog.open('vote', {
-                                    proposal_id: item?.proposal_id,
-                                })
-                            "
-                            >Vote</label
-                        >
-                        <div
-                            class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
-                            :class="`text-${
-                                voterStatusMap?.[item?.voterStatus]
-                            }`"
-                            v-show="item?.voterStatus !== 'No With Veto'"
-                        >
-                            <span
-                                class="inset-x-0 inset-y-0 opacity-10 absolute"
-                                :class="`bg-${
-                                    voterStatusMap?.[item?.voterStatus]
-                                }`"
-                            ></span>
-                            {{ item?.voterStatus }}
-                        </div>
-                    </div>
-                </div>
+              #{{ item?.proposal_id }}</label
+            >
+          </td>
+          <td class="w-full">
+            <div>
+              <RouterLink
+                :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+                class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
+              >
+                {{ item?.content?.title }}
+              </RouterLink>
+              <div
+                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+              >
+                {{ showType(item.content['@type']) }}
+              </div>
             </div>
+          </td>
+          <td class="w-60">
+            <ProposalProcess
+              :pool="staking.pool"
+              :tally="item.final_tally_result"
+            ></ProposalProcess>
+          </td>
+          <td class="w-36">
+            <div class="pl-4">
+              <div
+                class="flex items-center"
+                :class="
+                  statusMap?.[item?.status] === 'PASSED'
+                    ? 'text-yes'
+                    : statusMap?.[item?.status] === 'REJECTED'
+                    ? 'text-no'
+                    : 'text-info'
+                "
+              >
+                <div
+                  class="w-1 h-1 rounded-full mr-2"
+                  :class="
+                    statusMap?.[item?.status] === 'PASSED'
+                      ? 'bg-yes'
+                      : statusMap?.[item?.status] === 'REJECTED'
+                      ? 'bg-no'
+                      : 'bg-info'
+                  "
+                ></div>
+                <div class="text-xs">
+                  {{ statusMap?.[item?.status] || item?.status }}
+                </div>
+              </div>
+              <div
+                class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
+              >
+                {{ format.toDay(item.voting_end_time, 'from') }}
+              </div>
+            </div>
+          </td>
+
+          <td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
+            <div class="">
+              <label
+                for="vote"
+                class="btn btn-xs btn-primary rounded-sm"
+                @click="
+                  dialog.open('vote', {
+                    proposal_id: item?.proposal_id,
+                  })
+                "
+              >
+                <span v-if="item?.voterStatus !== 'VOTE_OPTION_NO_WITH_VETO'">{{
+                  item?.voterStatus?.replace('VOTE_OPTION_', '')
+                }}</span>
+
+                <span v-else>Vote</span>
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="lg:!hidden">
+      <div
+        v-for="(item, index) in proposals?.proposals"
+        :key="index"
+        class="px-4 py-4"
+      >
+        <div
+          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
+        >
+          <RouterLink
+            :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            class="flex-1 w-0 truncate mr-4"
+            >{{ item?.content?.title }}</RouterLink
+          >
+          <label
+            for="proposal-detail-modal"
+            class="text-main text-base hover:text-indigo-400 cursor-pointer"
+            @click="proposalInfo = item"
+          >
+            #{{ item?.proposal_id }}</label
+          >
         </div>
 
-        <input
-            type="checkbox"
-            id="proposal-detail-modal"
-            class="modal-toggle"
-        />
-        <label for="proposal-detail-modal" class="modal">
-            <label class="modal-box w-11/12 max-w-5xl" for="">
-                <label
-                    for="proposal-detail-modal"
-                    class="btn btn-sm btn-circle absolute right-2 top-2"
-                    >✕</label
-                >
-                <h3 class="font-bold text-lg">Description</h3>
-                <p class="py-4">
-                    <Component
-                        v-if="proposalInfo?.content?.description"
-                        :is="
-                            select(
-                                proposalInfo?.content?.description,
-                                'horizontal'
-                            )
-                        "
-                        :value="proposalInfo?.content?.description"
-                    >
-                    </Component>
-                </p>
-            </label>
-        </label>
+        <div class="grid grid-cols-4 mt-2 mb-2">
+          <div class="col-span-2">
+            <div
+              class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+            >
+              {{ showType(item.content['@type']) }}
+            </div>
+          </div>
+          <div
+            class="flex items-center"
+            :class="
+              statusMap?.[item?.status] === 'PASSED'
+                ? 'text-yes'
+                : statusMap?.[item?.status] === 'REJECTED'
+                ? 'text-no'
+                : 'text-info'
+            "
+          >
+            <div
+              class="w-1 h-1 rounded-full mr-2"
+              :class="
+                statusMap?.[item?.status] === 'PASSED'
+                  ? 'bg-yes'
+                  : statusMap?.[item?.status] === 'REJECTED'
+                  ? 'bg-no'
+                  : 'bg-info'
+              "
+            ></div>
+            <div class="text-xs flex items-center">
+              {{ statusMap?.[item?.status] || item?.status }}
+            </div>
+          </div>
+          <div
+            class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
+          >
+            {{ format.toDay(item.voting_end_time, 'from') }}
+          </div>
+        </div>
+
+        <div>
+          <ProposalProcess
+            :pool="staking.pool"
+            :tally="item.final_tally_result"
+          ></ProposalProcess>
+        </div>
+
+        <div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
+          <div class="">
+            <label
+              for="vote"
+              class="btn btn-xs btn-primary rounded-sm"
+              @click="
+                dialog.open('vote', {
+                  proposal_id: item?.proposal_id,
+                })
+              "
+            >
+              <span v-if="item?.voterStatus !== 'VOTE_OPTION_NO_WITH_VETO'">{{
+                item?.voterStatus?.replace('VOTE_OPTION_', '')
+              }}</span>
+
+              <span v-else>Vote</span></label
+            >
+          </div>
+        </div>
+      </div>
     </div>
+
+    <input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
+    <label for="proposal-detail-modal" class="modal">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
+        <label
+          for="proposal-detail-modal"
+          class="btn btn-sm btn-circle absolute right-2 top-2"
+          >✕</label
+        >
+        <h3 class="font-bold text-lg">Description</h3>
+        <p class="py-4">
+          <Component
+            v-if="proposalInfo?.content?.description"
+            :is="select(proposalInfo?.content?.description, 'horizontal')"
+            :value="proposalInfo?.content?.description"
+          >
+          </Component>
+        </p>
+      </label>
+    </label>
+  </div>
 </template>
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index c8aba0a6..9b43df7c 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -5,6 +5,7 @@ import { ref } from 'vue';
 // Components
 import newFooter from '@/layouts/components/NavFooter.vue';
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
+import NavbarSearch from '@/layouts/components/NavbarSearch.vue';
 import ChainProfile from '@/layouts/components/ChainProfile.vue';
 
 import { useDashboard } from '@/stores/useDashboard';
@@ -282,7 +283,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
         <!-- <NavSearchBar />-->
         <NavBarI18n class="hidden md:!inline-block" />
         <NavbarThemeSwitcher class="!inline-block" />
-
+        <NavbarSearch class="!inline-block" />
         <NavBarWallet />
       </div>
 
diff --git a/src/layouts/components/NavbarSearch.vue b/src/layouts/components/NavbarSearch.vue
new file mode 100644
index 00000000..9cc1b6f6
--- /dev/null
+++ b/src/layouts/components/NavbarSearch.vue
@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useBlockchain } from '@/stores';
+const vueRouters = useRouter();
+const blockStore = useBlockchain();
+let searchModalShow = ref(false);
+let searchQuery = ref('');
+let errorMessage = ref('');
+onMounted(() => {});
+
+function closeSearchModal() {
+  searchModalShow.value = false;
+}
+function openSearchModal() {
+  searchModalShow.value = true;
+}
+
+function preventClick(event: any) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function confirm() {
+  errorMessage.value = '';
+  const key = searchQuery.value;
+  if (!key) {
+    errorMessage.value = 'Please enter a value!';
+    return;
+  }
+  const height = /^\d+$/;
+  const txhash = /^[A-Z\d]{64}$/;
+  const addr = /^[a-z]+1[a-z\d]{38,58}$/;
+
+  const current = blockStore?.current?.chainName || '';
+  const routeParams = vueRouters?.currentRoute?.value;
+
+  if (!Object.values(routeParams?.params).includes(key)) {
+    if (height.test(key)) {
+      vueRouters.push({ path: `/${current}/block/${key}` });
+      setTimeout(() => {
+        closeSearchModal();
+      }, 1000);
+    } else if (txhash.test(key)) {
+      vueRouters.push({ path: `/${current}/tx/${key}` });
+      setTimeout(() => {
+        closeSearchModal();
+      }, 1000);
+      //     this.$router.push({ name: 'transaction', params: { chain: c.chain_name, hash: key } })
+    } else if (addr.test(key)) {
+      vueRouters.push({ path: `/${current}/account/${key}` });
+      setTimeout(() => {
+        closeSearchModal();
+      }, 1000);
+    } else {
+      errorMessage.value = 'The input not recognized';
+    }
+  }
+}
+</script>
+<template>
+  <div>
+    <button
+      class="btn btn-ghost btn-circle btn-sm mx-1"
+      @click="openSearchModal"
+    >
+      <Icon
+        icon="mdi:magnify"
+        class="text-2xl text-gray-500 dark:text-gray-400"
+      />
+    </button>
+
+    <!-- modal -->
+    <div
+      v-if="searchModalShow"
+      class="cursor-pointer modal !pointer-events-auto !opacity-100 !visible"
+      @click="closeSearchModal"
+    >
+      <div
+        class="relative modal-box cursor-default"
+        @click="(event) => preventClick(event)"
+      >
+        <!-- header -->
+        <div class="flex items-center justify-between">
+          <div
+            class="text-lg font-bold flex flex-col md:!flex-row justify-between items-baseline"
+          >
+            <span class="mr-2">Search</span>
+            <span class="capitalize text-sm md:!text-base"
+              >Height/Transaction/Account Address</span
+            >
+          </div>
+          <label
+            htmlFor="modal-pool-modal"
+            class="cursor-pointer"
+            @click="closeSearchModal"
+          >
+            <Icon
+              icon="zondicons:close-outline"
+              class="text-2xl text-gray-500 dark:text-gray-400"
+            />
+          </label>
+        </div>
+        <!-- body -->
+        <div class="mt-4">
+          <div class="">
+            <input
+              class="input flex-1 w-full !input-bordered"
+              v-model="searchQuery"
+              placeholder="Height/Transaction/Account Address"
+            />
+            <div
+              class="mt-2 text-right text-sm text-error"
+              v-show="errorMessage"
+            >
+              {{ errorMessage }}
+            </div>
+          </div>
+        </div>
+        <!-- foot -->
+        <div class="mt-6">
+          <button class="w-full btn btn-primary" @click="confirm">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index 053b0e1f..cb62204e 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -8,6 +8,7 @@ import {
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import DonutChart from '@/components/charts/DonutChart.vue';
 import { computed, ref } from '@vue/reactivity';
+import { onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import 'vue-json-pretty/lib/styles.css';
 import type {
@@ -33,7 +34,9 @@ const balances = ref([] as Coin[]);
 const unbonding = ref([] as UnbondingResponses[]);
 const unbondingTotal = ref(0);
 const chart = {};
-
+onMounted(() => {
+  loadAccount(props.address);
+});
 const totalAmountByCategory = computed(() => {
   let sumDel = 0;
   delegations.value?.forEach((x) => {
@@ -88,7 +91,6 @@ function loadAccount(address: string) {
   });
 }
 
-
 function updateEvent() {
   loadAccount(props.address);
 }
@@ -141,9 +143,13 @@ function updateEvent() {
               for="transfer"
               class="btn btn-primary btn-sm"
               @click="
-                dialog.open('transfer', {
-                  chain_name: blockchain.current?.prettyName,
-                }, updateEvent)
+                dialog.open(
+                  'transfer',
+                  {
+                    chain_name: blockchain.current?.prettyName,
+                  },
+                  updateEvent
+                )
               "
               >transfer</label
             >
@@ -355,9 +361,13 @@ function updateEvent() {
                     for="delegate"
                     class="btn btn-primary btn-xs mr-2"
                     @click="
-                      dialog.open('delegate', {
-                        validator_address: v.delegation.validator_address,
-                      }, updateEvent)
+                      dialog.open(
+                        'delegate',
+                        {
+                          validator_address: v.delegation.validator_address,
+                        },
+                        updateEvent
+                      )
                     "
                     >delegate</label
                   >
@@ -365,9 +375,13 @@ function updateEvent() {
                     for="redelegate"
                     class="btn btn-primary btn-xs mr-2"
                     @click="
-                      dialog.open('redelegate', {
-                        validator_address: v.delegation.validator_address,
-                      }, updateEvent)
+                      dialog.open(
+                        'redelegate',
+                        {
+                          validator_address: v.delegation.validator_address,
+                        },
+                        updateEvent
+                      )
                     "
                     >Redelegate</label
                   >
@@ -375,9 +389,13 @@ function updateEvent() {
                     for="unbond"
                     class="btn btn-primary btn-xs"
                     @click="
-                      dialog.open('unbond', {
-                        validator_address: v.delegation.validator_address,
-                      }, updateEvent)
+                      dialog.open(
+                        'unbond',
+                        {
+                          validator_address: v.delegation.validator_address,
+                        },
+                        updateEvent
+                      )
                     "
                     >Unbond</label
                   >
diff --git a/src/modules/[chain]/consensus/index.vue b/src/modules/[chain]/consensus/index.vue
new file mode 100644
index 00000000..d03cd097
--- /dev/null
+++ b/src/modules/[chain]/consensus/index.vue
@@ -0,0 +1,327 @@
+<script lang="ts" setup>
+import fetch from 'cross-fetch';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
+import {
+  useBlockchain,
+  useFormatter,
+  useDashboard,
+  useStakingStore,
+} from '@/stores';
+const format = useFormatter();
+const chainStore = useBlockchain();
+const dashboard = useDashboard();
+const stakingStore = useStakingStore();
+import { consensusPubkeyToHexAddress } from '@/libs';
+const rpcList = ref(
+  chainStore.current?.endpoints?.rpc || [{ address: '', provider: '' }]
+);
+let rpc = ref('');
+const validators = ref(stakingStore.validators);
+
+let httpstatus = ref(200);
+let httpStatusText = ref('');
+let roundState = ref({} as any);
+let rate = ref('');
+let height = ref('');
+let round = ref('');
+let step = ref('');
+let timer = null;
+let updatetime = ref(new Date());
+let positions = ref([]);
+onMounted(() => {
+  stakingStore.init();
+  rpc.value = rpcList.value[0].address + '/consensus_state';
+  fetchPosition();
+  update();
+  timer = setInterval(() => {
+    update();
+  }, 6000);
+});
+onUnmounted(() => {
+  timer = null;
+});
+
+const newTime = computed(() => {
+  return format.toDay(updatetime.value || '', 'time');
+});
+
+const vals = computed(() => {
+  return validators.value.map((x) => {
+    const x2 = x;
+    x2.hex = consensusPubkeyToHexAddress(x.consensus_pubkey);
+    return x2;
+  });
+});
+
+function showName(i, text) {
+  if (text === 'nil-Vote') {
+    if (positions.value?.[i]?.address) {
+      const val = vals.value.find(
+        (x) => x.hex === positions.value?.[i]?.address
+      );
+      return val?.description?.moniker || i;
+    }
+    return i;
+  }
+  const txt = text.substring(text.indexOf(':') + 1, text.indexOf(' '));
+  const sig = text.split(' ');
+  const val = validators.value.find((x) => x?.hex?.startsWith(txt));
+  return `${val?.description?.moniker || txt} - ${sig[2]}`;
+}
+function color(i, txt) {
+  if (i === roundState.value?.proposer?.index) {
+    return txt === 'nil-Vote' ? 'warning' : 'primary';
+  }
+  return txt === 'nil-Vote' ? 'neutral' : 'success';
+}
+function onChange() {
+  httpstatus.value = 200;
+  httpStatusText.value = '';
+  roundState.value = {};
+  timer = null;
+  fetchPosition();
+  update();
+  timer = setInterval(() => {
+    update();
+  }, 6000);
+}
+
+async function fetchPosition() {
+  let dumpurl = rpc.value.replace('consensus_state', 'dump_consensus_state');
+  try {
+    const response = await fetch(dumpurl);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    httpstatus.value = response.status;
+    httpStatusText.value = response.statusText;
+
+    const data = await response.json();
+    positions.value = data.result.round_state.validators.validators;
+  } catch (error) {
+    httpstatus.value = error?.status || 500;
+    httpStatusText.value = error?.message || 'Error';
+  }
+}
+
+async function update() {
+  rate.value = '0%';
+  updatetime.value = new Date();
+  if (httpstatus.value === 200) {
+    fetch(rpc.value)
+      .then((data) => {
+        httpstatus.value = data.status;
+        httpStatusText.value = data.statusText;
+        return data.json();
+      })
+      .then((res) => {
+        roundState.value = res.result.round_state;
+        const raw = roundState?.value?.['height/round/step']?.split('/');
+        // eslint-disable-next-line prefer-destructuring
+        height.value = raw[0];
+        // eslint-disable-next-line prefer-destructuring
+        round.value = raw[1];
+        // eslint-disable-next-line prefer-destructuring
+        step.value = raw[2];
+
+        // find the highest onboard rate
+        roundState.value?.height_vote_set?.forEach((element) => {
+          const rates = Number(
+            element.prevotes_bit_array.substring(
+              element.prevotes_bit_array.length - 4
+            )
+          );
+          if (rates > 0) {
+            rate.value = `${(rates * 100).toFixed()}%`;
+          }
+        });
+      })
+      .catch((err) => {
+        httpstatus.value = 500;
+        httpStatusText.value = err;
+      });
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!--  -->
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+      <div class="form-control">
+        <label class="input-group input-group-md w-full flex">
+          <!-- <input
+            type="text"
+            placeholder="Button on both side"
+            class="input input-bordered input-md w-full"
+            v-model="rpc"
+          /> -->
+          <select v-model="rpc" class="select select-bordered w-full flex-1">
+            <option v-for="(item, index) in rpcList" :key="index">
+              {{ item?.address }}/consensus_state
+            </option>
+          </select>
+          <button class="btn btn-primary" @click="onChange">Monitor</button>
+        </label>
+      </div>
+      <div v-if="httpstatus !== 200" class="text-error mt-1">
+        {{ httpstatus }}: {{ httpStatusText }}
+      </div>
+    </div>
+    <!-- cards -->
+    <div class="mt-4" v-if="roundState['height/round/step']">
+      <div class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 pb-4">
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ rate }}</h4>
+            <span class="text-md">Onboard Rate</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-rose-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-error font-semibold">O</span>
+            </div>
+          </div>
+        </div>
+        <!-- Height -->
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ height }}</h4>
+            <span class="text-md">Height</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-green-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-success font-semibold">H</span>
+            </div>
+          </div>
+        </div>
+        <!-- Round -->
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ round }}</h4>
+            <span class="text-md">Round</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-violet-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-primary font-semibold">R</span>
+            </div>
+          </div>
+        </div>
+        <!-- Step -->
+        <div
+          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+        >
+          <div class="text-sm mb-1 flex flex-col truncate">
+            <h4 class="text-lg font-semibold text-main">{{ step }}</h4>
+            <span class="text-md">Step</span>
+          </div>
+          <div class="avatar placeholder">
+            <div
+              class="bg-blue-100 text-neutral-content rounded-full w-12 h-12"
+            >
+              <span class="text-2xl text-info font-semibold">S</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- update -->
+    <div
+      class="bg-base-100 p-4 rounded shadow"
+      v-if="roundState['height/round/step']"
+    >
+      <div class="flex flex-1 flex-col truncate">
+        <h2 class="text-sm card-title text-error mb-6">
+          Updated at {{ newTime || '' }}
+        </h2>
+        <div v-for="item in roundState.height_vote_set" :key="item.round">
+          <div class="text-xs mb-1">Round: {{ item.round }}</div>
+          <div class="text-xs break-words">{{ item.prevotes_bit_array }}</div>
+
+          <div class="flex flex-wrap py-6">
+            <div
+              class="badge"
+              v-for="(pre, i) in item.prevotes"
+              :key="i"
+              size="sm"
+              style="margin: 2px"
+              :class="[
+                `btn-${color(i, pre)} border-${color(i, pre)} !bg-${color(
+                  i,
+                  pre
+                )}`,
+              ]"
+            >
+              <span>{{ showName(i, pre) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <!--  -->
+      <div class="flex flex-col md:!flex-row">
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-primary px-4 w-[34px]"></button>
+          <span class="mx-1">Proposer Signed</span>
+        </div>
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-warning px-4 w-[34px]"></button>
+          <span class="mx-1">Proposer Not Signed</span>
+        </div>
+
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-success px-4 w-[34px]"></button>
+          <span class="mx-1">Signed</span>
+        </div>
+
+        <div class="flex mr-1 mb-1">
+          <button class="btn btn-xs btn-neutral px-4 w-[34px]"></button>
+          <span class="mx-1">Not Signed</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- alert-info -->
+    <div
+      class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info"
+    >
+      <div
+        class="drop-shadow-md px-4 pt-2 pb-2"
+        style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px"
+      >
+        <h2 class="text-base font-semibold">Tips</h2>
+      </div>
+      <div class="px-4 py-4">
+        <ul style="list-style-type: disc" class="pl-8">
+          <li>
+            This tool is useful for validators to monitor who is onboard during
+            an upgrade
+          </li>
+          <li>
+            If you want to change the default rpc endpoint. make sure that
+            "https" and "CORS" are enabled on your server.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<!-- <route>
+  {
+    meta: {
+      i18n: 'consensus',
+    }
+  }
+</route> -->
diff --git a/src/plugins/i18n/locales/cn.json b/src/plugins/i18n/locales/cn.json
index c2f010df..e73441e3 100644
--- a/src/plugins/i18n/locales/cn.json
+++ b/src/plugins/i18n/locales/cn.json
@@ -5,7 +5,8 @@
     "staking": "质押生息",
     "governance": "社区治理",
     "parameters": "参数",
-    "uptime": "状态"
+    "uptime": "状态",
+    "consensus": "Consensus"
   },
   "index": {
     "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index fa57d67c..33da7d76 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -9,7 +9,8 @@
     "state-sync": "State Sync",
     "cosmwasm": "Cosmwasm",
     "widget": "Widgets",
-    "ibc": "IBC"
+    "ibc": "IBC",
+    "consensus": "Consensus"
   },
   "index": {
     "slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",
diff --git a/src/stores/useBlockchain.ts b/src/stores/useBlockchain.ts
index d3063557..9841a9ba 100644
--- a/src/stores/useBlockchain.ts
+++ b/src/stores/useBlockchain.ts
@@ -35,6 +35,7 @@ export const useBlockchain = defineStore('blockchain', {
   },
   getters: {
     current(): ChainConfig | undefined {
+      console.log(this.dashboard.chains[this.chainName], 'jljfkj')
       return this.dashboard.chains[this.chainName];
     },
     logo(): string {
diff --git a/src/stores/useGovStore.ts b/src/stores/useGovStore.ts
index e415153e..48b07fce 100644
--- a/src/stores/useGovStore.ts
+++ b/src/stores/useGovStore.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { useBlockchain } from './useBlockchain';
 import type { PageRequest, PaginatedProposals } from '@/types';
 import { LoadingStatus } from './useDashboard';
-import { useWalletStore } from './useWalletStore'
+import { useWalletStore } from './useWalletStore';
 import { reactive } from 'vue';
 
 export const useGovStore = defineStore('govStore', {
@@ -23,41 +23,49 @@ export const useGovStore = defineStore('govStore', {
     },
     walletstore() {
       return useWalletStore();
-    }
+    },
   },
   actions: {
     initial() {
-      this.$reset()
+      this.$reset();
       this.fetchParams();
-      this.fetchProposals("2");
+      this.fetchProposals('2');
     },
     async fetchProposals(status: string, pagination?: PageRequest) {
       //if (!this.loading[status]) {
-        this.loading[status] = LoadingStatus.Loading;
-        const proposals = reactive(
-          await this.blockchain.rpc?.getGovProposals(status, pagination)
-        );
-        if (status === '2') {
-          proposals?.proposals?.forEach((item) => {
-            this.fetchTally(item.proposal_id).then((res) => {
-              item.final_tally_result = res?.tally;
-            });
-            if (this.walletstore.currentAddress) {
-              try {
-                this.fetchProposalVotesVoter(item.proposal_id, this.walletstore.currentAddress).then((res) => {
-                  item.voterStatus = res?.vote?.option || 'No With Veto'
-                });
-              } catch (error) {
-                item.voterStatus = 'No With Veto'
-              }
-            } else {
-              item.voterStatus = 'No With Veto'
-            }
+      this.loading[status] = LoadingStatus.Loading;
+      const proposals = reactive(
+        await this.blockchain.rpc?.getGovProposals(status, pagination)
+      );
+      if (status === '2') {
+        proposals?.proposals?.forEach((item) => {
+          this.fetchTally(item.proposal_id).then((res) => {
+            item.final_tally_result = res?.tally;
           });
-        }
+          if (this.walletstore.currentAddress) {
+            try {
+              this.fetchProposalVotesVoter(
+                item.proposal_id,
+                this.walletstore.currentAddress
+              )
+                .then((res) => {
+                  item.voterStatus = res?.vote?.option || 'VOTE_OPTION_NO_WITH_VETO'
+                  // 'No With Veto';
+                })
+                .catch((reject) => {
+                  item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
+                });
+            } catch (error) {
+              item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
+            }
+          } else {
+            item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
+          }
+        });
+      }
 
-        this.loading[status] = LoadingStatus.Loaded;
-        this.proposals[status] = proposals;
+      this.loading[status] = LoadingStatus.Loaded;
+      this.proposals[status] = proposals;
       //}
       return this.proposals[status];
     },
diff --git a/src/types/gov.ts b/src/types/gov.ts
index a0261e5f..c09a380f 100644
--- a/src/types/gov.ts
+++ b/src/types/gov.ts
@@ -1,79 +1,83 @@
-
-import type { Coin, PaginatedResponse } from "./common"
+import type { Coin, PaginatedResponse } from './common';
 
 export interface GovParams {
-    "voting_params": {
-        "voting_period": string,
-        "proposal_voting_periods": any[],
-        "expedited_voting_period": string
-    },
-    "deposit_params": {
-        "min_deposit": Coin[],
-        "max_deposit_period": string,
-        "min_expedited_deposit": Coin[],
-        "min_initial_deposit_ratio": string
-    },
-    "tally_params": {
-        "quorum": string,
-        "threshold": string,
-        "veto_threshold": string,
-        "expedited_threshold": string
-    }
+  voting_params: {
+    voting_period: string;
+    proposal_voting_periods: any[];
+    expedited_voting_period: string;
+  };
+  deposit_params: {
+    min_deposit: Coin[];
+    max_deposit_period: string;
+    min_expedited_deposit: Coin[];
+    min_initial_deposit_ratio: string;
+  };
+  tally_params: {
+    quorum: string;
+    threshold: string;
+    veto_threshold: string;
+    expedited_threshold: string;
+  };
 }
 
 export interface GovProposal {
-    "proposal_id": string,
-    "content": {
-        "@type": string,
-        "title": string,
-        "description": string,
-        "plan"?: { 
-            'height'?: string | number,
-            'time'?: string | number,
-        }
-    },
-    "status": string,
-    "final_tally_result": {
-        "yes": string,
-        "abstain": string,
-        "no": string,
-        "no_with_veto": string,
-    },
-    "submit_time": string,
-    "deposit_end_time": string,
-    "total_deposit": Coin[],
-    "voting_start_time": string,
-    "voting_end_time": string,
-    "is_expedited": boolean,
-    "voterStatus"?: string,
+  proposal_id: string;
+  content: {
+    '@type': string;
+    title: string;
+    description: string;
+    plan?: {
+      height?: string | number;
+      time?: string | number;
+    };
+  };
+  status: string;
+  final_tally_result: {
+    yes: string;
+    abstain: string;
+    no: string;
+    no_with_veto: string;
+  };
+  submit_time: string;
+  deposit_end_time: string;
+  total_deposit: Coin[];
+  voting_start_time: string;
+  voting_end_time: string;
+  is_expedited: boolean;
+  voterStatus?: string
+//   VoteOption[];
 }
 
+export interface VoteOption {
+  option: string;
+  weight: string;
+}
 export interface Tally {
-    yes: string,
-    abstain: string,
-    no: string,
-    no_with_veto: string
+  yes: string;
+  abstain: string;
+  no: string;
+  no_with_veto: string;
 }
 
 export interface GovVote {
-    proposal_id: string,
-    voter: string,
-    option: string,
-    options: { "option": string, "weight": string }[]
+  proposal_id: string;
+  voter: string;
+  option: string;
+  options: { option: string; weight: string }[];
 }
 
 export interface PaginatedProposals extends PaginatedResponse {
-    proposals: GovProposal[]
+  proposals: GovProposal[];
 }
 
 export interface PaginatedProposalDeposit extends PaginatedResponse {
-    deposits: {
-        amount: Coin[],
-        proposal_id: string,
-        depositor: string
-    }
+  deposits: {
+    amount: Coin[];
+    proposal_id: string;
+    depositor: string;
+  };
 }
 
 export interface PaginatedProposalVotes extends PaginatedResponse {
-    votes: GovVote[]
-}
\ No newline at end of file
+  votes: GovVote[];
+}