diff --git a/app/src/renderer/components/common/NiDataMsg.vue b/app/src/renderer/components/common/NiDataMsg.vue
index d2faa1b2a1..3d624ab9c3 100644
--- a/app/src/renderer/components/common/NiDataMsg.vue
+++ b/app/src/renderer/components/common/NiDataMsg.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 .ni-data-msg
-  .icon: i.material-icons(:class="iconCssClass") {{ icon }}
-  .text
-    .title: slot(name="title") {{ title }}
-    .subtitle: slot(name="subtitle") {{ subtitle }}
+  .ni-data-msg__icon: i.material-icons(:class="iconCssClass") {{ icon }}
+  .ni-data-msg__text
+    .ni-data-msg__title: slot(name="title") {{ title }}
+    .ni-data-msg__subtitle: slot(name="subtitle") {{ subtitle }}
 </template>
 
 <script>
@@ -24,26 +24,31 @@ export default {
 .ni-data-msg
   background app-fg
   padding 1rem
-  .icon
-    margin-bottom 0.5rem
-    i.material-icons
-      font-size 3rem
-      color txt
-  .text
-    max-width 30rem
-    .title
-      color bright
-      font-size h2
-    .subtitle
-      color dim
+  
+.ni-data-msg__icon
+  margin-bottom 0.5rem
+  i.material-icons
+    font-size 3rem
+    color txt
+
+.ni-data-msg__text
+  max-width 30rem
+
+.ni-data-msg__title
+  color bright
+  font-size h2
+
+.ni-data-msg__subtitle
+  color dim
 
 @media screen and (min-width: 768px)
   .ni-data-msg
     display flex
     padding 3rem
-    .icon
-      margin-bottom 0
-      margin-right 1.5rem
-      i.material-icons
-        font-size 4rem
+
+  .ni-data-msg__icon
+    margin-bottom 0
+    margin-right 1.5rem
+    i.material-icons
+      font-size 4rem
 </style>
diff --git a/app/src/renderer/components/common/NiFormGroup.vue b/app/src/renderer/components/common/NiFormGroup.vue
index 4e878d9b79..c4fee15058 100644
--- a/app/src/renderer/components/common/NiFormGroup.vue
+++ b/app/src/renderer/components/common/NiFormGroup.vue
@@ -1,7 +1,8 @@
 <template lang='pug'>
 div(:class='cssClass')
-  label(:for='fieldId' v-if="fieldId && fieldLabel") {{ fieldLabel }}
-  .ni-form-group-field: slot
+  label.ni-form-group__label(:for='fieldId' v-if="fieldId && fieldLabel")
+    | {{ fieldLabel }}
+  .ni-form-group__field: slot
 </template>
 
 <script>
@@ -10,7 +11,7 @@ export default {
   computed: {
     cssClass () {
       let value = 'ni-form-group'
-      if (this.error) value += ' form-group-error'
+      if (this.error) value += ' ni-form-group--error'
       return value
     }
   },
@@ -30,32 +31,31 @@ export default {
   input
     width 100%
 
-  label
-    display block
-    line-height 2rem
-    color txt
-
-  .ni-form-msg-error
+  .ni-form-msg--error
     display none
 
-  &.form-group-error
-    .ni-field, .ni-select
-      border-color danger
-    .ni-form-msg-error
-      display flex
+.ni-form-group--error
+  .ni-field, .ni-select
+    border-color danger
+
+  .ni-form-msg--error
+    display flex
 
-.ni-form-footer
-  border-top 2px solid bc-dim
+.ni-form-group__label
+  display block
+  line-height 2rem
+  color txt
 
 @media (min-width: 768px)
   .ni-form-group
     display flex
-    label
-      flex 0 0 16rem
-    .ni-form-group-field
-      flex 1
 
-  .ni-form-group-field
+  .ni-form-group__label
+    flex 0 0 16rem
+
+  .ni-form-group__field
+    flex 1
+
     > .ni-field
     > .ni-field-group
       width 100%
diff --git a/app/src/renderer/components/common/NiFormMsg.vue b/app/src/renderer/components/common/NiFormMsg.vue
index 74839bd3b4..f0a2da4941 100644
--- a/app/src/renderer/components/common/NiFormMsg.vue
+++ b/app/src/renderer/components/common/NiFormMsg.vue
@@ -10,9 +10,9 @@ export default {
     cssClass () {
       let value = 'ni-form-msg sm'
       if (this.type) {
-        value += ' ni-form-msg-error'
+        value += ' ni-form-msg--error'
       } else {
-        value += ' ni-form-msg-desc'
+        value += ' ni-form-msg--desc'
       }
       return value
     },
@@ -68,17 +68,17 @@ export default {
   font-family 'Material Icons'
   padding-right 0.35rem
  
-.ni-form-msg.ni-form-msg-error
+.ni-form-msg.ni-form-msg--error
   color danger
  
-.ni-form-msg.ni-form-msg-error:before
+.ni-form-msg.ni-form-msg--error:before
   content 'error'
   color danger
  
-.ni-form-msg.ni-form-msg-desc
+.ni-form-msg.ni-form-msg--desc
   color warning
  
-.ni-form-msg.ni-form-msg-desc:before
+.ni-form-msg.ni-form-msg--desc:before
   content 'priority_high'
   color warning
 </style>
diff --git a/app/src/renderer/components/common/NiFormStruct.vue b/app/src/renderer/components/common/NiFormStruct.vue
index e0242a306c..bc6b9913f0 100644
--- a/app/src/renderer/components/common/NiFormStruct.vue
+++ b/app/src/renderer/components/common/NiFormStruct.vue
@@ -1,19 +1,16 @@
-<template>
-  <form :class="cssClass" v-on:submit.prevent.default="submit">
-    <div class="ni-form-container">
-      <slot name="overlay"></slot>
-      <header class="ni-form-header" v-if="hasHeader">
-        <div class="ni-form-title"><slot name="title"></slot></div>
-        <div class="ni-form-subtitle"><slot name="subtitle"></slot></div>
-      </header>
-      <main class="ni-form-main">
-        <slot></slot>
-      </main>
-      <footer class="ni-form-footer" v-if="hasFooter">
-        <slot name="footer"></slot>
-      </footer>
-    </div>
-  </form>
+<template lang="pug">
+form(:class='cssClass' v-on:submit.prevent.default='submit')
+  .ni-form-container
+    slot(name='overlay')
+    header.ni-form-header(v-if='hasHeader')
+      .ni-form-title
+        slot(name='title')
+      .ni-form-subtitle
+        slot(name='subtitle')
+    main.ni-form-main
+      slot
+    footer.ni-form-footer(v-if='hasFooter')
+      slot(name='footer')
 </template>
 
 <script>
diff --git a/app/src/renderer/components/common/NiHardwareState.vue b/app/src/renderer/components/common/NiHardwareState.vue
index 83f028a07a..907cd0e0b5 100644
--- a/app/src/renderer/components/common/NiHardwareState.vue
+++ b/app/src/renderer/components/common/NiHardwareState.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
 .ni-hardware-state
-  i.material-icons(:class="iconClass") {{ icon }}
-  p {{ value }}
+  i.ni-hardware-state__icon.material-icons(:class="iconClass") {{ icon }}
+  .ni-hardware-state__label {{ value }}
 </template>
 
 <script>
@@ -32,11 +32,12 @@ export default {
 
   user-select none
 
-  i
-    font-size 5rem
-    margin-bottom 1rem
-    color dim
-  p
-    text-align center
-    color bright
+.ni-hardware-state__icon
+  font-size 5rem
+  margin-bottom 1rem
+  color dim
+
+.ni-hardware-state__label
+  text-align center
+  color bright
 </style>
diff --git a/package.json b/package.json
index 802b01d716..7612a8ec8c 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
     "superagent": "^3.5.2",
     "tail": "^1.2.1",
     "tendermint-crypto": "github:mappum/js-crypto",
-    "vue-test-utils": "^1.0.0-beta.6",
+    "vue-test-utils": "^1.0.0-beta.8",
     "vuelidate": "^0.5.0",
     "xmlhttprequest": "^1.8.0"
   },
diff --git a/test/unit/specs/LiTransaction.spec.js b/test/unit/specs/LiTransaction.spec.js
index 712afaf6be..20ca28a725 100644
--- a/test/unit/specs/LiTransaction.spec.js
+++ b/test/unit/specs/LiTransaction.spec.js
@@ -42,7 +42,7 @@ describe('LiTransaction', () => {
   })
 
   it('should show incoming transactions', () => {
-    expect(wrapper.find('.ni-li-tx').hasClass('ni-li-tx-received')).toBe(true)
+    expect(wrapper.find('.ni-li-tx').classes()).toContain('ni-li-tx-received')
   })
 
   it('should show outgoing transactions', () => {
@@ -72,7 +72,7 @@ describe('LiTransaction', () => {
       },
       address: 'myAddress'
     })
-    expect(wrapper.find('.ni-li-tx').hasClass('ni-li-tx-sent')).toBe(true)
+    expect(wrapper.find('.ni-li-tx').classes()).toContain('ni-li-tx-sent')
   })
 
   it('should show all coins of the transaction', () => {
diff --git a/test/unit/specs/NiDataLoading.spec.js b/test/unit/specs/NiDataLoading.spec.js
new file mode 100644
index 0000000000..bda6812d84
--- /dev/null
+++ b/test/unit/specs/NiDataLoading.spec.js
@@ -0,0 +1,34 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataLoading from 'common/NiDataLoading'
+
+describe('NiDataLoading', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataLoading)
+  })
+
+  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('rotate_right')
+  })
+
+  it('has a spinning icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon').contains('i.material-icons.fa-spin'))
+      .toBe(true)
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('Data is loading…')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toBe('Please wait a moment.')
+  })
+})
diff --git a/test/unit/specs/NiDataMsg.spec.js b/test/unit/specs/NiDataMsg.spec.js
new file mode 100644
index 0000000000..28d04f8b3c
--- /dev/null
+++ b/test/unit/specs/NiDataMsg.spec.js
@@ -0,0 +1,41 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataMsg from 'common/NiDataMsg'
+
+describe('NiDataMsg', () => {
+  let wrapper
+
+  let propsData = {
+    title: 'sOmEtHiNg Is HaPpEnIng!!!',
+    subtitle: 'Oh my! What could it be?',
+    icon: 'help',
+    spin: false
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiDataMsg, { propsData })
+  })
+
+  it('has a title from props', () => {
+    expect(wrapper.vm.title).toBe('sOmEtHiNg Is HaPpEnIng!!!')
+  })
+
+  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())
+      .toBe('help')
+  })
+
+  it('doesn\'t have a spinning icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon').contains('i.material-icons.fa-spin'))
+      .toBe(false)
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle').text())
+      .toBe('Oh my! What could it be?')
+  })
+})
diff --git a/test/unit/specs/NiFieldAddon.spec.js b/test/unit/specs/NiFieldAddon.spec.js
new file mode 100644
index 0000000000..c9eb79c010
--- /dev/null
+++ b/test/unit/specs/NiFieldAddon.spec.js
@@ -0,0 +1,23 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFieldAddon from 'common/NiFieldAddon'
+
+describe('NiFieldAddon', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(NiFieldAddon, {
+      slots: {
+        default: '<div class="fake-addon">ATOM</div>'
+      }
+    })
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a slot with content', () => {
+    expect(wrapper.findAll('.fake-addon').length).toBe(1)
+  })
+})
diff --git a/test/unit/specs/NiFieldGroup.spec.js b/test/unit/specs/NiFieldGroup.spec.js
new file mode 100644
index 0000000000..1289e6f08b
--- /dev/null
+++ b/test/unit/specs/NiFieldGroup.spec.js
@@ -0,0 +1,23 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFieldGroup from 'common/NiFieldGroup'
+
+describe('NiFieldGroup', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(NiFieldGroup, {
+      slots: {
+        default: '<input class="fake-field" placeholder="Fake">'
+      }
+    })
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a slot with a field', () => {
+    expect(wrapper.findAll('.fake-field').length).toBe(1)
+  })
+})
diff --git a/test/unit/specs/NiFieldSeed.spec.js b/test/unit/specs/NiFieldSeed.spec.js
new file mode 100644
index 0000000000..312dcc3625
--- /dev/null
+++ b/test/unit/specs/NiFieldSeed.spec.js
@@ -0,0 +1,27 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFieldSeed from 'common/NiFieldSeed'
+
+describe('NiFieldSeed', () => {
+  let wrapper
+
+  let propsData = {
+    value: 'one two three four five six seven eight nine ten eleven twelve'
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiFieldSeed, { propsData })
+  })
+
+  it('has a value from props', () => {
+    expect(wrapper.vm.value).toContain('one two three four five six seven eight nine ten eleven twelve')
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has the correct class', () => {
+    expect(wrapper.find('.ni-field').classes()).toContain('ni-field-seed')
+  })
+})
diff --git a/test/unit/specs/NiFieldVote.spec.js b/test/unit/specs/NiFieldVote.spec.js
new file mode 100644
index 0000000000..324abb13c8
--- /dev/null
+++ b/test/unit/specs/NiFieldVote.spec.js
@@ -0,0 +1,40 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFieldVote from 'common/NiFieldVote'
+
+describe('NiFieldVote', () => {
+  let wrapper
+
+  let propsData = {
+    dt: 'No',
+    dd: 0.337,
+    color: 'hsl(0,50%,35%)',
+    active: true,
+    results: true
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiFieldVote, { propsData })
+  })
+
+  it('has a color from props', () => {
+    expect(wrapper.vm.color).toBe('hsl(0,50%,35%)')
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('shows the title of the vote option', () => {
+    expect(wrapper.find('.ni-field-vote-dt').text().trim()).toBe('No')
+  })
+
+  it('has been selected by the user', () => {
+    expect(wrapper.find('.ni-field-vote-input i.material-icons').text().trim())
+      .toBe('radio_button_checked')
+  })
+
+  it('shows the percentage who voted', () => {
+    expect(wrapper.find('.ni-field-vote-dd').text().trim()).toBe('34%')
+  })
+})
diff --git a/test/unit/specs/NiFormGroup.spec.js b/test/unit/specs/NiFormGroup.spec.js
new file mode 100644
index 0000000000..71aa61c8ea
--- /dev/null
+++ b/test/unit/specs/NiFormGroup.spec.js
@@ -0,0 +1,39 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFormGroup from 'common/NiFormGroup'
+
+describe('NiFormGroup', () => {
+  let wrapper
+
+  let propsData = {
+    error: true,
+    fieldId: 'sign-in-password',
+    fieldLabel: 'Sign In Password'
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiFormGroup, {
+      propsData,
+      slots: {
+        default: '<input class="fake-field" value="fake"></div>'
+      }
+    })
+  })
+
+  it('has a field id from props', () => {
+    expect(wrapper.vm.fieldId).toBe('sign-in-password')
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('shows the label of the field', () => {
+    expect(wrapper.find('.ni-form-group__label').text().trim())
+      .toBe('Sign In Password')
+  })
+
+  it('has a slot with a field', () => {
+    expect(wrapper.findAll('.fake-field').length).toBe(1)
+  })
+})
diff --git a/test/unit/specs/NiFormMsg.spec.js b/test/unit/specs/NiFormMsg.spec.js
new file mode 100644
index 0000000000..46f55fd91e
--- /dev/null
+++ b/test/unit/specs/NiFormMsg.spec.js
@@ -0,0 +1,33 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFormMsg from 'common/NiFormMsg'
+
+describe('NiFormMsg', () => {
+  let wrapper
+
+  let propsData = {
+    type: 'length',
+    body: '',
+    name: 'Password',
+    min: 16,
+    max: 255,
+    length: ''
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiFormMsg, { propsData })
+  })
+
+  it('has a type from props', () => {
+    expect(wrapper.vm.type).toBe('length')
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('shows the correct message', () => {
+    expect(wrapper.find('.ni-form-msg').text().trim())
+      .toContain('Password must be between 16 and 255 characters')
+  })
+})
diff --git a/test/unit/specs/NiFormStruct.spec.js b/test/unit/specs/NiFormStruct.spec.js
new file mode 100644
index 0000000000..d8e76ac8ce
--- /dev/null
+++ b/test/unit/specs/NiFormStruct.spec.js
@@ -0,0 +1,54 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFormStruct from 'common/NiFormStruct'
+
+describe('NiFormStruct', () => {
+  let wrapper
+
+  let propsData = {
+    width: 'narrow',
+    submit: function () {
+      console.log('form successfully submitted')
+    }
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiFormStruct, {
+      propsData,
+      slots: {
+        default: '<div class="fake-fields"></div>',
+        footer: '<div class="fake-footer">Fake Footer</div>',
+        title: '<div class="fake-title">Fake Title</div>',
+        subtitle: '<div class="fake-subtitle">Fake Subtitle</div>'
+      }
+    })
+  })
+
+  it('has a width from props', () => {
+    expect(wrapper.vm.width).toBe('narrow')
+  })
+
+  it('has a submit function', () => {
+    expect(wrapper.vm.submit).toBeTruthy()
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a default slot', () => {
+    expect(wrapper.findAll('.fake-fields').length).toBe(1)
+  })
+
+  it('has a footer slot', () => {
+    expect(wrapper.find('.fake-footer').text().trim()).toBe('Fake Footer')
+  })
+
+  it('has a title slot', () => {
+    expect(wrapper.find('.fake-title').text().trim()).toBe('Fake Title')
+  })
+
+  it('has a subtitle slot', () => {
+    expect(wrapper.find('.fake-subtitle').text().trim()).toBe('Fake Subtitle')
+  })
+})
diff --git a/test/unit/specs/NiHardwareState.spec.js b/test/unit/specs/NiHardwareState.spec.js
new file mode 100644
index 0000000000..006055fef4
--- /dev/null
+++ b/test/unit/specs/NiHardwareState.spec.js
@@ -0,0 +1,34 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiHardwareState from 'common/NiHardwareState'
+
+describe('NiHardwareState', () => {
+  let wrapper
+
+  let propsData = {
+    icon: 'rotate_right',
+    spin: true,
+    value: 'Detecting your Ledger Wallet'
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiHardwareState, { propsData })
+  })
+
+  it('has an icon from props', () => {
+    expect(wrapper.vm.icon).toBe('rotate_right')
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a spinning icon', () => {
+    expect(wrapper.contains('i.material-icons.fa-spin')).toBe(true)
+  })
+
+  it('has a label', () => {
+    expect(wrapper.find('.ni-hardware-state__label').text().trim())
+      .toContain('Detecting your Ledger Wallet')
+  })
+})
diff --git a/test/unit/specs/__snapshots__/NISessionAccountDelete.spec.js.snap b/test/unit/specs/__snapshots__/NISessionAccountDelete.spec.js.snap
index ebb2e40236..073add63c6 100644
--- a/test/unit/specs/__snapshots__/NISessionAccountDelete.spec.js.snap
+++ b/test/unit/specs/__snapshots__/NISessionAccountDelete.spec.js.snap
@@ -15,8 +15,8 @@ exports[`NiSessionAccountDelete has the expected html structure 1`] = `
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
-            <label for=\\"sign-in-password\\">Password</label>
-            <div class=\\"ni-form-group-field\\">
+            <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Password</label>
+            <div class=\\"ni-form-group__field\\">
                <input type=\\"password\\" placeholder=\\"Enter your password\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
                <div class=\\"ni-form-msg ni-form-msg-error\\">
                   Password is required
@@ -25,8 +25,8 @@ exports[`NiSessionAccountDelete has the expected html structure 1`] = `
    </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"sign-up-warning\\"></label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"sign-up-warning\\" class=\\"ni-form-group__label\\"></label>
