diff --git a/src/lang/locales/en.json b/src/lang/locales/en.json
index 7a97d9fe..473ac179 100644
--- a/src/lang/locales/en.json
+++ b/src/lang/locales/en.json
@@ -47,6 +47,7 @@
   "voting_time": "Voting Time",
 
   "btn_vote": "Vote",
+  "btn_deposit": "Deposit",
   "btn_detail": "Detail",
   "btn_back_list": "Back To List"
   
diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index 2a7fea56..81d0d202 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -156,8 +156,17 @@
               </b-button>
             </router-link>
             <b-button
+              v-if="p.status===1"
+              v-b-modal.deposit-window
+              variant="primary"
+              class="btn float-right mg-2"
+              @click="selectProposal(p.id, p.title)"
+            >
+              {{ $t('btn_deposit') }}
+            </b-button>
+            <b-button
+              v-if="p.status===2"
               v-b-modal.vote-window
-              :disabled="p.status!=2"
               variant="primary"
               class="btn float-right mg-2"
               @click="selectProposal(p.id, p.title)"
@@ -172,6 +181,10 @@
       :proposal-id="selectedProposalId"
       :title="selectedTitle"
     />
+    <operation-gov-deposit-component
+      :proposal-id="selectedProposalId"
+      :title="selectedTitle"
+    />
   </div>
 </template>
 
