diff --git a/app/src/renderer/components/staking/PageValidator.vue b/app/src/renderer/components/staking/PageValidator.vue
index 6ec0f62a35..70e981bde9 100644
--- a/app/src/renderer/components/staking/PageValidator.vue
+++ b/app/src/renderer/components/staking/PageValidator.vue
@@ -21,13 +21,13 @@ tm-page
             //- TODO replace with address component when ready
             anchor-copy.validator-profile__header__name__address(:value="validator.owner" :label="shortAddress(validator.owner)")
           .column.validator-profile__header__actions
-            tm-btn(id="stake-btn" value="Stake" color="primary" @click.native="onStake()")
+            tm-btn(id="stake-btn" value="Stake" color="primary" @click.native="onStake")
 
             tm-btn(
               id="unstake-btn"
               value="Unstake"
               color="secondary"
-              @click.native="onUnstake()"
+              @click.native="onUnstake"
             )
 
         .row.validator-profile__header__data
@@ -112,7 +112,7 @@ tm-page
       div(slot='footer')
         tmBtn(
           id="no-atoms-modal__btn"
-          @click.native="closeCannotStake()"
+          @click.native="closeCannotStake"
           value="OK"
         )
 
@@ -126,12 +126,14 @@ tm-page
       div(slot='footer')
         tmBtn(
           id="no-bond-modal__btn"
-          @click.native="closeCannotUnstake()"
+          @click.native="closeCannotUnstake"
           value="OK"
         )
 </template>
 
 <script>
+import BigNumber from "bignumber.js"
+import { calculateTokens } from "scripts/common"
 import { mapGetters } from "vuex"
 import { TmBtn, TmListItem, TmPage, TmPart, TmToolBar } from "@tendermint/ui"
 import { TmDataError } from "common/TmDataError"
@@ -141,6 +143,7 @@ import ModalUnstake from "staking/ModalUnstake"
 import numeral from "numeral"
 import AnchorCopy from "common/AnchorCopy"
 import TmBalance from "common/TmBalance"