+         <div class=\\"ni-form-group__field\\">
             <div class=\\"ni-field-checkbox\\">
                <div class=\\"ni-field-checkbox-input\\">
                   <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
diff --git a/test/unit/specs/__snapshots__/NISessionHardware.spec.js.snap b/test/unit/specs/__snapshots__/NISessionHardware.spec.js.snap
index 3eb091284c..653a42346d 100644
--- a/test/unit/specs/__snapshots__/NISessionHardware.spec.js.snap
+++ b/test/unit/specs/__snapshots__/NISessionHardware.spec.js.snap
@@ -12,21 +12,21 @@ exports[`NISessionHardware has the expected html structure 1`] = `
 </div>
 <div class=\\"ni-session-main\\">
    <div class=\\"ni-hardware-state\\">
-      <i class=\\"material-icons\\">usb</i>
-      <p>
+      <i class=\\"ni-hardware-state__icon material-icons\\">usb</i>
+      <div class=\\"ni-hardware-state__label\\">
          Please plug in your Ledger Wallet
-      </p>
+      </div>
 </div>
-      <!---->
-      <!---->
+<!---->
+<!---->
 </div>
 <div class=\\"ni-session-footer\\"></div>
 </div>
 </div>"
 `;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><div class=\\"ni-hardware-state\\"><i class=\\"material-icons\\">usb</i><p>Please plug in your Ledger Wallet</p></div><!----><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><div class=\\"ni-hardware-state\\"><i class=\\"ni-hardware-state__icon material-icons\\">usb</i><div class=\\"ni-hardware-state__label\\">Please plug in your Ledger Wallet</div></div><!----><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><div class=\\"ni-hardware-state\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><p>Detecting your Ledger Wallet</p></div><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><div class=\\"ni-hardware-state\\"><i class=\\"ni-hardware-state__icon material-icons fa-spin\\">rotate_right</i><div class=\\"ni-hardware-state__label\\">Detecting your Ledger Wallet</div></div><!----></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
 
-exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><!----><div class=\\"ni-hardware-state\\"><i class=\\"material-icons\\">check_circle</i><p>Ledger Wallet successfully loaded</p></div></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"ni-session\\"><div class=\\"ni-session-container\\"><div class=\\"ni-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"ni-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"ni-session-main\\"><!----><!----><div class=\\"ni-hardware-state\\"><i class=\\"ni-hardware-state__icon material-icons\\">check_circle</i><div class=\\"ni-hardware-state__label\\">Ledger Wallet successfully loaded</div></div></div><div class=\\"ni-session-footer\\"></div></div></div>"`;
diff --git a/test/unit/specs/__snapshots__/NISessionSignIn.spec.js.snap b/test/unit/specs/__snapshots__/NISessionSignIn.spec.js.snap
index b1c8524a6f..eefdabad21 100644
--- a/test/unit/specs/__snapshots__/NISessionSignIn.spec.js.snap
+++ b/test/unit/specs/__snapshots__/NISessionSignIn.spec.js.snap
@@ -15,8 +15,8 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
-            <label for=\\"sign-in-name\\">Select Account</label>
-            <div class=\\"ni-form-group-field\\">
+            <label for=\\"sign-in-name\\" class=\\"ni-form-group__label\\">Select Account</label>
+            <div class=\\"ni-form-group__field\\">
                <div class=\\"ni-select\\" id=\\"sign-in-name\\">
                   <select class=\\"ni-field ni-field-select\\">
                   <option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">
