diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/NiDataEmptySearch.vue
new file mode 100644
index 0000000000..6abba77c42
--- /dev/null
+++ b/app/src/renderer/components/common/NiDataEmptySearch.vue
@@ -0,0 +1,15 @@
+<template lang="pug">
+data-msg(icon="search")
+  div(slot="title") No Results
+  div(slot="subtitle") Your search did not match any available data.
+</template>
+
+<script>
+import DataMsg from 'common/NiDataMsg'
+export default {
+  name: 'ni-data-empty-search',
+  components: {
+    DataMsg
+  }
+}
+</script>
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index 209304090d..5bcaf22f0e 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -8,14 +8,22 @@ page(title='Proposals')
       i.material-icons search
       .label Search
   modal-search(v-if="filters.proposals.search.visible" type="proposals")
-  part
-    li-proposal(v-for="p in filteredProposals" :key="p.id" :proposal="p")
+
+  data-empty(v-if="proposals.length === 0")
+  data-empty-search(v-else-if="filteredProposals.length === 0")
+  li-proposal(
+    v-else
+    v-for="p in filteredProposals"
+    :key="p.id"
+    :proposal="p")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataEmpty from 'common/NiDataEmpty'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import LiProposal from 'govern/LiProposal'
 import ModalSearch from 'common/NiModalSearch'
 import TabBar from 'common/NiTabBar'