+import TmModal from "common/TmModal"
 export default {
   name: "page-validator",
   components: {
@@ -149,7 +152,7 @@ export default {
     ModalUnstake,
     TmBtn,
     TmListItem,
-    TmBalance,
+    TmModal,
     TmPage,
     TmPart,
     TmToolBar,
@@ -158,6 +161,7 @@ export default {
   },
   data: () => ({
     showCannotStake: false,
+    showCannotUnstake: false,
     showModalStake: false,
     showModalUnstake: false,
     shortAddress,
@@ -241,6 +245,9 @@ export default {
     closeCannotStake() {
       this.showCannotStake = false
     },
+    closeCannotUnstake() {
+      this.showCannotUnstake = false
+    },
     onStake() {
       if (this.availableAtoms > 0) {
         this.showModalStake = true
@@ -249,7 +256,7 @@ export default {
       }
     },
     onUnstake() {
-      if (this.myBond === BigNumber(0)) {
+      if (this.myBond.isEqualTo(BigNumber(0))) {
         this.showCannotUnstake = true
       } else {
         this.showModalUnstake = true
@@ -290,27 +297,19 @@ export default {
       }
     },
     async submitUndelegation({ amount }) {
-      const candidateId = this.validator.owner
-
-      const currentlyDelegated = calculateTokens(
-        this.validator,
-        this.delegation.committedDelegates[candidateId] || 0
-      )
-
-      const delegation = [
-        {
-          atoms: currentlyDelegated.minus(amount),
-          delegate: this.validator
-        }
-      ]
-      console.log(delegation)
-
       try {
-        await this.$store.dispatch("submitDelegation", delegation)
+        await this.$store.dispatch("submitDelegation", {
+          unbondings: [
+            {
+              atoms: -amount,
+              delegate: this.validator
+            }
+          ]
+        })
 
         this.$store.commit("notify", {
           title: "Successful Unstaking!",
-          body: `You have successfully unstaked your ${amount} ${
+          body: `You have successfully unstaked ${amount} ${
             this.bondingDenom
           }s.`
         })
diff --git a/test/unit/specs/components/staking/PageValidator.spec.js b/test/unit/specs/components/staking/PageValidator.spec.js
index 99a26fd61c..33fdaaa98f 100644
--- a/test/unit/specs/components/staking/PageValidator.spec.js
+++ b/test/unit/specs/components/staking/PageValidator.spec.js
@@ -1,3 +1,4 @@
+import BigNumber from "bignumber.js"
 import Delegation from "renderer/vuex/modules/delegation"
 import ModalStake from "staking/ModalStake"
 import ModalUnstake from "staking/ModalUnstake"
@@ -422,34 +423,7 @@ describe(`onStake`, () => {
               delegations: [
                 {
                   atoms: 10,
-                  delegate: {
-                    bond_height: "0",
-                    bond_intra_tx_counter: 6,
-                    commission: "0.05",
-                    commission_change_rate: "0.01",
-                    commission_change_today: "0.005",
-                    commission_max: "0.1",
-                    delegator_shares: "19",
-                    description: {
-                      country: "DE",
-                      details: "Herr Schmidt",
-                      moniker: "herr_schmidt_revoked",
-                      website: "www.schmidt.de"
-                    },
-                    keybase: undefined,
-                    owner: "1a2b3c",
-                    prev_bonded_shares: "0",
-                    proposer_reward_pool: null,
-                    pub_key: {
-                      data: "dlN5SLqeT3LT9WsUK5iuVq1eLQV2Q1JQAuyN0VwSWK0=",
-                      type: "AC26791624DE60"
-                    },
-                    revoked: false,
-                    selfBond: 0.01,
-                    status: 2,
-                    tokens: "19",
-                    voting_power: "10"
-                  }
+                  delegate
                 }
               ]
             }
@@ -488,12 +462,14 @@ describe(`onStake`, () => {
 })
 
 describe(`onUnstake`, () => {
-  describe(`make sure we have enough atoms to unstake`, () => {
+  describe(`make sure there are enough atoms to unstake`, () => {
     it(`is enough`, () => {
       const $store = {
         commit: jest.fn(),
         dispatch: jest.fn(),
-        getters: getterValues
+        getters: Object.assign({}, getterValues, {
+          delegation: { committedDelegates: { "1a2b3c": 10 } }
+        })
       }
 
       const wrapper = mount(PageValidator, {
@@ -525,8 +501,6 @@ describe(`onUnstake`, () => {
 
       wrapper.find(`#unstake-btn`).trigger(`click`)
 
-      expect(wrapper.vm.myBond).toEqual(BigNumber(0))
-
       expect(
         wrapper.text().includes(`You have no atoms staked with this validator.`)
       ).toEqual(true)
@@ -539,7 +513,7 @@ describe(`onUnstake`, () => {
     })
   })
 
-  describe(`submitDelegation`, () => {
+  describe(`submitUndelegation`, () => {
     describe(`unit`, () => {
       it(`success`, async () => {
         const $store = {
@@ -549,7 +523,7 @@ describe(`onUnstake`, () => {
         }
 
         const {
-          vm: { submitDelegation }
+          vm: { submitUndelegation }
         } = mount(PageValidator, {
           mocks: {
             $route: { params: { validator: `1a2b3c` } },
@@ -557,18 +531,18 @@ describe(`onUnstake`, () => {
           }
         })
 
-        await submitDelegation({ amount: 10 })
+        await submitUndelegation({ amount: 10 })
 
         expect($store.dispatch.mock.calls).toEqual([
-          [`submitDelegation`, [{ atoms: BigNumber(10), delegate }]]
+          [`submitDelegation`, { unbondings: [{ atoms: -10, delegate }] }]
         ])
 
         expect($store.commit.mock.calls).toEqual([
           [
             `notify`,
             {
-              body: `You have successfully staked your atoms.`,
-              title: `Successful Staking!`
+              body: `You have successfully unstaked 10 atoms.`,
+              title: `Successful Unstaking!`
             }
           ]
         ])
@@ -584,7 +558,7 @@ describe(`onUnstake`, () => {
         }
 
         const {
-          vm: { submitDelegation }
+          vm: { submitUndelegation }
         } = mount(PageValidator, {
           mocks: {
             $route: { params: { validator: `1a2b3c` } },
@@ -592,10 +566,10 @@ describe(`onUnstake`, () => {
           }
         })
 
-        await submitDelegation({ amount: 10 })
+        await submitUndelegation({ amount: 10 })
 
         expect($store.dispatch.mock.calls).toEqual([
-          [`submitDelegation`, [{ atoms: BigNumber(10), delegate }]]
+          [`submitDelegation`, { unbondings: [{ atoms: -10, delegate }] }]
         ])
 
         expect($store.commit.mock.calls).toEqual([
@@ -603,7 +577,7 @@ describe(`onUnstake`, () => {
             `notifyError`,
             {
               body: `message`,
-              title: `Error While Staking atoms`
+              title: `Error While Unstaking atoms`
             }
           ]
         ])
@@ -619,7 +593,7 @@ describe(`onUnstake`, () => {
         }
 
         const {
-          vm: { submitDelegation }
+          vm: { submitUndelegation }
         } = mount(PageValidator, {
           mocks: {
             $route: { params: { validator: `1a2b3c` } },
@@ -627,10 +601,10 @@ describe(`onUnstake`, () => {
           }
         })
 
-        await submitDelegation({ amount: 10 })
+        await submitUndelegation({ amount: 10 })
 
         expect($store.dispatch.mock.calls).toEqual([
-          [`submitDelegation`, [{ atoms: BigNumber(10), delegate }]]
+          [`submitDelegation`, { unbondings: [{ atoms: -10, delegate }] }]
         ])
 
         expect($store.commit.mock.calls).toEqual([
@@ -638,7 +612,7 @@ describe(`onUnstake`, () => {
             `notifyError`,
             {
               body: `Seven`,
-              title: `Error While Staking atoms`
+              title: `Error While Unstaking atoms`
             }
           ]
         ])
@@ -661,13 +635,13 @@ describe(`onUnstake`, () => {
           getters: getterValues,
           rootState: getterValues,
           state: {
-            committedDelegates: { "1a2b3c": 0 },
+            committedDelegates: { "1a2b3c": 10 },
             unbondingDelegations: {}
           }
         }
 
         const {
-          vm: { submitDelegation }
+          vm: { submitUndelegation }
         } = mount(PageValidator, {
           mocks: {
             $route: { params: { validator: `1a2b3c` } },
@@ -675,57 +649,32 @@ describe(`onUnstake`, () => {
           }
         })
 
-        await submitDelegation({ amount: 10 })
+        await submitUndelegation({ amount: 10 })
 
         expect($store.dispatch.mock.calls).toEqual([
           [
             "submitDelegation",
-            [
-              {
-                atoms: BigNumber(10),
-                delegate: {
-                  bond_height: "0",
-                  bond_intra_tx_counter: 6,
-                  commission: "0.05",
-                  commission_change_rate: "0.01",
-                  commission_change_today: "0.005",
-                  commission_max: "0.1",
-                  delegator_shares: "19",
-                  description: {
-                    country: "DE",
-                    details: "Herr Schmidt",
-                    moniker: "herr_schmidt_revoked",
-                    website: "www.schmidt.de"
-                  },
-                  keybase: undefined,
-                  owner: "1a2b3c",
-                  prev_bonded_shares: "0",
-                  proposer_reward_pool: null,
-                  pub_key: {
-                    data: "dlN5SLqeT3LT9WsUK5iuVq1eLQV2Q1JQAuyN0VwSWK0=",
-                    type: "AC26791624DE60"
-                  },
-                  revoked: false,
-                  selfBond: 0.01,
-                  status: 2,
-                  tokens: "19",
-                  voting_power: "10"
+            {
+              unbondings: [
+                {
+                  atoms: -10,
+                  delegate
                 }
-              }
-            ]
+              ]
+            }
           ],
           [
             "sendTx",
             {
-              begin_unbondings: [],
-              delegations: [
+              begin_unbondings: [
                 {
-                  delegation: { amount: "10", denom: "atom" },
                   delegator_addr:
                     "cosmosaccaddr15ky9du8a2wlstz6fpx3p4mqpjyrm5ctpesxxn9",
+                  shares: "10.00000000",
                   validator_addr: "1a2b3c"
                 }
               ],
+              delegations: [],
               to: "cosmosaccaddr15ky9du8a2wlstz6fpx3p4mqpjyrm5ctpesxxn9",
               type: "updateDelegations"
             }
@@ -733,12 +682,12 @@ describe(`onUnstake`, () => {
         ])
 
         expect($store.commit.mock.calls).toEqual([
-          ["setAtoms", 32],
+          ["setAtoms", 42],
           [
             "notify",
             {
-              body: "You have successfully staked your atoms.",
-              title: "Successful Staking!"
+              body: "You have successfully unstaked 10 atoms.",
+              title: "Successful Unstaking!"
             }
           ]
         ])