@@ -278,8 +278,8 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"sign-in-password\\">Password</label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Password</label>
+         <div class=\\"ni-form-group__field\\">
             <input type=\\"password\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
             <div class=\\"ni-form-msg ni-form-msg-error\\">
                Password is required
diff --git a/test/unit/specs/__snapshots__/NISessionSignUp.spec.js.snap b/test/unit/specs/__snapshots__/NISessionSignUp.spec.js.snap
index bbfce72d8e..6020d2159d 100644
--- a/test/unit/specs/__snapshots__/NISessionSignUp.spec.js.snap
+++ b/test/unit/specs/__snapshots__/NISessionSignUp.spec.js.snap
@@ -15,8 +15,8 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
-            <label for=\\"sign-up-name\\">Account Name</label>
-            <div class=\\"ni-form-group-field\\">
+            <label for=\\"sign-up-name\\" class=\\"ni-form-group__label\\">Account Name</label>
+            <div class=\\"ni-form-group__field\\">
                <input type=\\"text\\" placeholder=\\"at least 5 characters\\" class=\\"ni-field\\" id=\\"sign-up-name\\">
                <div class=\\"ni-form-msg ni-form-msg-error\\">
                   Name is required
@@ -25,8 +25,8 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
    </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"sign-up-seed\\">Seed (write it down)</label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"sign-up-seed\\" class=\\"ni-form-group__label\\">Seed (write it down)</label>