@@ -182,6 +195,7 @@ import {
 import Ripple from 'vue-ripple-directive'
 import { Proposal } from '@/libs/data'
 import OperationVoteComponent from './OperationVoteComponent.vue'
+import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
 
 export default {
   components: {
@@ -197,6 +211,7 @@ export default {
     BRow,
     BCol,
     OperationVoteComponent,
+    OperationGovDepositComponent,
   },
   directives: {
     'b-modal': VBModal,
diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 77f57d74..94c921cd 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -110,10 +110,6 @@
         </b-button>
       </b-card-footer>
     </b-card>
-    <operation-vote-component
-      :proposal-id="Number(proposal.id)"
-      :title="proposal.title"
-    />
     <b-card no-body>
       <b-card-header>
         <b-card-title>
@@ -228,14 +224,31 @@
           </b-button>
         </router-link>
         <b-button
-          :disabled="proposal.status!=2"
+          v-b-modal.deposit-window
+          :disabled="proposal.status!=1"
           variant="primary"
           class="btn float-right mg-2"
+        >
+          {{ $t('btn_deposit') }}
+        </b-button>
+        <b-button
+          v-b-modal.vote-window
+          :disabled="proposal.status!=2"
+          variant="primary"
+          class="btn float-right mg-2 mr-1"
         >
           {{ $t('btn_vote') }}
         </b-button>
       </b-card-footer>
     </b-card>
+    <operation-vote-component
+      :proposal-id="Number(proposal.id)"
+      :title="proposal.title"
+    />
+    <operation-gov-deposit-component
+      :proposal-id="Number(proposal.id)"
+      :title="proposal.title"
+    />
   </section>
 </template>
 
@@ -250,6 +263,7 @@ import { getCachedValidators, getStakingValidatorByAccount, tokenFormatter } fro
 import { Proposal, Proposer } from '@/libs/data'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
 import OperationVoteComponent from './OperationVoteComponent.vue'
+import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
 // import { formatToken } from '@/libs/data/data'
 
 export default {
@@ -270,6 +284,7 @@ export default {
     BBadge,
     ObjectFieldComponent,
     OperationVoteComponent,
+    OperationGovDepositComponent,
   },
   data() {
     return {
diff --git a/src/views/OperationDelegateComponent.vue b/src/views/OperationDelegateComponent.vue
index 10e1fcf5..d4dd2248 100644
--- a/src/views/OperationDelegateComponent.vue
+++ b/src/views/OperationDelegateComponent.vue
@@ -13,242 +13,264 @@
       @ok="handleOk"
       @show="loadBalance"
     >
-      <validation-observer ref="simpleRules">
-        <b-form v-if="selectedAddress">
-          <b-row>
-            <b-col>
-              <validation-provider
-                #default="{ errors }"
-                rules="required"
-                name="Validator"
-              >
-                <b-form-group
-                  label="Validator"
-                  label-for="validator"
-                >
-                  <v-select
-                    v-model="selectedValidator"
-                    :options="valOptions"
-                    :reduce="val => val.value"
-                    placeholder="Select a validator"
-                    :readonly="validatorAddress"
-                  />
-                </b-form-group>
-                <small class="text-danger">{{ errors[0] }}</small>
-              </validation-provider>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Delegator"
-                label-for="Account"
-              >
+      <b-overlay
+        :show="!selectedAddress"
+        rounded="sm"
+      >
+        <template #overlay>
+          <div class="text-center">
+            <b-icon
+              icon="stopwatch"
+              font-scale="3"
+              animation="cylon"
+            />
+            <p id="cancel-label">
+              No available account found.
+            </p>
+            <b-button
+              v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+              variant="outline-primary"
+              to="/wallet/import"
+            >
+              Connect Wallet
+            </b-button>
+          </div>
+        </template>
+        <validation-observer ref="simpleRules">
+          <b-form>
+            <b-row>
+              <b-col>
                 <validation-provider
                   #default="{ errors }"
                   rules="required"
-                  name="Delegator"
+                  name="Validator"
                 >
-                  <b-form-select
-                    v-model="selectedAddress"
-                    :options="account"
-                    text-field="label"
-                    @change="onChange"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Available Token"
-                label-for="Token"
-              >
-                <validation-provider
-                  #default="{ errors }"
-                  rules="required"
-                  name="Token"
-                >
-                  <b-form-select
-                    v-model="token"
-                    text-field="label"
+                  <b-form-group
+                    label="Validator"
+                    label-for="validator"
                   >
-                    <b-form-select-option
-                      v-for="x in balance"
-                      :key="x.denom"
-                      :value="x.denom"
-                    >
-                      {{ format(x) }}
-                    </b-form-select-option>
-                  </b-form-select>
+                    <v-select
+                      v-model="selectedValidator"
+                      :options="valOptions"
+                      :reduce="val => val.value"
+                      placeholder="Select a validator"
+                      :readonly="validatorAddress"
+                    />
+                  </b-form-group>
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Amount"
-                label-for="Amount"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required|regex:^([0-9\.]+)$"
-                  name="amount"
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Delegator"
+                  label-for="Delegator"
                 >
-                  <b-input-group>
+                  <validation-provider
+                    #default="{ errors }"
+                    rules="required"
+                    name="Delegator"
+                  >
+                    <b-form-select
+                      v-if="account.length > 0"
+                      v-model="selectedAddress"
+                      :options="account"
+                      text-field="label"
+                      @change="onChange"
+                    />
                     <b-form-input
-                      id="Amount"
-                      v-model="amount"
-                      :state="errors.length > 0 ? false:null"
-                      placeholder="Input a number"
+                      v-else
+                      v-model="selectedAddress"
+                      readonly
+                    />
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Available Token"
+                  label-for="Token"
+                >
+                  <validation-provider
+                    #default="{ errors }"
+                    rules="required"
+                    name="Token"
+                  >
+                    <b-form-select
+                      v-model="token"
+                      text-field="label"
+                    >
+                      <b-form-select-option
+                        v-for="x in balance"
+                        :key="x.denom"
+                        :value="x.denom"
+                      >
+                        {{ format(x) }}
+                      </b-form-select-option>
+                    </b-form-select>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Amount"
+                  label-for="Amount"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    rules="required|regex:^([0-9\.]+)$"
+                    name="amount"
+                  >
+                    <b-input-group>
+                      <b-form-input
+                        id="Amount"
+                        v-model="amount"
+                        :state="errors.length > 0 ? false:null"
+                        placeholder="Input a number"
+                        type="number"
+                      />
+                      <b-input-group-append is-text>
+                        {{ printDenom() }}
+                      </b-input-group-append>
+                    </b-input-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Fee"
+                  label-for="Fee"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    rules="required|integer"
+                    name="fee"
+                  >
+                    <b-input-group>
+                      <b-form-input v-model="fee" />
+                      <b-input-group-append>
+                        <b-form-select
+                          v-model="feeDenom"
+                          :options="feeDenoms"
+                          value-field="denom"
+                          text-field="denom"
+                        />
+                      </b-input-group-append>
+                    </b-input-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+              <b-col cols="12">
+                <b-form-group>
+                  <b-form-checkbox
+                    v-model="advance"
+                    name="advance"
+                    value="true"
+                  >
+                    <small>Advance</small>
+                  </b-form-checkbox>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row v-if="advance">
+              <b-col cols="12">
+                <b-form-group
+                  label="Gas"
+                  label-for="gas"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    name="gas"
+                  >
+                    <b-form-input
+                      id="gas"
+                      v-model="gas"
                       type="number"
                     />
-                    <b-input-group-append is-text>
-                      {{ printDenom() }}
-                    </b-input-group-append>
-                  </b-input-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Fee"
-                label-for="Fee"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required|integer"
-                  name="fee"
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+              <b-col cols="12">
+                <b-form-group
+                  label="Memo"
+                  label-for="Memo"
                 >
-                  <b-input-group>
-                    <b-form-input v-model="fee" />
-                    <b-input-group-append>
-                      <b-form-select
-                        v-model="feeDenom"
-                        :options="feeDenoms"
-                        value-field="denom"
-                        text-field="denom"
-                      />
-                    </b-input-group-append>
-                  </b-input-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-            <b-col cols="12">
-              <b-form-group>
-                <b-form-checkbox
-                  v-model="advance"
-                  name="advance"
-                  value="true"
-                >
-                  <small>Advance</small>
-                </b-form-checkbox>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row v-if="advance">
-            <b-col cols="12">
-              <b-form-group
-                label="Gas"
-                label-for="gas"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  name="gas"
-                >
-                  <b-form-input
-                    id="gas"
-                    v-model="gas"
-                    type="number"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-            <b-col cols="12">
-              <b-form-group
-                label="Memo"
-                label-for="Memo"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  name="memo"
-                >
-                  <b-form-input
-                    id="Memo"
-                    v-model="memo"
-                    max="2"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
+                  <validation-provider
+                    v-slot="{ errors }"
+                    name="memo"
                   >
-                    <b-form-radio
+                    <b-form-input
+                      id="Memo"
+                      v-model="memo"
+                      max="2"
+                    />
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Wallet"
+                  label-for="wallet"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    rules="required"
+                    name="wallet"
+                  >
+                    <b-form-radio-group
                       v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
+                      stacked
+                      class="demo-inline-spacing"
                     >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-        </b-form>
-        <b-button
-          v-else
-          to="/wallet/import"
-          variant="primary"
-        >
-          Connect Wallet
-        </b-button>
-      </validation-observer>
-      {{ error }}
-    </b-modal>
+                      <b-form-radio
+                        v-model="wallet"
+                        name="wallet"
+                        value="keplr"
+                        class="d-none d-md-block"
+                      >
+                        Keplr
+                      </b-form-radio>
+                      <b-form-radio
+                        v-model="wallet"
+                        name="wallet"
+                        value="ledgerUSB"
+                      >
+                        <small>Ledger(USB)</small>
+                      </b-form-radio>
+                      <b-form-radio
+                        v-model="wallet"
+                        name="wallet"
+                        value="ledgerBle"
+                        class="mr-0"
+                      >
+                        <small>Ledger(Bluetooth)</small>
+                      </b-form-radio>
+                    </b-form-radio-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+          </b-form>
+        </validation-observer>
+        {{ error }}
+      </b-overlay></b-modal>
   </div>
 </template>
 
@@ -256,7 +278,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BButton, BInputGroupAppend, BFormCheckbox,
+  BForm, BFormRadioGroup, BFormRadio, BButton, BInputGroupAppend, BFormCheckbox, BOverlay,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -285,6 +307,7 @@ export default {
     vSelect,
     BButton,
     BInputGroupAppend,
+    BOverlay,
 
     ValidationProvider,
     ValidationObserver,
@@ -396,7 +419,7 @@ export default {
     },
     computeAccount() {
       const accounts = getLocalAccounts()
-      const values = Object.values(accounts)
+      const values = accounts ? Object.values(accounts) : []
       let array = []
       for (let i = 0; i < values.length; i += 1) {
         const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
diff --git a/src/views/OperationGovDepositComponent.vue b/src/views/OperationGovDepositComponent.vue
new file mode 100644
index 00000000..212400b5
--- /dev/null
+++ b/src/views/OperationGovDepositComponent.vue
@@ -0,0 +1,488 @@
+<template>
+  <div>
+    <b-modal
+      id="deposit-window"
+      centered
+      size="md"
+      title="Deposit"
+      ok-title="Send"
+      hide-header-close
+      scrollable
+      :ok-disabled="!voter"
+      @hidden="resetModal"
+      @ok="handleOk"
+      @show="loadBalance"
+    ><b-overlay
+      :show="!voter"
+      rounded="sm"
+    >
+      <template #overlay>
+        <div class="text-center">
+          <p id="cancel-label">
+            No available account found.
+          </p>
+          <b-button
+            variant="outline-primary"
+            to="/wallet/import"
+          >
+            Connect Wallet
+          </b-button>
+        </div>
+      </template>
+      <validation-observer ref="simpleRules">
+        <b-form>
+          <b-row>
+            <b-col>
+              <h4>{{ proposalId }}. {{ title }}</h4>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Depositor"
+                label-for="Voter"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  rules="required"
+                  name="Voter"
+                >
+                  <b-form-select
+                    v-model="voter"
+                    :options="accounts"
+                    text-field="label"
+                    placeholder="Select an address"
+                    @change="onChange"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Available Token"
+                label-for="Token"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  rules="required"
+                  name="Token"
+                >
+                  <b-form-select
+                    v-model="token"
+                  >
+                    <b-form-select-option
+                      v-for="item in balance"
+                      :key="item.denom"
+                      :value="item.denom"
+                    >
+                      {{ format(item) }}
+                    </b-form-select-option>
+                  </b-form-select>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Amount"
+                label-for="Amount"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required|regex:^([0-9\.]+)$"
+                  name="amount"
+                >
+                  <b-input-group class="mb-25">
+                    <b-form-input
+                      id="Amount"
+                      v-model="amount"
+                      :state="errors.length > 0 ? false:null"
+                      placeholder="Input a number"
+                      type="number"
+                    />
+                    <b-input-group-append is-text>
+                      {{ printDenom() }}
+                    </b-input-group-append>
+                  </b-input-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Fee"
+                label-for="Fee"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required|integer"
+                  name="fee"
+                >
+                  <b-input-group>
+                    <b-form-input v-model="fee" />
+                    <b-input-group-append>
+                      <b-form-select
+                        v-model="feeDenom"
+                        :options="feeDenoms"
+                        value-field="denom"
+                        text-field="denom"
+                      />
+                    </b-input-group-append>
+                  </b-input-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+            <b-col cols="12">
+              <b-form-group>
+                <b-form-checkbox
+                  v-model="advance"
+                  name="advance"
+                  value="true"
+                >
+                  <small>Advance</small>
+                </b-form-checkbox>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row v-if="advance">
+            <b-col cols="12">
+              <b-form-group
+                label="Gas"
+                label-for="gas"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  name="gas"
+                >
+                  <b-form-input
+                    id="gas"
+                    v-model="gas"
+                    type="number"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+            <b-col cols="12">
+              <b-form-group
+                label="Memo"
+                label-for="Memo"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  name="memo"
+                >
+                  <b-form-input
+                    id="Memo"
+                    v-model="memo"
+                    max="2"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Wallet"
+                label-for="wallet"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required"
+                  name="wallet"
+                >
+                  <b-form-radio-group
+                    v-model="wallet"
+                    stacked
+                    class="demo-inline-spacing"
+                  >
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="keplr"
+                      class="d-none d-md-block"
+                    >
+                      Keplr
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="ledgerUSB"
+                    >
+                      <small>Ledger(USB)</small>
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="ledgerBle"
+                      class="mr-0"
+                    >
+                      <small>Ledger(Bluetooth)</small>
+                    </b-form-radio>
+                  </b-form-radio-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
+      {{ error }}
+    </b-overlay></b-modal>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import {
+  BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend, BOverlay, BButton, BFormSelectOption,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  abbrAddress,
+  formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, setLocalTxHistory, sign, timeIn,
+} from '@/libs/data'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+
+export default {
+  name: 'DepositDialogue',
+  components: {
+    BModal,
+    BRow,
+    BCol,
+    BForm,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    BFormSelect,
+    BFormRadioGroup,
+    BFormRadio,
+    BFormCheckbox,
+    BInputGroupAppend,
+    BOverlay,
+    BButton,
+    BFormSelectOption,
+
+    ValidationProvider,
+    ValidationObserver,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
+  },
+  props: {
+    proposalId: {
+      type: Number,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      accounts: [],
+      voter: null,
+      option: null,
+      chainId: '',
+      selectedChain: '',
+      balance: [],
+      memo: '',
+      fee: '',
+      feeDenom: '',
+      wallet: 'ledgerUSB',
+      error: null,
+      sequence: 1,
+      accountNumber: 0,
+      gas: '200000',
+      advance: false,
+      token: null,
+      amount: '',
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    feeDenoms() {
+      return this.balance.filter(item => !item.denom.startsWith('ibc'))
+    },
+  },
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
+    computeAccount() {
+      let array = []
+      const accounts = getLocalAccounts()
+      if (accounts) {
+        const values = Object.values(accounts)
+        for (let i = 0; i < values.length; i += 1) {
+          const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
+          if (addrs && addrs.length > 0) {
+            array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) })))
+          }
+        }
+      }
+      return array
+    },
+    onChange() {
+      if (this.voter) {
+        this.$http.getBankBalances(this.voter).then(res => {
+          if (res && res.length > 0) {
+            this.balance = res.reverse().filter(x => !x.denom.startsWith('ibc'))
+            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
+            if (token) {
+              this.feeDenom = token.denom
+              this.token = token.denom
+            }
+          }
+        })
+        this.$http.getLatestBlock().then(ret => {
+          this.chainId = ret.block.header.chain_id
+          const notSynced = timeIn(ret.block.header.time, 10, 'm')
+          if (notSynced) {
+            this.error = 'Client is not synced or blockchain is halted'
+          } else {
+            this.error = null
+          }
+        })
+        this.$http.getAuthAccount(this.voter).then(ret => {
+          if (ret.value.base_vesting_account) {
+            this.accountNumber = ret.value.base_vesting_account.base_account.account_number
+            this.sequence = ret.value.base_vesting_account.base_account.sequence
+            if (!this.sequence) this.sequence = 0
+          } else {
+            this.accountNumber = ret.value.account_number
+            this.sequence = ret.value.sequence ? ret.value.sequence : 0
+          }
+        })
+      }
+    },
+    loadBalance() {
+      this.accounts = this.computeAccount()
+      // eslint-disable-next-line prefer-destructuring
+      if (this.accounts && this.accounts.length > 0) this.voter = this.accounts[0].value
+      this.onChange()
+    },
+    handleOk(bvModalEvt) {
+      // console.log('send')
+      // Prevent modal from closing
+      bvModalEvt.preventDefault()
+      this.$refs.simpleRules.validate().then(ok => {
+        if (ok) {
+          this.sendTx().then(ret => {
+            // console.log(ret)
+            this.error = ret
+          })
+        }
+      })
+    },
+    resetModal() {
+      this.feeDenom = ''
+      this.error = null
+    },
+    format(v) {
+      return formatToken(v)
+    },
+    async sendTx() {
+      const txMsgs = [{
+        typeUrl: '/cosmos.gov.v1beta1.MsgDeposit',
+        value: {
+          depositor: this.voter,
+          proposalId: String(this.proposalId),
+          amount: [
+            {
+              amount: getUnitAmount(this.amount, this.token),
+              denom: this.token,
+            },
+          ],
+        },
+      }]
+      console.log(txMsgs)
+      if (this.token) return ''
+
+      if (txMsgs.length === 0) {
+        this.error = 'No delegation found'
+        return ''
+      }
+      if (!this.accountNumber) {
+        this.error = 'Account number should not be empty!'
+        return ''
+      }
+
+      const txFee = {
+        amount: [
+          {
+            amount: this.fee,
+            denom: this.feeDenom,
+          },
+        ],
+        gas: this.gas,
+      }
+
+      const signerData = {
+        accountNumber: this.accountNumber,
+        sequence: this.sequence,
+        chainId: this.chainId,
+      }
+
+      sign(
+        this.wallet,
+        this.chainId,
+        this.voter,
+        txMsgs,
+        txFee,
+        this.memo,
+        signerData,
+      ).then(bodyBytes => {
+        this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
+          setLocalTxHistory({ op: 'vote', hash: res.tx_response.txhash, time: new Date() })
+          this.$bvModal.hide('vote-window')
+          this.$toast({
+            component: ToastificationContent,
+            props: {
+              title: 'Transaction sent!',
+              icon: 'EditIcon',
+              variant: 'success',
+            },
+          })
+        }).catch(e => {
+          this.error = e
+        })
+      }).catch(e => {
+        this.error = e
+      })
+      // Send tokens
+      // return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
+      return ''
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>
diff --git a/src/views/OperationTransfer2Component.vue b/src/views/OperationTransfer2Component.vue
index b01d1f36..319fa71e 100644
--- a/src/views/OperationTransfer2Component.vue
+++ b/src/views/OperationTransfer2Component.vue
@@ -12,11 +12,21 @@
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
+    ><b-overlay
+      :show="channels.length === 0"
+      rounded="sm"
     >
+      <template #overlay>
+        <div class="text-center">
+          <p>
+            IBC Module is not enabled.
+          </p>
+        </div>
+      </template>
       <validation-observer ref="simpleRules">
         <b-form>
           <b-row>
-            <b-col v-if="account">
+            <b-col>
               <b-form-group
                 label="Sender"
                 label-for="Account"
@@ -24,14 +34,14 @@
                 <b-input-group class="mb-25">
                   <b-input-group-prepend is-text>
                     <b-avatar
-                      :src="account.logo"
+                      :src="account?account.logo:''"
                       size="18"
                       variant="light-primary"
                       rounded
                     />
                   </b-input-group-prepend>
                   <b-form-input
-                    :value="account.addr"
+                    :value="account?account.addr:address"
                     readonly
                   />
                 </b-input-group>
@@ -272,7 +282,7 @@
         </b-form>
       </validation-observer>
       {{ error }}
-    </b-modal>
+    </b-overlay></b-modal>
   </div>
 </template>
 
@@ -280,7 +290,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, BOverlay,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -312,6 +322,7 @@ export default {
     BFormRadio,
     BFormCheckbox,
     vSelect,
+    BOverlay,
 
     ValidationProvider,
     ValidationObserver,
@@ -388,12 +399,14 @@ export default {
     computeAccount() {
       const accounts = getLocalAccounts()
       const chains = getLocalChains()
-      const values = Object.values(accounts)
-      for (let i = 0; i < values.length; i += 1) {
-        const addr = values[i].address.find(x => x.addr === this.address)
-        if (addr) {
-          this.selectedChain = chains[addr.chain]
-          return addr
+      if (accounts) {
+        const values = Object.values(accounts)
+        for (let i = 0; i < values.length; i += 1) {
+          const addr = values[i].address.find(x => x.addr === this.address)
+          if (addr) {
+            this.selectedChain = chains[addr.chain]
+            return addr
+          }
         }
       }
       return null
diff --git a/src/views/OperationTransferComponent.vue b/src/views/OperationTransferComponent.vue
index 86b50955..dbf7de10 100644
--- a/src/views/OperationTransferComponent.vue
+++ b/src/views/OperationTransferComponent.vue
@@ -16,22 +16,23 @@
       <validation-observer ref="simpleRules">
         <b-form>
           <b-row>
-            <b-col v-if="account">
+            <b-col>
               <b-form-group
                 label="Sender"
-                label-for="Account"
+                label-for="sender"
               >
                 <b-input-group class="mb-25">
                   <b-input-group-prepend is-text>
                     <b-avatar
-                      :src="account.logo"
+                      :src="account?account.logo:''"
                       size="18"
                       variant="light-primary"
                       rounded
                     />
                   </b-input-group-prepend>
                   <b-form-input
-                    :value="account.addr"
+                    name="sender"
+                    :value="account?account.addr:address"
                     readonly
                   />
                 </b-input-group>
@@ -338,12 +339,14 @@ export default {
     computeAccount() {
       const accounts = getLocalAccounts()
       const chains = getLocalChains()
-      const values = Object.values(accounts)
-      for (let i = 0; i < values.length; i += 1) {
-        const addr = values[i].address.find(x => x.addr === this.address)
-        if (addr) {
-          this.selectedChain = chains[addr.chain]
-          return addr
+      if (accounts) {
+        const values = Object.values(accounts)
+        for (let i = 0; i < values.length; i += 1) {
+          const addr = values[i].address.find(x => x.addr === this.address)
+          if (addr) {
+            this.selectedChain = chains[addr.chain]
+            return addr
+          }
         }
       }
       return null
@@ -351,6 +354,7 @@ export default {
     loadBalance() {
       this.account = this.computeAccount()
       if (this.account && this.account.length > 0) this.address = this.account[0].addr
+      console.log(this.account, this.address)
       if (this.address) {
         this.$http.getBankBalances(this.address, this.selectedChain).then(res => {
           if (res && res.length > 0) {
diff --git a/src/views/OperationVoteComponent.vue b/src/views/OperationVoteComponent.vue
index 4bc3a457..9e543b65 100644
--- a/src/views/OperationVoteComponent.vue
+++ b/src/views/OperationVoteComponent.vue
@@ -12,7 +12,23 @@
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
+    ><b-overlay
+      :show="!voter"
+      rounded="sm"
     >
+      <template #overlay>
+        <div class="text-center">
+          <p id="cancel-label">
+            No available account found.
+          </p>
+          <b-button
+            variant="outline-primary"
+            to="/wallet/import"
+          >
+            Connect Wallet
+          </b-button>
+        </div>
+      </template>
       <validation-observer ref="simpleRules">
         <b-form>
           <b-row>
@@ -212,7 +228,7 @@
         </b-form>
       </validation-observer>
       {{ error }}
-    </b-modal>
+    </b-overlay></b-modal>
   </div>
 </template>
 
@@ -220,7 +236,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend, BOverlay, BButton,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -246,6 +262,8 @@ export default {
     BFormRadio,
     BFormCheckbox,
     BInputGroupAppend,
+    BOverlay,
+    BButton,
 
     ValidationProvider,
     ValidationObserver,
@@ -300,13 +318,15 @@ export default {
   },
   methods: {
     computeAccount() {
-      const accounts = getLocalAccounts()
-      const values = Object.values(accounts)
       let array = []
-      for (let i = 0; i < values.length; i += 1) {
-        const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
-        if (addrs && addrs.length > 0) {
-          array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) })))
+      const accounts = getLocalAccounts()
+      if (accounts) {
+        const values = Object.values(accounts)
+        for (let i = 0; i < values.length; i += 1) {
+          const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
+          if (addrs && addrs.length > 0) {
+            array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) })))
+          }
         }
       }
       return array
diff --git a/src/views/OperationWithdrawComponent.vue b/src/views/OperationWithdrawComponent.vue
index 80757ed1..25ba45ce 100644
--- a/src/views/OperationWithdrawComponent.vue
+++ b/src/views/OperationWithdrawComponent.vue
@@ -16,7 +16,7 @@
       <validation-observer ref="simpleRules">
         <b-form>
           <b-row>
-            <b-col v-if="account">
+            <b-col>
               <b-form-group
                 label="Sender"
                 label-for="Account"
@@ -24,14 +24,14 @@
                 <b-input-group class="mb-25">
                   <b-input-group-prepend is-text>
                     <b-avatar
-                      :src="account.logo"
+                      :src="account?account.logo:''"
                       size="18"
                       variant="light-primary"
                       rounded
                     />
                   </b-input-group-prepend>
                   <b-form-input
-                    :value="account.addr"
+                    :value="account?account.addr:address"
                     readonly
                   />
                 </b-input-group>
@@ -251,12 +251,14 @@ export default {
     computeAccount() {
       const accounts = getLocalAccounts()
       const chains = getLocalChains()
-      const values = Object.values(accounts)
-      for (let i = 0; i < values.length; i += 1) {
-        const addr = values[i].address.find(x => x.addr === this.address)
-        if (addr) {
-          this.selectedChain = chains[addr.chain]
-          return addr
+      if (accounts) {
+        const values = Object.values(accounts)
+        for (let i = 0; i < values.length; i += 1) {
+          const addr = values[i].address.find(x => x.addr === this.address)
+          if (addr) {
+            this.selectedChain = chains[addr.chain]
+            return addr
+          }
         }
       }
       return null
diff --git a/src/views/Staking.vue b/src/views/Staking.vue
index 7ee6a7d3..7a5ec7c1 100644
--- a/src/views/Staking.vue
+++ b/src/views/Staking.vue
@@ -93,15 +93,27 @@
               class="text-danger"
             >{{ data.item.changes }}</small>
           </template>
+          <template #cell(operation)="data">
+            <b-button
+              v-b-modal.delegate-window
+              :name="data.item.operator_address"
+              variant="primary"
+              size="sm"
+              @click="selectValidator(data.item.operator_address)"
+            >
+              Delegate
+            </b-button>
+          </template>
         </b-table>
       </b-card-body>
     </b-card>
+    <operation-delegate-component :validator-address="validator_address" />
   </div>
 </template>
 
 <script>
 import {
-  BTable, BMedia, BAvatar, BBadge, BCard, BCardHeader, BCardTitle, VBTooltip, BCardBody,
+  BTable, BMedia, BAvatar, BBadge, BCard, BCardHeader, BCardTitle, VBTooltip, BCardBody, BButton,
 } from 'bootstrap-vue'
 import {
   Validator, percent, StakingParameters, formatToken,
@@ -109,6 +121,7 @@ import {
 import { keybase } from '@/libs/fetch'
 // import { toHex } from '@cosmjs/encoding'
 // import fetch from 'node-fetch'
+import OperationDelegateComponent from './OperationDelegateComponent.vue'
 
 export default {
   components: {
@@ -120,6 +133,8 @@ export default {
     BCardHeader,
     BCardTitle,
     BCardBody,
+    BButton,
+    OperationDelegateComponent,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -127,6 +142,7 @@ export default {
   data() {
     return {
       islive: true,
+      validator_address: null,
       mintInflation: 0,
       stakingPool: 1,
       stakingParameters: new StakingParameters(),
@@ -156,8 +172,13 @@ export default {
         {
           key: 'commission',
           formatter: value => `${percent(value.rate)}%`,
-          tdClass: 'text-right d-none d-md-block',
-          thClass: 'text-right d-none d-md-block',
+          tdClass: 'text-right',
+          thClass: 'text-right',
+        },
+        {
+          key: 'operation',
+          tdClass: 'text-right',
+          thClass: 'text-right',
         },
       ],
     }
@@ -230,6 +251,9 @@ export default {
     this.islive = false
   },
   methods: {
+    selectValidator(da) {
+      this.validator_address = da
+    },
     percent,
     tokenFormatter(amount, denom) {
       return formatToken({ amount, denom }, {}, 0)