@@ -25,6 +33,8 @@ import Part from 'common/NiPart'
 export default {
   name: 'page-proposals',
   components: {
+    DataEmpty,
+    DataEmptySearch,
     LiProposal,
     ModalSearch,
     Page,
diff --git a/app/src/renderer/components/monitor/PageValidators.vue b/app/src/renderer/components/monitor/PageValidators.vue
index 97792bc12a..f9d38122bb 100644
--- a/app/src/renderer/components/monitor/PageValidators.vue
+++ b/app/src/renderer/components/monitor/PageValidators.vue
@@ -5,7 +5,11 @@ page(title='Validators')
       i.material-icons search
       .label Search
   modal-search(v-if="filters.validators.search.visible" type="validators")
+
+  data-empty(v-if="validators.length === 0")
+  data-empty-search(v-else-if="filteredValidators.length === 0")
   list-item(
+    v-else
     v-for="i in filteredValidators"
     icon='storage'
     :key="i.pub_key.data"
@@ -19,6 +23,8 @@ import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import ListItem from 'common/NiListItem'
+import DataEmpty from 'common/NiDataEmpty'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import ModalSearch from 'common/NiModalSearch'
 import Page from 'common/NiPage'
 import TabBar from 'common/NiTabBar'
@@ -26,6 +32,8 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-validators',
   components: {
+    DataEmpty,
+    DataEmptySearch,
     ListItem,
     ModalSearch,
     Page,
@@ -36,9 +44,9 @@ export default {
     ...mapGetters(['validators', 'filters']),
     filteredValidators () {
       let query = this.filters.validators.search.query
-      let list = orderBy(this.validators, ['node_info.moniker', 'desc'])
+      let list = orderBy(this.validators, ['pub_key.data', 'desc'])
       if (this.filters.validators.search.visible) {
-        return list.filter(i => includes(i.node_info.moniker, query))
+        return list.filter(i => includes(i.pub_key.data, query))
       } else {
         return list
       }
diff --git a/app/src/renderer/components/staking/PageDelegates.vue b/app/src/renderer/components/staking/PageDelegates.vue
index 8d84e19fed..7bdddaa2a6 100644
--- a/app/src/renderer/components/staking/PageDelegates.vue
+++ b/app/src/renderer/components/staking/PageDelegates.vue
@@ -10,14 +10,14 @@ page(:title='pageTitle')
     router-link(v-if="config.devMode" to='/staking/bond')
       i.material-icons check_circle
       .label Bond Atoms
+
   modal-search(v-if="filters.delegates.search.visible" type="delegates")
-  template(v-if="delegates.length > 0")
+
+  data-error(v-if="delegates.length === 0")
+  data-empty-search(v-if="filteredDelegates.length === 0")
+  template(v-else)
     panel-sort(:sort='sort')
-    li-delegate(
-      v-for='i in filteredDelegates'
-      key='i.id'
-      :delegate='i')
-  data-error(v-else)
+    li-delegate( v-for='i in filteredDelegates' key='i.id' :delegate='i')
 </template>
 
 <script>
@@ -25,6 +25,7 @@ import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import LiDelegate from 'staking/LiDelegate'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import DataError from 'common/NiDataError'
 import Field from '@nylira/vue-field'
 import ModalSearch from 'common/NiModalSearch'
@@ -36,6 +37,7 @@ export default {
   name: 'page-delegates',
   components: {
     LiDelegate,
+    DataEmptySearch,
     DataError,
     Field,
     ModalSearch,
diff --git a/app/src/renderer/components/wallet/PageBalances.vue b/app/src/renderer/components/wallet/PageBalances.vue
index 6cc21f4908..9d3fe6e9f1 100644
--- a/app/src/renderer/components/wallet/PageBalances.vue
+++ b/app/src/renderer/components/wallet/PageBalances.vue
@@ -14,18 +14,22 @@ page(title='Balance')
     li-copy(:value="wallet.key.address")
 
   part(title="Denomination Balances")
-    list-item(
-      v-for="i in filteredBalances"
-      :key="i.denom"
-      :dt="i.denom.toUpperCase()"
-      :dd="i.amount")
-    list-item(v-if='wallet.denoms.length === 0 && wallet.balances.length === 0' dt="N/A" dd="None Available")
+  data-empty(v-if="wallet.balances.length === 0")
+  data-empty-search(v-else-if="filteredBalances.length === 0")
+  list-item(
+    v-else
+    v-for="i in filteredBalances"
+    :key="i.denom"
+    :dt="i.denom.toUpperCase()"
+    :dd="i.amount")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataEmpty from 'common/NiDataEmpty'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import LiCopy from 'common/NiLiCopy'
 import ListItem from 'common/NiListItem'
 import ModalSearch from 'common/NiModalSearch'
@@ -35,6 +39,8 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-balances',
   components: {
+    DataEmpty,
+    DataEmptySearch,
     LiCopy,
     ListItem,
     ModalSearch,
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 40064f3891..6ff0606fee 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -7,18 +7,21 @@ page(title='Transactions')
 
   modal-search(v-if="filters.transactions.search.visible" type="transactions")
 
+  data-empty-tx(v-if='transactions.length === 0')
+  data-empty-search(v-else-if="filteredTransactions.length === 0")
   li-transaction(
+    v-else
     v-for="i in filteredTransactions"
     :transaction-value="i"
     :address="wallet.key.address"
     :devMode="config.devMode")
-  data-empty-tx(v-if='filteredTransactions.length === 0')
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import DataEmptyTx from 'common/NiDataEmptyTx'
 import LiTransaction from 'wallet/LiTransaction'
 import ModalSearch from 'common/NiModalSearch'
@@ -29,6 +32,7 @@ export default {
   name: 'page-transactions',
   components: {
     LiTransaction,
+    DataEmptySearch,
     DataEmptyTx,
     ModalSearch,
     Page,
diff --git a/test/unit/specs/NiDataEmpty.spec.js b/test/unit/specs/NiDataEmpty.spec.js
new file mode 100644
index 0000000000..0de3b974e8
--- /dev/null
+++ b/test/unit/specs/NiDataEmpty.spec.js
@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataEmpty from 'common/NiDataEmpty'
+
+describe('NiDataEmpty', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataEmpty)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('info_outline')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('N/A')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toBe('No data available yet.')
+  })
+})
diff --git a/test/unit/specs/NiDataEmptySearch.spec.js b/test/unit/specs/NiDataEmptySearch.spec.js
new file mode 100644
index 0000000000..03b2eaf311
--- /dev/null
+++ b/test/unit/specs/NiDataEmptySearch.spec.js
@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataEmptySearch from 'common/NiDataEmptySearch'
+
+describe('NiDataEmptySearch', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataEmptySearch)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('search')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('No Results')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toBe('Your search did not match any available data.')
+  })
+})
diff --git a/test/unit/specs/NiDataEmptyTx.spec.js b/test/unit/specs/NiDataEmptyTx.spec.js
new file mode 100644
index 0000000000..0a06a7d2c3
--- /dev/null
+++ b/test/unit/specs/NiDataEmptyTx.spec.js
@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataEmptyTx from 'common/NiDataEmptyTx'
+
+describe('NiDataEmptyTx', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataEmptyTx)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('info_outline')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('No Transaction History')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toContain('Looks like you haven\'t sent or received any transactions yet.')
+  })
+})
diff --git a/test/unit/specs/NiDataError.spec.js b/test/unit/specs/NiDataError.spec.js
new file mode 100644
index 0000000000..492cbe427f
--- /dev/null
+++ b/test/unit/specs/NiDataError.spec.js
@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataError from 'common/NiDataError'
+
+describe('NiDataError', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataError)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('sentiment_very_dissatisfied')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('Aw shucks!')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toContain('Even though you\'re connected a full node, we can\'t display this data for you right now.')
+  })
+})
diff --git a/test/unit/specs/PageBalances.spec.js b/test/unit/specs/PageBalances.spec.js
index 99797c1a84..6bba95d441 100644
--- a/test/unit/specs/PageBalances.spec.js
+++ b/test/unit/specs/PageBalances.spec.js
@@ -52,7 +52,7 @@ describe('PageBalances', () => {
   })
 
   it('has the expected html structure', () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it('should sort the balances by denom', () => {
@@ -63,7 +63,7 @@ describe('PageBalances', () => {
     store.commit('setSearchVisible', ['balances', true])
     store.commit('setSearchQuery', ['balances', 'atom'])
     expect(wrapper.vm.filteredBalances.map(x => x.denom)).toEqual(['ATOM'])
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it('should update balances by querying wallet state', () => {
@@ -83,8 +83,9 @@ describe('PageBalances', () => {
   it('should show the n/a message if there are no denoms', () => {
     store.commit('setWalletBalances', [])
     wrapper.update()
-    expect(wrapper.findAll('.ni-li').length).toBe(1) // 1 n/a / 0 denoms
-    expect(wrapper.findAll('.ni-li').at(0).html()).toContain('N/A') // 1 address + 1 n/a
+    expect(wrapper.findAll('.ni-data-msg').length).toBe(1) // 1 n/a / 0 denoms
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toContain('N/A') // 1 address + 1 n/a
   })
 
   it('should not show the n/a message if there denoms', () => {
diff --git a/test/unit/specs/PageTransactions.spec.js b/test/unit/specs/PageTransactions.spec.js
index 1066e79666..bad397847e 100644
--- a/test/unit/specs/PageTransactions.spec.js
+++ b/test/unit/specs/PageTransactions.spec.js
@@ -25,6 +25,7 @@ describe('PageTransactions', () => {
       }
     })
 
+    store.commit('setWalletKey', {address: 'myAddress'})
     store.commit('setWalletHistory', [{
       tx: {
         hash: 'x',
@@ -77,7 +78,8 @@ describe('PageTransactions', () => {
       localVue,
       store,
       stubs: {
-        'data-empty-tx': '<data-empty-tx />'
+        'data-empty-tx': '<data-empty-tx />',
+        'li-transaction': '<li-transactions />'
       }
     })
 
@@ -93,6 +95,10 @@ describe('PageTransactions', () => {
     expect(wrapper.contains('.ni-modal-search')).toBe(true)
   })
 
+  it('should show transactions', () => {
+    expect(wrapper.findAll('li-transactions').length).toBe(2)
+  })
+
   it('should sort the transaction by time', () => {
     expect(wrapper.vm.filteredTransactions.map(x => x.tx.hash)).toEqual(['y', 'x'])
   })
diff --git a/test/unit/specs/__snapshots__/NiDataEmpty.spec.js.snap b/test/unit/specs/__snapshots__/NiDataEmpty.spec.js.snap
new file mode 100644
index 0000000000..2d1a1e4761
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiDataEmpty.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataEmpty has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons\\">info_outline</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      <div>
+         N/A
+      </div>
+</div>
+<div class=\\"ni-data-msg__subtitle\\">
+   <div>
+      No data available yet.
+   </div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiDataEmptySearch.spec.js.snap b/test/unit/specs/__snapshots__/NiDataEmptySearch.spec.js.snap
new file mode 100644
index 0000000000..91e4b5d0ae
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiDataEmptySearch.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataEmptySearch has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons\\">search</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      <div>
+         No Results
+      </div>
+</div>
+<div class=\\"ni-data-msg__subtitle\\">
+   <div>
+      Your search did not match any available data.
+   </div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiDataEmptyTx.spec.js.snap b/test/unit/specs/__snapshots__/NiDataEmptyTx.spec.js.snap
new file mode 100644
index 0000000000..af8dc51242
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiDataEmptyTx.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataEmptyTx has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons\\">info_outline</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      <div>
+         No Transaction History
+      </div>
+</div>
+<div class=\\"ni-data-msg__subtitle\\">
+   <div>
+      Looks like you haven't sent or received any transactions yet. Head over to 
+      <router-link to=\\"[object Object]\\">
+         Send
+      </router-link>
+to make your first transaction!
+   </div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiDataError.spec.js.snap b/test/unit/specs/__snapshots__/NiDataError.spec.js.snap
new file mode 100644
index 0000000000..ab03a15fae
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiDataError.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataError has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons\\">sentiment_very_dissatisfied</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      <div>
+         Aw shucks!
+      </div>
+</div>
+<div class=\\"ni-data-msg__subtitle\\">
+   <div>
+      Even though you're connected a full node, we can't display this data for you right now. Please try again later or <a href=\\"https://github.com/cosmos/cosmos-ui/issues\\">file a bug report</a>. Apologies!
+   </div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
index a44b125675..07d644506e 100644
--- a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
@@ -1,5 +1,503 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">N/A</div><div class=\\"ni-li-dd\\">None Available</div></div></div></div></main></div></section></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;
+exports[`PageBalances has the expected html structure 1`] = `
+<div
+  class="ni-page"
+>
+  <header
+    class="ni-page-header"
+  >
+    <div
+      class="ni-page-header-container"
+    >
+      <div
+        class="ni-page-header-text"
+      >
+        <div
+          class="ni-page-header-title"
+        >
+          <div>
+            Balance
+          </div>
+        </div>
+        <div
+          class="ni-page-header-subtitle"
+        >
+          <div>
+            
+          </div>
+        </div>
+      </div>
+      <menu
+        class="ni-page-header-menu"
+      >
+        <div>
+          <div>
+            <div
+              class="ni-tool-bar"
+            >
+              <div
+                class="ni-tool-bar-container"
+              >
+                <div
+                  class="main"
+                >
+                  <a>
+                    <i
+                      class="material-icons"
+                    >
+                      refresh
+                    </i>
+                    <div
+                      class="label"
+                    >
+                      Refresh
+                    </div>
+                  </a>
+                  <a>
+                    <i
+                      class="material-icons"
+                    >
+                      search
+                    </i>
+                    <div
+                      class="label"
+                    >
+                      Search
+                    </div>
+                  </a>
+                </div>
+                <a
+                  class="help"
+                >
+                  <i
+                    class="material-icons"
+                  >
+                    help_outline
+                  </i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </menu>
+    </div>
+  </header>
+  <main
+    class="ni-page-main"
+  >
+    <!---->
+    <section
+      class="ni-part"
+    >
+      <div
+        class="ni-part-container"
+      >
+        <header
+          class="ni-part-header"
+        >
+          <div
+            class="ni-part-header-container"
+          >
+            <div
+              class="ni-part-title h5"
+            >
+              Your Address
+            </div>
+            <menu
+              class="ni-part-menu"
+            />
+          </div>
+        </header>
+        <main
+          class="ni-part-main"
+        >
+          <div
+            class="ni-li-copy"
+          >
+            <div
+              class="value"
+            >
+              123abc456def
+            </div>
+            <menu>
+              <button
+                class="ni-btn btn-copy"
+                data-clipboard-text="123abc456def"
+              >
+                <span
+                  class="ni-btn-container"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn-icon material-icons"
+                  >
+                    content_copy
+                  </i>
+                  <span
+                    class="ni-btn-value"
+                  >
+                    Copy
+                  </span>
+                </span>
+              </button>
+            </menu>
+          </div>
+        </main>
+      </div>
+    </section>
+    <section
+      class="ni-part"
+    >
+      <div
+        class="ni-part-container"
+      >
+        <header
+          class="ni-part-header"
+        >
+          <div
+            class="ni-part-header-container"
+          >
+            <div
+              class="ni-part-title h5"
+            >
+              Denomination Balances
+            </div>
+            <menu
+              class="ni-part-menu"
+            />
+          </div>
+        </header>
+        <main
+          class="ni-part-main"
+        />
+      </div>
+    </section>
+    <div
+      class="ni-li proposal-enter proposal-enter-active"
+    >
+      <div
+        class="ni-li-container"
+      >
+        <div
+          class="ni-li-thumb"
+        >
+          <!---->
+        </div>
+        <div
+          class="ni-li-dl"
+        >
+          <div
+            class="ni-li-dt"
+          >
+            FERMION
+          </div>
+          <div
+            class="ni-li-dd"
+          >
+            456
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ni-li proposal-enter proposal-enter-active"
+    >
+      <div
+        class="ni-li-container"
+      >
+        <div
+          class="ni-li-thumb"
+        >
+          <!---->
+        </div>
+        <div
+          class="ni-li-dl"
+        >
+          <div
+            class="ni-li-dt"
+          >
+            ATOM
+          </div>
+          <div
+            class="ni-li-dd"
+          >
+            123
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer
+    class="app-footer"
+  >
+    <div
+      class="app-footer-container"
+    >
+      <div
+        class="afi"
+      >
+        <i
+          class="material-icons fa-spin"
+        >
+          rotate_right
+        </i>
+        <span>
+          Connecting…
+        </span>
+      </div>
+    </div>
+  </footer>
+</div>
+`;
 
-exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;
+exports[`PageBalances should filter the balances 1`] = `
+<div
+  class="ni-page"
+>
+  <header
+    class="ni-page-header"
+  >
+    <div
+      class="ni-page-header-container"
+    >
+      <div
+        class="ni-page-header-text"
+      >
+        <div
+          class="ni-page-header-title"
+        >
+          <div>
+            Balance
+          </div>
+        </div>
+        <div
+          class="ni-page-header-subtitle"
+        >
+          <div>
+            
+          </div>
+        </div>
+      </div>
+      <menu
+        class="ni-page-header-menu"
+      >
+        <div>
+          <div>
+            <div
+              class="ni-tool-bar"
+            >
+              <div
+                class="ni-tool-bar-container"
+              >
+                <div
+                  class="main"
+                >
+                  <a>
+                    <i
+                      class="material-icons"
+                    >
+                      refresh
+                    </i>
+                    <div
+                      class="label"
+                    >
+                      Refresh
+                    </div>
+                  </a>
+                  <a>
+                    <i
+                      class="material-icons"
+                    >
+                      search
+                    </i>
+                    <div
+                      class="label"
+                    >
+                      Search
+                    </div>
+                  </a>
+                </div>
+                <a
+                  class="help"
+                >
+                  <i
+                    class="material-icons"
+                  >
+                    help_outline
+                  </i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </menu>
+    </div>
+  </header>
+  <main
+    class="ni-page-main"
+  >
+    <!---->
+    <section
+      class="ni-part"
+    >
+      <div
+        class="ni-part-container"
+      >
+        <header
+          class="ni-part-header"
+        >
+          <div
+            class="ni-part-header-container"
+          >
+            <div
+              class="ni-part-title h5"
+            >
+              Your Address
+            </div>
+            <menu
+              class="ni-part-menu"
+            />
+          </div>
+        </header>
+        <main
+          class="ni-part-main"
+        >
+          <div
+            class="ni-li-copy"
+          >
+            <div
+              class="value"
+            >
+              123abc456def
+            </div>
+            <menu>
+              <button
+                class="ni-btn btn-copy"
+                data-clipboard-text="123abc456def"
+              >
+                <span
+                  class="ni-btn-container"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn-icon material-icons"
+                  >
+                    content_copy
+                  </i>
+                  <span
+                    class="ni-btn-value"
+                  >
+                    Copy
+                  </span>
+                </span>
+              </button>
+            </menu>
+          </div>
+        </main>
+      </div>
+    </section>
+    <section
+      class="ni-part"
+    >
+      <div
+        class="ni-part-container"
+      >
+        <header
+          class="ni-part-header"
+        >
+          <div
+            class="ni-part-header-container"
+          >
+            <div
+              class="ni-part-title h5"
+            >
+              Denomination Balances
+            </div>
+            <menu
+              class="ni-part-menu"
+            />
+          </div>
+        </header>
+        <main
+          class="ni-part-main"
+        />
+      </div>
+    </section>
+    <div
+      class="ni-li"
+    >
+      <div
+        class="ni-li-container"
+      >
+        <div
+          class="ni-li-thumb"
+        >
+          <!---->
+        </div>
+        <div
+          class="ni-li-dl"
+        >
+          <div
+            class="ni-li-dt"
+          >
+            FERMION
+          </div>
+          <div
+            class="ni-li-dd"
+          >
+            456
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ni-li"
+    >
+      <div
+        class="ni-li-container"
+      >
+        <div
+          class="ni-li-thumb"
+        >
+          <!---->
+        </div>
+        <div
+          class="ni-li-dl"
+        >
+          <div
+            class="ni-li-dt"
+          >
+            ATOM
+          </div>
+          <div
+            class="ni-li-dd"
+          >
+            123
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer
+    class="app-footer"
+  >
+    <div
+      class="app-footer-container"
+    >
+      <div
+        class="afi"
+      >
+        <i
+          class="material-icons fa-spin"
+        >
+          rotate_right
+        </i>
+        <span>
+          Connecting…
+        </span>
+      </div>
+    </div>
+  </footer>
+</div>
+`;
diff --git a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
index 3f66d64f1d..0f7c103d61 100644
--- a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
@@ -100,6 +100,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
   <main
     class="ni-page-main"
   >
+    <!---->
     <!---->
     <div
       class="panel-sort"
@@ -456,6 +457,7 @@ exports[`PageDelegates should filter the delegates 1`] = `
         </button>
       </div>
     </div>
+    <!---->
     <div
       class="panel-sort"
     >
diff --git a/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap
index 4954fb8d6e..51625a8035 100644
--- a/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap
@@ -75,97 +75,16 @@ exports[`PageTransactions has the expected html structure 1`] = `
     class="ni-page-main"
   >
     <!---->
-    <div
-      class="ni-li-tx ni-li-tx-received"
-    >
-      <div
-        class="tx-icon"
-      >
-        <i
-          class="material-icons"
-        >
-          add_circle
-        </i>
-      </div>
-      <div
-        class="tx-container"
-      >
-        <div
-          class="tx-element tx-coins"
-        >
-          <div
-            class="tx-coin"
-          >
-            <div
-              class="value"
-            >
-              1,234.00
-            </div>
-            <div
-              class="key"
-            >
-              fabocoins
-            </div>
-          </div>
-        </div>
-        <div
-          class="tx-element tx-date"
-        >
-          a few seconds ago
-        </div>
-        <div
-          class="tx-element tx-address"
-        >
-          otherAddress
-        </div>
-      </div>
-    </div>
-    <div
-      class="ni-li-tx ni-li-tx-received"
-    >
-      <div
-        class="tx-icon"
-      >
-        <i
-          class="material-icons"
-        >
-          add_circle
-        </i>
-      </div>
-      <div
-        class="tx-container"
-      >
-        <div
-          class="tx-element tx-coins"
-        >
-          <div
-            class="tx-coin"
-          >
-            <div
-              class="value"
-            >
-              1,234.00
-            </div>
-            <div
-              class="key"
-            >
-              jbcoins
-            </div>
-          </div>
-        </div>
-        <div
-          class="tx-element tx-date"
-        >
-          a few seconds ago
-        </div>
-        <div
-          class="tx-element tx-address"
-        >
-          myAddress
-        </div>
-      </div>
-    </div>
-    <!---->
+    <li-transactions
+      address="myAddress"
+      devmode="true"
+      transaction-value="[object Object]"
+    />
+    <li-transactions
+      address="myAddress"
+      devmode="true"
+      transaction-value="[object Object]"
+    />
   </main>
   <footer
     class="app-footer"
@@ -292,97 +211,16 @@ exports[`PageTransactions should filter the transactions 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class="ni-li-tx ni-li-tx-received"
-    >
-      <div
-        class="tx-icon"
-      >
-        <i
-          class="material-icons"
-        >
-          add_circle
-        </i>
-      </div>
-      <div
-        class="tx-container"
-      >
-        <div
-          class="tx-element tx-coins"
-        >
-          <div
-            class="tx-coin"
-          >
-            <div
-              class="value"
-            >
-              1,234.00
-            </div>
-            <div
-              class="key"
-            >
-              fabocoins
-            </div>
-          </div>
-        </div>
-        <div
-          class="tx-element tx-date"
-        >
-          a few seconds ago
-        </div>
-        <div
-          class="tx-element tx-address"
-        >
-          otherAddress
-        </div>
-      </div>
-    </div>
-    <div
-      class="ni-li-tx ni-li-tx-received"
-    >
-      <div
-        class="tx-icon"
-      >
-        <i
-          class="material-icons"
-        >
-          add_circle
-        </i>
-      </div>
-      <div
-        class="tx-container"
-      >
-        <div
-          class="tx-element tx-coins"
-        >
-          <div
-            class="tx-coin"
-          >
-            <div
-              class="value"
-            >
-              1,234.00
-            </div>
-            <div
-              class="key"
-            >
-              jbcoins
-            </div>
-          </div>
-        </div>
-        <div
-          class="tx-element tx-date"
-        >
-          a few seconds ago
-        </div>
-        <div
-          class="tx-element tx-address"
-        >
-          myAddress
-        </div>
-      </div>
-    </div>
-    <!---->
+    <li-transactions
+      address="myAddress"
+      devmode="true"
+      transaction-value="[object Object]"
+    />
+    <li-transactions
+      address="myAddress"
+      devmode="true"
+      transaction-value="[object Object]"
+    />
   </main>
   <footer
     class="app-footer"