+         <div class=\\"ni-form-group__field\\">
             <textarea class=\\"ni-field-seed ni-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\"></textarea>
             <div class=\\"ni-form-msg ni-form-msg-desc\\">
                Please back up the seed phrase for this account. These words cannot be recovered!
@@ -34,8 +34,8 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"sign-in-password\\">Password</label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Password</label>
+         <div class=\\"ni-form-group__field\\">
             <input type=\\"password\\" placeholder=\\"at least 10 characters\\" class=\\"ni-field\\" id=\\"sign-in-password\\">
             <div class=\\"ni-form-msg ni-form-msg-desc\\">
                Create a password to secure your new account
@@ -47,8 +47,8 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
    </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"sign-up-warning\\"></label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"sign-up-warning\\" class=\\"ni-form-group__label\\"></label>
+         <div class=\\"ni-form-group__field\\">
             <div class=\\"ni-field-checkbox\\">
                <div class=\\"ni-field-checkbox-input\\">
                   <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
@@ -61,8 +61,8 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"sign-up-backup\\"></label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"sign-up-backup\\" class=\\"ni-form-group__label\\"></label>
+         <div class=\\"ni-form-group__field\\">
             <div for=\\"sign-up-backup\\" class=\\"ni-field-checkbox\\">
                <div class=\\"ni-field-checkbox-input\\">
                   <input id=\\"sign-up-backup\\" type=\\"checkbox\\">
diff --git a/test/unit/specs/__snapshots__/NiDataLoading.spec.js.snap b/test/unit/specs/__snapshots__/NiDataLoading.spec.js.snap
new file mode 100644
index 0000000000..402b0493b0
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiDataLoading.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataLoading has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons fa-spin\\">rotate_right</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      <div>
+         Data is loading…
+      </div>
+</div>
+<div class=\\"ni-data-msg__subtitle\\">
+   <div>
+      Please wait a moment.
+   </div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiDataMsg.spec.js.snap b/test/unit/specs/__snapshots__/NiDataMsg.spec.js.snap
new file mode 100644
index 0000000000..30910d2f6b
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiDataMsg.spec.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataMsg has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons\\">help</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      sOmEtHiNg Is HaPpEnIng!!!
+   </div>
+<div class=\\"ni-data-msg__subtitle\\">
+   Oh my! What could it be?
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiFieldAddon.spec.js.snap b/test/unit/specs/__snapshots__/NiFieldAddon.spec.js.snap
new file mode 100644
index 0000000000..96a47a55bf
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFieldAddon.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFieldAddon has the expected html structure 1`] = `
+"<div class=\\"ni-field-addon\\">
+   <div class=\\"fake-addon\\">
+      ATOM
+   </div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiFieldGroup.spec.js.snap b/test/unit/specs/__snapshots__/NiFieldGroup.spec.js.snap
new file mode 100644
index 0000000000..e4786602a5
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFieldGroup.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFieldGroup has the expected html structure 1`] = `
+"<div class=\\"ni-field-group\\">
+   <input placeholder=\\"Fake\\" class=\\"fake-field\\">
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiFieldSeed.spec.js.snap b/test/unit/specs/__snapshots__/NiFieldSeed.spec.js.snap
new file mode 100644
index 0000000000..e9f263dc48
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFieldSeed.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFieldSeed has the expected html structure 1`] = `"<textarea class=\\"ni-field-seed ni-field\\"></textarea>"`;
diff --git a/test/unit/specs/__snapshots__/NiFieldVote.spec.js.snap b/test/unit/specs/__snapshots__/NiFieldVote.spec.js.snap
new file mode 100644
index 0000000000..0f265d3a4d
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFieldVote.spec.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFieldVote has the expected html structure 1`] = `
+"<div class=\\"ni-field-vote\\">
+   <div class=\\"ni-field-vote-container\\">
+      <div class=\\"ni-field-vote-input\\">
+         <i class=\\"material-icons\\">radio_button_checked</i>
+      </div>
+<div class=\\"ni-field-vote-label\\">
+   <div class=\\"ni-field-vote-bar-outer\\">
+      <div class=\\"ni-field-vote-bar-inner\\" style=\\"width: 34%;\\"></div>
+</div>
+<div class=\\"ni-field-vote-dl\\">
+   <div class=\\"ni-field-vote-dt\\">
+      No
+   </div>
+<div class=\\"ni-field-vote-dd\\">
+   34%
+</div>
+</div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiFormGroup.spec.js.snap b/test/unit/specs/__snapshots__/NiFormGroup.spec.js.snap
new file mode 100644
index 0000000000..38d2cf11b5
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFormGroup.spec.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFormGroup has the expected html structure 1`] = `
+"<div class=\\"ni-form-group ni-form-group--error\\">
+   <label for=\\"sign-in-password\\" class=\\"ni-form-group__label\\">Sign In Password</label>
+   <div class=\\"ni-form-group__field\\">
+      <input value=\\"fake\\" class=\\"fake-field\\">
+   </div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiFormMsg.spec.js.snap b/test/unit/specs/__snapshots__/NiFormMsg.spec.js.snap
new file mode 100644
index 0000000000..3f27cc7e5b
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFormMsg.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFormMsg has the expected html structure 1`] = `
+"<div class=\\"ni-form-msg sm ni-form-msg--error\\">
+   Password must be between 16 and 255 characters
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiFormStruct.spec.js.snap b/test/unit/specs/__snapshots__/NiFormStruct.spec.js.snap
new file mode 100644
index 0000000000..581e86f0f8
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiFormStruct.spec.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiFormStruct has the expected html structure 1`] = `
+"<form class=\\"ni-form ni-form-narrow\\">
+   <div class=\\"ni-form-container\\">
+      <header class=\\"ni-form-header\\">
+         <div class=\\"ni-form-title\\">
+            <div class=\\"fake-title\\">
+               Fake Title
+            </div>
+</div>
+      <div class=\\"ni-form-subtitle\\">
+         <div class=\\"fake-subtitle\\">
+            Fake Subtitle
+         </div>
+</div>
+</header>
+   <main class=\\"ni-form-main\\">
+      <div class=\\"fake-fields\\"></div>
+</main>
+   <footer class=\\"ni-form-footer\\">
+      <div class=\\"fake-footer\\">
+         Fake Footer
+      </div>
+</footer>
+</div>
+</form>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiHardwareState.spec.js.snap b/test/unit/specs/__snapshots__/NiHardwareState.spec.js.snap
new file mode 100644
index 0000000000..ede7ef1e20
--- /dev/null
+++ b/test/unit/specs/__snapshots__/NiHardwareState.spec.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiHardwareState has the expected html structure 1`] = `
+"<div class=\\"ni-hardware-state\\">
+   <i class=\\"ni-hardware-state__icon material-icons fa-spin\\">rotate_right</i>
+   <div class=\\"ni-hardware-state__label\\">
+      Detecting your Ledger Wallet
+   </div>
+</div>"
+`;
diff --git a/test/unit/specs/__snapshots__/NiSessionRestore.spec.js.snap b/test/unit/specs/__snapshots__/NiSessionRestore.spec.js.snap
index a96da8d223..ba33ca9854 100644
--- a/test/unit/specs/__snapshots__/NiSessionRestore.spec.js.snap
+++ b/test/unit/specs/__snapshots__/NiSessionRestore.spec.js.snap
@@ -15,8 +15,8 @@ exports[`NiSessionRestore has the expected html structure 1`] = `
    </div>
       <div class=\\"ni-session-main\\">
          <div class=\\"ni-form-group\\">
-            <label for=\\"restore-name\\">Account Name</label>
-            <div class=\\"ni-form-group-field\\">
+            <label for=\\"restore-name\\" class=\\"ni-form-group__label\\">Account Name</label>
+            <div class=\\"ni-form-group__field\\">
                <input type=\\"text\\" placeholder=\\"at least 5 characters\\" class=\\"ni-field\\" id=\\"restore-name\\">
                <div class=\\"ni-form-msg ni-form-msg-error\\">
                   Name is required
@@ -25,8 +25,8 @@ exports[`NiSessionRestore has the expected html structure 1`] = `
    </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"restore-seed\\">Seed</label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"restore-seed\\" class=\\"ni-form-group__label\\">Seed</label>
+         <div class=\\"ni-form-group__field\\">
             <textarea class=\\"ni-field-seed ni-field\\" id=\\"restore-seed\\" placeholder=\\"must be exactly 12 words\\"></textarea>
             <div class=\\"ni-form-msg ni-form-msg-error\\">
                Seed is required
@@ -34,8 +34,8 @@ exports[`NiSessionRestore has the expected html structure 1`] = `
 </div>
 </div>
       <div class=\\"ni-form-group\\">
-         <label for=\\"restore-password\\">Password</label>
-         <div class=\\"ni-form-group-field\\">
+         <label for=\\"restore-password\\" class=\\"ni-form-group__label\\">Password</label>
+         <div class=\\"ni-form-group__field\\">
             <input type=\\"password\\" placeholder=\\"at least 10 characters\\" class=\\"ni-field\\" id=\\"restore-password\\">
             <div class=\\"ni-form-msg ni-form-msg-desc\\">
                Create a password to secure your restored account
diff --git a/test/unit/specs/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/__snapshots__/PageSend.spec.js.snap
index b855bca1f2..a538e04ac5 100644
--- a/test/unit/specs/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageSend.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageSend 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>Send</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\\"></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><form class=\\"ni-form\\"><div class=\\"ni-form-container\\"> <!----> <main class=\\"ni-form-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\\">Denomination Options</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-denomination\\">Denomination</label><div class=\\"ni-form-group-field\\"><div class=\\"ni-select\\" id=\\"send-denomination\\"><select class=\\"ni-field ni-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select token...</option><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><option value=\\"ATOM\\">ATOM</option><option value=\\"FERMION\\">FERMION</option></select><div class=\\"ni-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"ni-form-msg ni-form-msg-error\\">Denomination is required</div></div></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\\">Transaction Details</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-address\\">Send To</label><div class=\\"ni-form-group-field\\"><div class=\\"ni-field-group\\"><input type=\\"text\\" placeholder=\\"Address\\" class=\\"ni-field\\" id=\\"send-address\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Address is required</div><!----><!----></div></div><div class=\\"ni-form-group\\"><label for=\\"send-amount\\">Amount</label><div class=\\"ni-form-group-field\\"><div class=\\"ni-field-group\\"><input type=\\"number\\" placeholder=\\"Amount\\" class=\\"ni-field\\" id=\\"send-amount\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Amount is required</div><!----></div></div></main></div></section></main> <footer class=\\"ni-form-footer\\"><div><div></div><button class=\\"ni-btn\\"><span class=\\"ni-btn-container\\"><!----><span class=\\"ni-btn-value\\">Send Tokens</span></span></button></div></footer></div></form></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageSend 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>Send</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\\"></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><form class=\\"ni-form\\"><div class=\\"ni-form-container\\"><!----><main class=\\"ni-form-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\\">Denomination Options</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-denomination\\" class=\\"ni-form-group__label\\">Denomination</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-select\\" id=\\"send-denomination\\"><select class=\\"ni-field ni-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select token...</option><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><option value=\\"ATOM\\">ATOM</option><option value=\\"FERMION\\">FERMION</option></select><div class=\\"ni-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"ni-form-msg ni-form-msg-error\\">Denomination is required</div></div></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\\">Transaction Details</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-address\\" class=\\"ni-form-group__label\\">Send To</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-field-group\\"><input type=\\"text\\" placeholder=\\"Address\\" class=\\"ni-field\\" id=\\"send-address\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Address is required</div><!----><!----></div></div><div class=\\"ni-form-group\\"><label for=\\"send-amount\\" class=\\"ni-form-group__label\\">Amount</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-field-group\\"><input type=\\"number\\" placeholder=\\"Amount\\" class=\\"ni-field\\" id=\\"send-amount\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Amount is required</div><!----></div></div></main></div></section></main><footer class=\\"ni-form-footer\\"><div><div></div><button class=\\"ni-btn\\"><span class=\\"ni-btn-container\\"><!----><span class=\\"ni-btn-value\\">Send Tokens</span></span></button></div></footer></div></form></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
diff --git a/yarn.lock b/yarn.lock
index b8df7e9a4b..f8f0821de8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8312,9 +8312,9 @@ vue-template-es2015-compiler@^1.2.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue-test-utils@^1.0.0-beta.6:
-  version "1.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/vue-test-utils/-/vue-test-utils-1.0.0-beta.7.tgz#d53a07b3a9aaa93b58ddec496e0796f19ee5cfd8"
+vue-test-utils@^1.0.0-beta.8:
+  version "1.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/vue-test-utils/-/vue-test-utils-1.0.0-beta.8.tgz#b4f84ce36f7ae457cdbab9ba21771f4a50d4dabd"
   dependencies:
     lodash "^4.17.4"