diff --git a/CHANGELOG.md b/CHANGELOG.md
index 590cf9193e..ae9c955e86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 * Use persistent peers and seeds from tendermint config @faboweb
 * Updated loading icon and loading states @jolesbi
+* more components moved to `@tendermint/ui` @okwme
 * Removed COSMOS_MOCKED flag @faboweb
 * Improved readability and accessibility @jolesbi
 * Significant style and UI updates for dark and light themes @jolesbi
@@ -26,12 +27,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * Fixed bug in yarn build:gaia @zramsay
 * Increased version of localtestnet used for testing to match gaia @faboweb
 * Fixed padding issue in main container @faboweb
+* Unit tests work with new components @okwme
 * Wait for LCD to start serving at app startup to prevent timing errors @mappum
 * Fixed white flash on startup @okwme
 * Fixed critical dependency warning @okwme
 * Fixed theme bg bug @okwme
 * Fixed sorting bug on staking page @okwme
 
+### Added
+
+* Checking known nodes round robin and signaling an error if none are available @faboweb
+
 ## [0.7.0] - 2018-06-13
 
 ### Changes
diff --git a/app/networks/local/basecoindversion.txt b/app/networks/local/basecoindversion.txt
new file mode 100644
index 0000000000..b4b7a5789b
--- /dev/null
+++ b/app/networks/local/basecoindversion.txt
@@ -0,0 +1 @@
+0.18.0-dev-af15f895
diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
index 9f4b176182..8ebafecc56 100644
--- a/app/src/renderer/App.vue
+++ b/app/src/renderer/App.vue
@@ -9,7 +9,7 @@
       router-view
       app-footer
     modal-receive
-  notifications(:notifications='notifications' theme='cosmos')
+  tm-notifications(:notifications='notifications' theme='cosmos')
   modal-error(v-if='config.modals.error.active' :body='config.modals.error.message')
   modal-no-nodes(v-if='config.modals.nonodes.active')
   modal-lcd-approval(v-if='approvalRequired' :hash='approvalRequired')
@@ -19,14 +19,14 @@
 import { mapGetters } from "vuex"
 import AppHeader from "common/AppHeader"
 import AppFooter from "common/AppFooter"
-import Notifications from "@nylira/vue-notifications"
-import ModalError from "common/NiModalError"
-import ModalHelp from "common/NiModalHelp"
-import ModalLcdApproval from "common/NiModalLCDApproval"
-import ModalNoNodes from "common/NiModalNoNodes"
-import ModalReceive from "common/NiModalReceive"
-import Onboarding from "common/NiOnboarding"
-import Session from "common/NiSession"
+import { TmNotifications } from "@tendermint/ui"
+import ModalError from "common/TmModalError"
+import ModalHelp from "common/TmModalHelp"
+import ModalLcdApproval from "common/TmModalLCDApproval"
+import ModalNoNodes from "common/TmModalNoNodes"
+import ModalReceive from "common/TmModalReceive"
+import Onboarding from "common/TmOnboarding"
+import Session from "common/TmSession"
 import store from "./vuex/store"
 export default {
   name: "app",
@@ -37,8 +37,8 @@ export default {
     ModalHelp,
     ModalLcdApproval,
     ModalReceive,
+    TmNotifications,
     ModalNoNodes,
-    Notifications,
     Onboarding,
     Session
   },
diff --git a/app/src/renderer/components/common/AppFooter.vue b/app/src/renderer/components/common/AppFooter.vue
index e33337cf69..ec1686f9f3 100644
--- a/app/src/renderer/components/common/AppFooter.vue
+++ b/app/src/renderer/components/common/AppFooter.vue
@@ -3,7 +3,7 @@ footer.app-footer: connected-network
 </template>
 
 <script>
-import ConnectedNetwork from "common/NiConnectedNetwork"
+import ConnectedNetwork from "common/TmConnectedNetwork"
 export default {
   name: "app-footer",
   components: { ConnectedNetwork }
diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index 5cbb2ab43f..9d05e76d40 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -1,28 +1,28 @@
 <template lang="pug">
 menu.app-menu
   .app-menu-main
-    list-item#app-menu__wallet(
+    tm-list-item#app-menu__wallet(
       to="/"
       exact
       @click.native="close"
       title="Wallet")
-    list-item#app-menu__transactions(
+    tm-list-item#app-menu__transactions(
       to="/wallet/transactions"
       exact
       @click.native="close"
       title="Transactions"
       v-if="config.devMode || mockedConnector")
-    list-item#app-menu__staking(
+    tm-list-item#app-menu__staking(
       to="/staking"
       exact
       @click.native="close" title="Staking"
       v-bind:class="{ 'active': isValidatorPage }")
-    list-item#app-menu__proposals(
+    tm-list-item#app-menu__proposals(
       to="/proposals"
       exact @click.native="close"
       title="Proposals"
       v-if="config.devMode")
-    list-item#app-menu__blocks(
+    tm-list-item#app-menu__blocks(
       to="/blocks"
       exact
       @click.native="close"
@@ -35,18 +35,14 @@ menu.app-menu
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import noScroll from "no-scroll"
-import Btn from "@nylira/vue-button"
-import ConnectedNetwork from "common/NiConnectedNetwork"
-import ListItem from "common/NiListItem"
-import UserPane from "common/NiUserPane"
-import Part from "common/NiPart"
+import ConnectedNetwork from "common/TmConnectedNetwork"
+import { TmListItem } from "@tendermint/ui"
+import UserPane from "common/TmUserPane"
 export default {
   name: "app-menu",
   components: {
-    Btn,
     ConnectedNetwork,
-    ListItem,
-    Part,
+    TmListItem,
     UserPane
   },
   computed: {
@@ -90,15 +86,15 @@ export default {
     flex 1
     position relative // for perfect-scrollbar
 
-    .ni-li
+    .tm-li
       border-bottom 1px solid var(--bc-dim)
 
-  .ni-user
+  .tm-user
     border-top 1px solid var(--bc)
     padding 1rem
     display flex
 
-    .ni-user-info
+    .tm-user-info
       flex 1
       display flex
 
@@ -124,7 +120,7 @@ export default {
       font-size xs
       color var(--dim)
 
-    .ni-btn
+    .tm-btn
       margin-right 0.5rem
 
 @media screen and (max-width: 1023px)
@@ -141,6 +137,6 @@ export default {
   .app-menu
     flex 1
 
-    .ni-connected-network
+    .tm-connected-network
       display none
 </style>
diff --git a/app/src/renderer/components/common/NiBarDiscrete.vue b/app/src/renderer/components/common/NiBarDiscrete.vue
deleted file mode 100644
index d6a509e5e5..0000000000
--- a/app/src/renderer/components/common/NiBarDiscrete.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template lang='pug'>
-.ni-bar-discrete: .ni-bar-discrete__container
-  .ni-bar-discrete__edge
-  .ni-bar-discrete__node(
-    v-for="(node, key) in nodes"
-    :key="key"
-    @click="clickFn(key)"
-    v-bind:class="classObject(key)")
-</template>
-
-<script>
-export default {
-  name: "ni-bar-discrete",
-  methods: {
-    classObject(key) {
-      return {
-        "ni-bar-discrete__node--active": key === this.active
-      }
-    }
-  },
-  props: ["nodes", "active", "click-fn"]
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-bar-discrete
-  padding 0 3rem
-  width 100%
-  max-width 24rem
-  margin 0 auto
-
-.ni-bar-discrete__container
-  height 2rem
-  display flex
-  align-items center
-  justify-content space-between
-  position relative
-
-.ni-bar-discrete__edge
-  position absolute
-  top 50%
-  left 0
-  right 0
-  content ''
-  height 2px
-  background var(--bc)
-
-.ni-bar-discrete__node
-  position relative
-  z-index 2
-  width 1rem
-  height 1rem
-  border 0.125rem solid var(--dim)
-  border-radius 0.5rem
-  background var(--app-bg)
-
-  &:hover
-    cursor pointer
-    border-color var(--hover)
-
-  &:before
-    content ''
-    position absolute
-    top 0.125rem
-    left 0.125rem
-    width 0.5rem
-    height 0.5rem
-    border-radius 0.5rem
-    background transparent
-
-  &:hover:before
-    background var(--hover)
-
-  &.ni-bar-discrete__node--active
-    border-color var(--mc)
-  &.ni-bar-discrete__node--active:before
-    background var(--mc)
-</style>
diff --git a/app/src/renderer/components/common/NiDataMsg.vue b/app/src/renderer/components/common/NiDataMsg.vue
deleted file mode 100644
index b107f7c27c..0000000000
--- a/app/src/renderer/components/common/NiDataMsg.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template lang="pug">
-.ni-data-msg
-  .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>
-export default {
-  name: "ni-data-msg",
-  computed: {
-    iconCssClass() {
-      if (this.spin) {
-        return "fa-spin"
-      }
-    }
-  },
-  props: ["title", "subtitle", "icon", "spin"]
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-data-msg
-  background var(--app-bg-light)
-  padding 1rem
-  border-radius 2px
-
-.ni-data-msg__icon
-  margin-bottom 0.5rem
-  display: flex;
-  align-items: center;
-  i.material-icons
-    font-size 3rem
-    color var(--txt)
-
-.ni-data-msg__text
-  max-width 30rem
-
-.ni-data-msg__title
-  color var(--txt)
-  font-size h2
-
-.ni-data-msg__subtitle
-  color var(--dim)
-
-@media screen and (min-width: 768px)
-  .ni-data-msg
-    display flex
-    padding 3rem
-
-  .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/NiFieldGroup.vue b/app/src/renderer/components/common/NiFieldGroup.vue
deleted file mode 100644
index a519bfd693..0000000000
--- a/app/src/renderer/components/common/NiFieldGroup.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template lang="pug">
-.ni-field-group: slot
-</template>
-
-<script>
-export default { name: "ni-field-group" }
-</script>
-
-<style lang="stylus">
-@import '~variables'
-
-.ni-field-group
-  display flex
-  position relative
-
-  .ni-field
-    flex 1
-
-  .ni-field, .ni-btn-wrapper
-    margin 0
-
-  .ni-btn-wrapper
-    max-width 15rem
-
-  .ni-field + .ni-btn-wrapper
-    margin-left 1rem
-
-  .ni-btn-wrapper + .ni-field
-    margin-left 1rem
-</style>
diff --git a/app/src/renderer/components/common/NiFormGroup.vue b/app/src/renderer/components/common/NiFormGroup.vue
deleted file mode 100644
index 183c451981..0000000000
--- a/app/src/renderer/components/common/NiFormGroup.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template lang='pug'>
-div(:class='cssClass')
-  span.ni-form-group__sub-label(v-if="subLabel")
-    | {{ subLabel }}
-  label.ni-form-group__label(:for='fieldId' v-if="fieldId && fieldLabel")
-    | {{ fieldLabel }}
-  .ni-form-group__field: slot
-</template>
-
-<script>
-export default {
-  name: "ni-form-group",
-  computed: {
-    cssClass() {
-      let value = "ni-form-group"
-      if (this.error) value += " ni-form-group--error"
-      return value
-    }
-  },
-  props: ["error", "field-id", "field-label", "sub-label"]
-}
-</script>
-
-<style lang="stylus">
-@import '~variables'
-.ni-form-group
-  padding 0.5rem 1rem
-  position relative
-
-  &:last-child
-    border-bottom none
-
-  input
-    width 100%
-
-  .ni-form-msg--error
-    display none
-
-  &__sub-label
-    position absolute
-    bottom 0.5rem
-    left 1rem
-    font-size xs
-    color var(--dim)
-
-  .ni-field:focus
-    border-color var(--mc)
-
-.ni-form-group__sub-label ~ .ni-form-group__label
-  line-height 1rem
-
-.ni-form-group--error
-  .ni-field, .ni-select
-    border-color danger
-
-  .ni-form-msg--error
-    display flex
-
-.ni-form-group__label
-  display block
-  line-height 1.75rem
-  color var(--dim)
-  font-size sm
-
-@media (min-width: 768px)
-  .ni-form-group
-    display flex
-
-  .ni-form-group__label
-    flex 0 0 16rem
-
-  .ni-form-group__field
-    flex 1
-
-    > .ni-field
-    > .ni-field-group
-      width 100%
-</style>
diff --git a/app/src/renderer/components/common/NiFormMsg.vue b/app/src/renderer/components/common/NiFormMsg.vue
deleted file mode 100644
index b0a14057d3..0000000000
--- a/app/src/renderer/components/common/NiFormMsg.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template lang='pug'>
-div(:class='cssClass')
-  template(v-if='name') {{ name }} {{ error }}
-  slot(v-else='')
-</template>
-
-<script>
-export default {
-  computed: {
-    cssClass() {
-      let value = "ni-form-msg sm"
-      if (this.type) {
-        value += " ni-form-msg--error"
-      } else {
-        value += " ni-form-msg--desc"
-      }
-      return value
-    },
-    error() {
-      let msg = ""
-      switch (this.type) {
-        case "alphaNum":
-          msg = "must contain only alphanumeric characters"
-          break
-        case "numeric":
-          msg = "must contain only numerals"
-          break
-        case "between":
-          msg = `must be between ${this.min} and ${this.max}`
-          break
-        case "date":
-          msg = `must be a valid date`
-          break
-        case "datetime":
-          msg = `must be a valid date and time`
-          break
-        case "exactLength":
-          msg = `must be exactly ${this.length} characters`
-          break
-        case "ipAddress":
-          msg = "must be a valid IPv4 or IPv6 address"
-          break
-        case "length":
-          msg = `must be between ${this.min} and ${this.max} characters`
-          break
-        case "minLength":
-          msg = `must be longer than ${this.min} characters`
-          break
-        case "match":
-          msg = "must match"
-          break
-        case "maxLength":
-          msg = `must be shorter than ${this.max} characters`
-          break
-        case "required":
-          msg = "is required"
-          break
-        case "words16":
-          msg = "phrase must be 16 words"
-          break
-        case "url":
-          msg = "must be a valid URL (http:// required)"
-          break
-        case "bech32":
-          msg = "is invalid (" + this.body + ")"
-          break
-        default:
-          msg = "must be valid"
-          break
-      }
-      return msg
-    }
-  },
-  props: ["type", "body", "name", "min", "max", "length"]
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-form-msg
-  line-height 1.75rem
-  display flex
-  margin 0 !important
-
-  &.sm
-    font-size xs
-
-.ni-form-msg:before
-  content ''
-  font-family 'Material Icons'
-  padding-right 0.35rem
-
-.ni-form-msg.ni-form-msg--error
-  color var(--danger)
-
-.ni-form-msg.ni-form-msg--error:before
-  content 'error'
-  color var(--danger)
-
-.ni-form-msg.ni-form-msg--desc
-  color var(--warning)
-
-.ni-form-msg.ni-form-msg--desc:before
-  content 'priority_high'
-  color var(--warning)
-</style>
diff --git a/app/src/renderer/components/common/NiFormStruct.vue b/app/src/renderer/components/common/NiFormStruct.vue
deleted file mode 100644
index 3f731b8212..0000000000
--- a/app/src/renderer/components/common/NiFormStruct.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<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>
-// NOTICE
-// Remember that v-on:submit will NOT work on this component
-// Use :submit="onSubmit on the parent component and it'll save you headaches
-export default {
-  name: "ni-form-struct",
-  computed: {
-    cssClass() {
-      let value = "ni-form"
-      if (this.width === "narrow") value += " ni-form-narrow"
-      return value
-    },
-    hasHeader() {
-      return this.$slots["title"] || this.$slots["subtitle"]
-    },
-    hasFooter() {
-      return this.$slots["footer"]
-    }
-  },
-  props: ["width", "submit"]
-}
-</script>
-
-<style lang="stylus">
-@import '~variables'
-
-.ni-form
-  display flex
-  position relative
-  width width-main
-
-.ni-form-container
-  flex 1
-  display flex
-  flex-flow column
-  position relative
-
-.ni-form-header
-.ni-form-title
-.ni-form-subtitle
-.ni-form-main
-.ni-form-footer
-  &:empty
-    display none
-
-.ni-form-main
-  flex 1
-
-.ni-form-header
-  display flex
-  flex-flow column nowrap
-  border-bottom px solid var(--bc)
-  position relative
-  padding 1rem 0
-
-.ni-form-title
-  line-height 1rem
-  color var(--txt)
-
-.ni-form-subtitle
-  color var(--dim)
-  font-size sm
-  line-height 1rem
-
-.ni-form-footer
-  > div
-    padding 1rem 1rem 1rem - px
-    display flex
-    justify-content space-between
-    align-items center
-
-    > *:not(:last-child)
-      margin-right 1rem
-
-@media screen and (min-width: 480px)
-  .ni-form-title
-    line-height 1.5rem
-    margin-bottom 0.5rem
-
-  .ni-form-subtitle
-    font-size m
-
-  .ni-form-main
-    p
-      margin 1rem 1rem 0
-</style>
diff --git a/app/src/renderer/components/common/NiListItem.vue b/app/src/renderer/components/common/NiListItem.vue
deleted file mode 100644
index 8afd468fa6..0000000000
--- a/app/src/renderer/components/common/NiListItem.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<template lang="pug">
-mixin ni-li-thumb
-  .ni-li-thumb
-    template(v-if='icon'): i.material-icons(:class="spinClass") {{ icon }}
-    template(v-else-if='image'): img(:src='image')
-    template(v-else-if="$slots['graphic']"): slot(name='graphic')
-mixin ni-li-dl
-  .ni-li-dl
-    .ni-li-dt {{ dt }}
-    .ni-li-dd.ni-li-dd-flush(v-if="$slots['dd']"): slot(name='dd')
-    .ni-li-dd(v-else) {{ dd }}
-mixin ni-li-icon
-  .ni-li-icon
-    i.material-icons.inactive chevron_right
-    i.material-icons.active my_location
-mixin ni-li-label
-  .ni-li-label
-    .ni-li-title {{ title }}
-    .ni-li-subtitle {{ subtitle }}
-transition(name="proposal")
-  //- dt/dd anchor
-  a.ni-li.ni-li-link(v-if='dt && href' :href="href"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-    +ni-li-icon
-
-  //- label and input
-  .ni-li.ni-li-field(v-else-if="type === 'field'"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    .ni-li-input: slot
-
-  //- dt/dd router-link
-  router-link.ni-li.ni-li-link(v-else-if="dt && to && !btn" :to="to"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-    +ni-li-icon
-
-  //- button router-link
-  router-link.ni-li.ni-li-link(v-else-if="btn && to" :to="to"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-    btn(:value="btn" icon="chevron_right" icon-pos="right" color="primary")
-
-  //- dt/dd text
-  .ni-li(v-else-if='dt'): .ni-li-container
-    +ni-li-thumb
-    +ni-li-dl
-
-  //- title/subtitle anchor
-  a.ni-li.ni-li-link(v-else-if="href" :href="href"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    +ni-li-icon
-
-  //- title/subtitle router-link
-  router-link.ni-li.ni-li-link(v-else-if="to" :to='to'): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    +ni-li-icon
-
-  //- button receive
-  .ni-li.ni-li-receive(v-else-if="title && btn && !to"): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-    btn-receive
-
-  //- title/subtitle text
-  .ni-li(v-else-if='title'): .ni-li-container
-    +ni-li-thumb
-    +ni-li-label
-
-  //- image
-  .ni-li(v-else-if="type === 'image'"): .ni-li-container: slot
-</template>
-
-<script>
-import Btn from "@nylira/vue-button"
-import BtnReceive from "common/NiBtnReceive"
-export default {
-  name: "ni-list-item",
-  props: [
-    "type",
-    "title",
-    "subtitle",
-    "image",
-    "icon",
-    "to",
-    "dt",
-    "dd",
-    "href",
-    "btn",
-    "spin",
-    "overflow"
-  ],
-  components: { Btn, BtnReceive },
-  computed: {
-    spinClass() {
-      if (this.spin) {
-        return "fa-spin"
-      }
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-li
-  display block
-  min-height 3rem
-  position relative
-  border-bottom 1px solid var(--bc-light)
-
-  &:last-child
-    border-bottom 1px solid transparent
-
-  &.ni-li-link
-    &:hover
-      background var(--hover-bg)
-
-      .ni-li-label
-        cursor pointer
-
-      .ni-li-title
-        color var(--txt)
-
-    &:before
-      content ''
-      display block
-      position absolute
-      top 0
-      left 0
-      height 100%
-      width bw
-      background transparent
-      z-index z(listItem)
-
-    .ni-li-dt, .ni-li-dd
-      color var(--link)
-
-  &.router-link-exact-active
-    .ni-li-title
-      color var(--txt)
-
-    &:before
-      background var(--mc)
-
-    .ni-li-icon
-      i.material-icons
-        color var(--mc)
-
-.ni-li-label, .ni-li-dl
-  .ni-btn
-    position absolute
-    top 0.5rem - px
-    right 1rem
-
-.ni-li-container
-  display flex
-  flex-flow row nowrap
-  align-items center
-  position relative
-  padding 0 1rem;
-  min-height 3rem - 2 * px
-  height 100%
-  border-radius 2px
-
-.ni-li-receive:hover
-  cursor copy
-
-// type: anchor & link
-.ni-li-thumb, .ni-li-label, .ni-li-icon
-  min-height 3rem - 2 * px
-  height 100%
-
-.ni-li-thumb:empty
-  display none
-
-.ni-li-thumb
-  width 3rem - px
-
-  i.material-icons
-    display block
-    width 3rem - px
-    height 3rem - px
-    display flex
-    align-items center
-    justify-content center
-    color var(--txt)
-
-.ni-li-label
-  flex 1
-  display flex
-  align-items flex-start
-  justify-content center
-  flex-flow column nowrap
-  overflow hidden
-
-  .ni-li-title
-    color var(--txt)
-    line-height 1.25
-    text-overflow ellipsis
-    max-width 100%
-    white-space nowrap
-    overflow hidden
-
-  .ni-li-subtitle
-    color var(--dim)
-    font-size xs
-    line-height 1.25
-
-.ni-li-link
-  .ni-li-label
-    padding 0 1rem 0 0
-
-// type: field
-.ni-li-field .ni-li-container
-  display flex
-
-  .ni-li-label
-    flex 2
-
-  .ni-li-input
-    flex 1
-    display flex
-
-    .ni-btn
-      flex 1
-
-    .ni-select
-      width 100%
-
-// type: dl definition list
-.ni-li-dl
-  flex 1
-  display flex
-  align-items center
-  // truncate
-  min-width 0
-
-.ni-li-dt, .ni-li-dd
-  // truncate
-  white-space nowrap
-  text-overflow ellipsis
-  overflow hidden
-  color var(--txt)
-
-.ni-li-dt, .ni-li-dd
-  &:empty
-    display none
-
-.no-overflow
-  .ni-li-dt, .ni-li-dd
-    overflow visible
-
-.ni-li-dt
-  max-width width-side
-  flex 2
-
-.ni-li-dd
-  padding-left 0.25rem
-  padding-right 0.5rem
-  flex 3
-  line-height 1.25
-
-  &.ni-li-dd-flush
-    padding 0
-
-  &.ni-li-dd-flush > div
-    display flex
-    height 3rem - px
-
-a.ni-li-dd
-  color var(--mc)
-  cursor pointer
-
-.ni-li-icon
-  width 1.5rem
-  display flex
-  align-items center
-  position absolute
-  top 0
-  right 0
-
-  .inactive
-    display block
-
-  .active
-    display none
-</style>
diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue
deleted file mode 100644
index a33325bb55..0000000000
--- a/app/src/renderer/components/common/NiPage.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template lang="pug">
-.ni-page
-  page-header(:icon='icon')
-    h2(slot='title') {{ title }}
-    h3(slot='subtitle') {{ subtitle }}
-    div(slot="menu"): slot(name="menu")
-  main.ni-page-main: slot
-</template>
-
-<script>
-import { mapGetters } from "vuex"
-import PerfectScrollbar from "perfect-scrollbar"
-import PageHeader from "common/NiPageHeader"
-import PageFooter from "common/NiPageFooter"
-export default {
-  name: "ni-page",
-  props: ["title", "subtitle", "icon"],
-  components: {
-    PageHeader,
-    PageFooter
-  },
-  computed: { ...mapGetters(["config"]) },
-  data: () => ({ ps: "" }),
-  async mounted() {
-    await this.$nextTick()
-    const container = this.$el.querySelector(".ni-page-main")
-    this.ps = new PerfectScrollbar(container)
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-page
-  flex 1
-  display flex
-  flex-flow column nowrap
-  position relative
-
-.ni-page-main
-  flex 1
-  position relative
-
-.ni-page-title
-  color var(--txt)
-  font-size h2
-  padding 0.5rem 1rem 1rem
-
-.ni-page-subtitle > div
-  color var(--dim)
-  font-size sm
-
-@media screen and (min-width: 768px)
-  .ni-page-main
-    padding 1rem
-</style>
diff --git a/app/src/renderer/components/common/NiPageFooter.vue b/app/src/renderer/components/common/NiPageFooter.vue
deleted file mode 100644
index bfaf116ffb..0000000000
--- a/app/src/renderer/components/common/NiPageFooter.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template lang='pug'>
-footer.ni-page-footer
-  .container
-    slot
-</template>
-
-<script>
-export default { name: "ni-page-footer" }
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-page-footer
-  .container
-    border-top px solid var(--bc)
-    height 3rem
-    display flex
-    align-items center
-
-    padding 0 1rem
-    &:empty
-      display none
-</style>
diff --git a/app/src/renderer/components/common/NiPageHeader.vue b/app/src/renderer/components/common/NiPageHeader.vue
deleted file mode 100644
index 7d4f6a904a..0000000000
--- a/app/src/renderer/components/common/NiPageHeader.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template lang='pug'>
-header.ni-page-header
-  .ni-page-header-container
-    .ni-page-header-text
-      .ni-page-header-title
-        slot(name='title')
-      .ni-page-header-subtitle
-        slot(name='subtitle')
-    menu.ni-page-header-menu
-      slot(name="menu")
-</template>
-
-<script>
-export default { name: "ni-page-header" }
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-page-header
-  -webkit-app-region drag
-
-.ni-page-header-title
-  font-size xl
-  > div
-    display inline-block
-
-.ni-page-header-container
-  display flex
-  align-items center
-  justify-content space-between
-  padding 2rem 1rem 0 2rem
-
-.ni-page-header-text
-  flex 1
-  display flex
-  min-width 0 // fix truncation
-  align-items: center
-
-  i.material-icons
-    font-size 1.375 * x
-    padding-right 0.375rem
-
-  > div
-    white-space nowrap
-    overflow hidden
-    text-overflow ellipsis
-
-  h2
-    font-size xxl
-    font-weight 400
-    color var(--txt)
-
-@media screen and (min-width: 1024px)
-  .ni-page-header
-    border-bottom-color var(--bc)
-
-  .ni-page-header-container
-    display flex
-
-  .ni-page-header-menu
-    display flex
-    align-items center
-</style>
diff --git a/app/src/renderer/components/common/NiSessionLoading.vue b/app/src/renderer/components/common/NiSessionLoading.vue
deleted file mode 100644
index 5819068198..0000000000
--- a/app/src/renderer/components/common/NiSessionLoading.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template lang="pug">
-.ni-session: .ni-session-container
-  .ni-session-header
-    .ni-session-title Voyager is loading&hellip;
-  .ni-session-main.ni-session-main--loading
-    img(src="~assets/images/loader.svg")
-
-</template>
-
-<script>
-export default { name: "ni-session-loading" }
-</script>
-
-<style lang="stylus">
-.ni-session-main--loading
-  display flex
-  justify-content center
-</style>
diff --git a/app/src/renderer/components/common/NiTabBar.vue b/app/src/renderer/components/common/NiTabBar.vue
deleted file mode 100644
index d9b5d1f394..0000000000
--- a/app/src/renderer/components/common/NiTabBar.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template lang="pug">
-.ni-tab-bar
-  .ni-tab-bar-container: slot
-</template>
-
-<script>
-export default { name: "ni-tab-bar" }
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-tab-bar-container
-  display flex
-  align-items center
-
-  background var(--app-fg)
-  border-bottom px solid var(--bc)
-
-  a
-    height 2rem - px
-    display block
-    padding 0 1rem
-
-    display flex
-    align-items center
-    justify-content center
-
-    border-right px solid var(--bc)
-
-    font-size sm
-    color var(--link)
-
-    &:last-of-type
-      border-right none
-
-    &.router-link-active
-      color var(--txt)
-      background var(--app-bg)
-
-    i.material-icons
-      font-size xl
-</style>
diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue
deleted file mode 100644
index 35d704f94e..0000000000
--- a/app/src/renderer/components/common/NiToolBar.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template lang="pug">
-.ni-tool-bar
-  .ni-tool-bar-container
-    .main: slot
-    a.back(@click="$router.go(-1)" v-tooltip.bottom="'Back'")
-      i.material-icons arrow_back
-    a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
-      i.material-icons help_outline
-    a.sign-out(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
-      i.material-icons exit_to_app
-</template>
-
-<script>
-export default {
-  name: "ni-tool-bar",
-  methods: {
-    enableModalHelp() {
-      this.$store.commit("setModalHelp", true)
-    },
-    signOut() {
-      this.$store.dispatch("signOut")
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-@require '~variables'
-
-.ni-tool-bar-container
-  display flex
-
-  .main
-    flex 1
-    display flex
-    align-items center
-
-  a, i.material-icons
-    display flex
-    align-items center
-    justify-content center
-
-  a
-    padding 0.5rem
-    border-radius 2px
-
-    user-select none
-    cursor pointer
-
-    display flex
-    align-items center
-    justify-content center
-    position relative
-
-    i
-      color var(--txt)
-
-    i
-      font-size lg
-
-    &.router-link-active
-      i
-        color var(--txt)
-
-    &:hover:not([disabled])
-      background var(--hover-bg)
-      i
-        color var(--txt)
-
-    &[disabled]
-      cursor default
-      i
-        color var(--dim)
-
-@media screen and (max-width: 1023px)
-  .ni-tool-bar
-    z-index z(toolBar)
-    position fixed
-    bottom 0
-    left 0
-    right 0
-
-  .ni-tool-bar-container
-    background var(--app-bg-alpha)
-    height 3rem + px
-    border-top px solid var(--bc)
-
-  .ni-page
-    padding-bottom 3rem
-
-@media screen and (min-width: 1024px)
-  .ni-tool-bar-container
-    .main
-      justify-content flex-end
-</style>
diff --git a/app/src/renderer/components/common/Page404.vue b/app/src/renderer/components/common/Page404.vue
index 6c93badca7..d1a790b3f6 100644
--- a/app/src/renderer/components/common/Page404.vue
+++ b/app/src/renderer/components/common/Page404.vue
@@ -1,20 +1,18 @@
 <template lang="pug">
-page(title='404 - Page Not Found')
-  part(title='Try another page...')
-    list-item(to='/' title='Balances')
-    list-item(to='/staking' title='Staking')
+tm-page(title='404 - Page Not Found')
+  tm-part(title='Try another page...')
+    tm-list-item(to='/' title='Balances')
+    tm-list-item(to='/staking' title='Staking')
 </template>
 
 <script>
-import ListItem from "common/NiListItem"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-404",
   components: {
-    ListItem,
-    Page,
-    Part
+    TmListItem,
+    TmPage,
+    TmPart
   }
 }
 </script>
diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
index af69cdd02e..3360f8d795 100644
--- a/app/src/renderer/components/common/PagePreferences.vue
+++ b/app/src/renderer/components/common/PagePreferences.vue
@@ -1,31 +1,31 @@
 <template lang="pug">
-page(title="Preferences")
+tm-page(title="Preferences")
   div(slot="menu"): tool-bar
 
-  part(title='Settings')
-    list-item(type="field" title="Select network to connect to")
-      field#select-network(
+  tm-part(title='Settings')
+    tm-list-item(type="field" title="Select network to connect to")
+      tm-field#select-network(
         type="select"
         v-model="networkSelectActive"
         :options="networkSelectOptions"
         placeholder="Select network..."
         @change.native="setMockedConnector")
-    list-item(type="field" title="Select theme")
-      field#select-theme(
+    tm-list-item(type="field" title="Select theme")
+      tm-field#select-theme(
         type="select"
         v-model="themeSelectActive"
         :options="themeSelectOptions"
         placeholder="Select theme..."
         @change.native="setAppTheme")
-    list-item(type="field" title="View tutorial for Voyager")
-      btn#toggle-onboarding(
+    tm-list-item(type="field" title="View tutorial for Voyager")
+      tm-btn#toggle-onboarding(
         @click.native="setOnboarding"
         value="Launch Tutorial"
         icon="open_in_new")
-    list-item(type="field"
+    tm-list-item(type="field"
       title="Automatically send usage statistics and crash reports"
       subtitle="to the Voyager development team")
-      field(
+      tm-field(
         type="toggle"
         :style="{margin:'1em auto 0 auto'}"
         :options=`{
@@ -34,9 +34,9 @@ page(title="Preferences")
           }`
         :value="user.errorCollection || undefined"
         @change.native="setErrorCollection")
-  part(title='Account')
-    list-item(type="field" title="Switch account")
-      btn(
+  tm-part(title='Account')
+    tm-list-item(type="field" title="Switch account")
+      tm-btn(
         icon='exit_to_app'
         type='button'
         @click.native="signOut"
@@ -45,20 +45,17 @@ page(title="Preferences")
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import ListItem from "common/NiListItem"
-import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
+import ToolBar from "common/TmToolBar"
+
 export default {
   name: "page-preferences",
   components: {
-    Btn,
-    Field,
-    ListItem,
-    Page,
-    Part,
+    TmBtn,
+    TmField,
+    TmListItem,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/common/NiBtnCopy.vue b/app/src/renderer/components/common/TmBtnCopy.vue
similarity index 90%
rename from app/src/renderer/components/common/NiBtnCopy.vue
rename to app/src/renderer/components/common/TmBtnCopy.vue
index 6acb6a9dd3..8ed3bf4cab 100644
--- a/app/src/renderer/components/common/NiBtnCopy.vue
+++ b/app/src/renderer/components/common/TmBtnCopy.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-btn.btn-copy(
+tm-btn.btn-copy(
   icon="content_copy"
   @click.native="click"
   value="Copy")
@@ -7,9 +7,9 @@ btn.btn-copy(
 
 <script>
 import { clipboard } from "electron"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
-  components: { Btn },
+  components: { TmBtn },
   computed: {
     notifyTitle() {
       if (this.title) return this.title
diff --git a/app/src/renderer/components/common/NiBtnReceive.vue b/app/src/renderer/components/common/TmBtnReceive.vue
similarity index 78%
rename from app/src/renderer/components/common/NiBtnReceive.vue
rename to app/src/renderer/components/common/TmBtnReceive.vue
index 886fbfbfbf..2b9146ff0e 100644
--- a/app/src/renderer/components/common/NiBtnReceive.vue
+++ b/app/src/renderer/components/common/TmBtnReceive.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-btn.btn-receive(
+tm-btn.btn-receive(
   @click.native.stop="openModal"
   value="Receive"
   icon="file_download"
@@ -9,9 +9,9 @@ btn.btn-receive(
 
 <script>
 import { clipboard } from "electron"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
-  components: { Btn },
+  components: { TmBtn },
   methods: {
     openModal() {
       this.$store.commit("setModalReceive", true)
diff --git a/app/src/renderer/components/common/NiConnectedNetwork.vue b/app/src/renderer/components/common/TmConnectedNetwork.vue
similarity index 69%
rename from app/src/renderer/components/common/NiConnectedNetwork.vue
rename to app/src/renderer/components/common/TmConnectedNetwork.vue
index 67c2e3f9ec..0df681132c 100644
--- a/app/src/renderer/components/common/NiConnectedNetwork.vue
+++ b/app/src/renderer/components/common/TmConnectedNetwork.vue
@@ -1,33 +1,31 @@
 <template lang='pug'>
-.ni-connected-network#ni-connected-network(v-if='connected' :class="cssClass")
-  .ni-connected-network__connection
-    .ni-connected-network__icon#ni-connected-network__icon: i.material-icons wifi
-    .ni-connected-network__string#ni-connected-network__string
+.tm-connected-network#tm-connected-network(v-if='connected' :class="cssClass")
+  .tm-connected-network__connection
+    .tm-connected-network__icon#tm-connected-network__icon: i.material-icons wifi
+    .tm-connected-network__string#tm-connected-network__string
       span.desktop-only Connected to
       span.chain-id(v-tooltip.top="networkTooltip")  {{ chainId }}
       |  via #[span {{ nodeAddress }}]
-      router-link#ni-connected-network_preferences-link.desktop-only(to="/preferences" @click.native="closeMenu" v-if="!onPreferencesPage")
+      router-link#tm-connected-network_preferences-link.desktop-only(to="/preferences" @click.native="closeMenu" v-if="!onPreferencesPage")
         |  (change network)
-  .ni-connected-network__string#ni-connected-network__block
+  .tm-connected-network__string#tm-connected-network__block
     span.desktop-only Current Block:
     router-link(to="/blocks" v-tooltip.top="'View Block'")  {{ blockHeight }}
-.ni-connected-network.ni-disconnected-network#ni-disconnected-network(v-else)
-  .ni-connected-network__icon: i.material-icons.fa-spin rotate_right
-  .ni-connected-network__string Connecting to network&hellip;
+.tm-connected-network.tm-disconnected-network#tm-disconnected-network(v-else)
+  .tm-connected-network__icon: i.material-icons.fa-spin rotate_right
+  .tm-connected-network__string Connecting to network&hellip;
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import ListItem from "common/NiListItem"
 import num from "scripts/num"
 export default {
-  name: "ni-connected-network",
-  components: { ListItem },
+  name: "tm-connected-network",
   computed: {
     ...mapGetters(["lastHeader", "nodeIP", "connected", "mockedConnector"]),
     cssClass() {
       if (this.mockedConnector) {
-        return "ni-connected-network--mocked"
+        return "tm-connected-network--mocked"
       }
     },
     networkTooltip() {
@@ -72,7 +70,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-connected-network
+.tm-connected-network
   font-size 0.75rem
   background var(--app-bg-light)
   color var(--dim)
@@ -85,7 +83,7 @@ export default {
   a, .chain-id
     font-weight 500
 
-.ni-connected-network__icon
+.tm-connected-network__icon
   background var(--success-bc)
   padding 0.5rem
   display flex
@@ -94,20 +92,20 @@ export default {
   color var(--txt)
   border-radius 2px
 
-.ni-connected-network__string
+.tm-connected-network__string
   padding 0 1em
   line-height 2rem
 
-.ni-connected-network--mocked
-  .ni-connected-network__icon
+.tm-connected-network--mocked
+  .tm-connected-network__icon
     background var(--warning)
 
   .chain-id
     color var(--warning)
 
-.ni-connected-network__connection
+.tm-connected-network__connection
   display flex
 
-.ni-disconnected-network
+.tm-disconnected-network
   justify-content start
 </style>
diff --git a/app/src/renderer/components/common/NiDataEmpty.vue b/app/src/renderer/components/common/TmDataEmpty.vue
similarity index 68%
rename from app/src/renderer/components/common/NiDataEmpty.vue
rename to app/src/renderer/components/common/TmDataEmpty.vue
index aa92f46afe..74a4c1692a 100644
--- a/app/src/renderer/components/common/NiDataEmpty.vue
+++ b/app/src/renderer/components/common/TmDataEmpty.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-data-msg(icon="info_outline")
+tm-data-msg(icon="info_outline")
   h4(v-if="title" slot="title") {{ title }}
   h4(v-else slot="title") N/A
 
@@ -8,10 +8,10 @@ data-msg(icon="info_outline")
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-empty",
+  name: "tm-data-empty",
   props: ["title", "subtitle"],
-  components: { DataMsg }
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataEmptySearch.vue b/app/src/renderer/components/common/TmDataEmptySearch.vue
similarity index 57%
rename from app/src/renderer/components/common/NiDataEmptySearch.vue
rename to app/src/renderer/components/common/TmDataEmptySearch.vue
index c4cc2883ac..ff4b8c0e51 100644
--- a/app/src/renderer/components/common/NiDataEmptySearch.vue
+++ b/app/src/renderer/components/common/TmDataEmptySearch.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-data-msg(icon="search")
+tm-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"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-empty-search",
-  components: { DataMsg }
+  name: "tm-data-empty-search",
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataEmptyTx.vue b/app/src/renderer/components/common/TmDataEmptyTx.vue
similarity index 68%
rename from app/src/renderer/components/common/NiDataEmptyTx.vue
rename to app/src/renderer/components/common/TmDataEmptyTx.vue
index 6e18512583..cb85192ba7 100644
--- a/app/src/renderer/components/common/NiDataEmptyTx.vue
+++ b/app/src/renderer/components/common/TmDataEmptyTx.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-data-msg(icon="info_outline")
+tm-data-msg(icon="info_outline")
   div(slot="title") No Transaction History
   div(slot="subtitle") Looks like you haven't sent or received any transactions yet. Head over to #[router-link(:to="{ name: 'send' }") Send] to make your first transaction!
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-empty-tx",
-  components: { DataMsg }
+  name: "tm-data-empty-tx",
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataError.vue b/app/src/renderer/components/common/TmDataError.vue
similarity index 69%
rename from app/src/renderer/components/common/NiDataError.vue
rename to app/src/renderer/components/common/TmDataError.vue
index 76bb1b7263..13434531ea 100644
--- a/app/src/renderer/components/common/NiDataError.vue
+++ b/app/src/renderer/components/common/TmDataError.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-data-msg(icon="sentiment_very_dissatisfied")
+tm-data-msg(icon="sentiment_very_dissatisfied")
   div(slot="title") Aw shucks!
   div(slot="subtitle") 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/voyager/issues") file a bug report]. Apologies!
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-error",
-  components: { DataMsg }
+  name: "tm-data-error",
+  components: { TmDataMsg }
 }
 </script>
diff --git a/app/src/renderer/components/common/NiDataLoading.vue b/app/src/renderer/components/common/TmDataLoading.vue
similarity index 62%
rename from app/src/renderer/components/common/NiDataLoading.vue
rename to app/src/renderer/components/common/TmDataLoading.vue
index ef0b41342c..d1647155a7 100644
--- a/app/src/renderer/components/common/NiDataLoading.vue
+++ b/app/src/renderer/components/common/TmDataLoading.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-data-msg(icon="rotate_right" spin="true")
+tm-data-msg(icon="rotate_right" spin="true")
   div(slot="title") {{ title }}
   div(slot="subtitle") Please wait a moment.
 </template>
 
 <script>
-import DataMsg from "common/NiDataMsg"
+import { TmDataMsg } from "@tendermint/ui"
 export default {
-  name: "ni-data-loading",
-  components: { DataMsg },
+  name: "tm-data-loading",
+  components: { TmDataMsg },
   props: {
     title: {
       type: String,
diff --git a/app/src/renderer/components/common/NiFieldAddon.vue b/app/src/renderer/components/common/TmFieldAddon.vue
similarity index 66%
rename from app/src/renderer/components/common/NiFieldAddon.vue
rename to app/src/renderer/components/common/TmFieldAddon.vue
index a576ac8fec..135eeb3a76 100644
--- a/app/src/renderer/components/common/NiFieldAddon.vue
+++ b/app/src/renderer/components/common/TmFieldAddon.vue
@@ -1,22 +1,22 @@
 <template lang='pug'>
-.ni-field-addon: slot
+.tm-field-addon: slot
 </template>
 
 <script>
-export default { name: "ni-field-addon" }
+export default { name: "tm-field-addon" }
 </script>
 
 <style lang="stylus">
 @import '~variables'
 
-.ni-field-addon + .ni-field-addon
-.ni-field + .ni-field-addon
-.ni-field-addon + .ni-field
+.tm-field-addon + .tm-field-addon
+.tm-field + .tm-field-addon
+.tm-field-addon + .tm-field
   margin-left -1 * px
   position relative
   z-index z(default)
 
-.ni-field-addon
+.tm-field-addon
   background var(--app-bg)
   border px solid var(--bc)
   display flex
@@ -26,10 +26,10 @@ export default { name: "ni-field-addon" }
   min-width 2rem
   padding 0 0.5rem
 
-.ni-field-addon + .ni-btn
+.tm-field-addon + .tm-btn
   margin-left 1rem
 
 @media screen and (min-width: 768px)
-  .ni-field-addon
+  .tm-field-addon
     padding 0 0.75rem
 </style>
diff --git a/app/src/renderer/components/common/NiFieldSeed.vue b/app/src/renderer/components/common/TmFieldSeed.vue
similarity index 81%
rename from app/src/renderer/components/common/NiFieldSeed.vue
rename to app/src/renderer/components/common/TmFieldSeed.vue
index 3f9810c115..aff4357a0d 100644
--- a/app/src/renderer/components/common/NiFieldSeed.vue
+++ b/app/src/renderer/components/common/TmFieldSeed.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-field.ni-field-seed(
+tm-field.tm-field-seed(
   type="textarea"
   @input="update($event)"
   :value="value")
@@ -7,10 +7,10 @@ field.ni-field-seed(
 
 <script>
 import autosize from "autosize"
-import Field from "@nylira/vue-field"
+import { TmField } from "@tendermint/ui"
 export default {
-  name: "ni-field-seed",
-  components: { Field },
+  name: "tm-field-seed",
+  components: { TmField },
   methods: {
     update(value) {
       this.$emit("input", value)
diff --git a/app/src/renderer/components/common/NiFieldVote.vue b/app/src/renderer/components/common/TmFieldVote.vue
similarity index 68%
rename from app/src/renderer/components/common/NiFieldVote.vue
rename to app/src/renderer/components/common/TmFieldVote.vue
index 5a5e8a37f5..b9aef3b797 100644
--- a/app/src/renderer/components/common/NiFieldVote.vue
+++ b/app/src/renderer/components/common/TmFieldVote.vue
@@ -1,19 +1,19 @@
 <template lang="pug">
-.ni-field-vote: .ni-field-vote-container
-  .ni-field-vote-input
+.tm-field-vote: .tm-field-vote-container
+  .tm-field-vote-input
     i.material-icons(v-if="active") radio_button_checked
     i.material-icons(v-else) radio_button_unchecked
-  .ni-field-vote-label
-    .ni-field-vote-bar-outer(v-if="results")
-      .ni-field-vote-bar-inner(:style='innerBarStyle')
-    .ni-field-vote-dl
-      .ni-field-vote-dt {{ dt }}
-      .ni-field-vote-dd(v-if="results") {{ Math.round(dd * 100) + '%' }}
+  .tm-field-vote-label
+    .tm-field-vote-bar-outer(v-if="results")
+      .tm-field-vote-bar-inner(:style='innerBarStyle')
+    .tm-field-vote-dl
+      .tm-field-vote-dt {{ dt }}
+      .tm-field-vote-dd(v-if="results") {{ Math.round(dd * 100) + '%' }}
 </template>
 
 <script>
 export default {
-  name: "ni-list-item",
+  name: "tm-list-item",
   computed: {
     innerBarStyle() {
       return {
@@ -36,19 +36,19 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-field-vote-container
+.tm-field-vote-container
   height 3rem
   border-bottom px solid var(--bc)
   display flex
   position relative
 
-.ni-field-vote-input
-.ni-field-vote-dl
-.ni-field-vote-bar-outer
-.ni-field-vote-bar-inner
+.tm-field-vote-input
+.tm-field-vote-dl
+.tm-field-vote-bar-outer
+.tm-field-vote-bar-inner
   height 3rem - px
 
-.ni-field-vote-input
+.tm-field-vote-input
   width 3rem
   display flex
   align-items center
@@ -57,12 +57,12 @@ export default {
     width 3rem
     text-align center
 
-.ni-field-vote-label
+.tm-field-vote-label
   flex 1
   position relative
   border-left px solid var(--bc)
 
-.ni-field-vote-dl
+.tm-field-vote-dl
   position relative
   z-index z(default)
 
@@ -74,7 +74,7 @@ export default {
 
   color var(--txt)
 
-.ni-field-vote-bar-outer
+.tm-field-vote-bar-outer
   position absolute
   z-index z(zero)
 
diff --git a/app/src/renderer/components/common/NiHardwareState.vue b/app/src/renderer/components/common/TmHardwareState.vue
similarity index 74%
rename from app/src/renderer/components/common/NiHardwareState.vue
rename to app/src/renderer/components/common/TmHardwareState.vue
index 989c457b02..4c2856dee7 100644
--- a/app/src/renderer/components/common/NiHardwareState.vue
+++ b/app/src/renderer/components/common/TmHardwareState.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-.ni-hardware-state
-  i.ni-hardware-state__icon.material-icons(:class="iconClass") {{ icon }}
-  .ni-hardware-state__label {{ value }}
+.tm-hardware-state
+  i.tm-hardware-state__icon.material-icons(:class="iconClass") {{ icon }}
+  .tm-hardware-state__label {{ value }}
 </template>
 
 <script>
@@ -20,7 +20,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-hardware-state
+.tm-hardware-state
   background var(--app-fg)
   display flex
   flex-flow column nowrap
@@ -34,12 +34,12 @@ export default {
 
   user-select none
 
-.ni-hardware-state__icon
+.tm-hardware-state__icon
   font-size 5rem
   margin-bottom 1rem
   color var(--dim)
 
-.ni-hardware-state__label
+.tm-hardware-state__label
   text-align center
   color var(--txt)
 </style>
diff --git a/app/src/renderer/components/common/NiLiCopy.vue b/app/src/renderer/components/common/TmLiCopy.vue
similarity index 86%
rename from app/src/renderer/components/common/NiLiCopy.vue
rename to app/src/renderer/components/common/TmLiCopy.vue
index 9a8feada07..6382999837 100644
--- a/app/src/renderer/components/common/NiLiCopy.vue
+++ b/app/src/renderer/components/common/TmLiCopy.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-.ni-li-copy
+.tm-li-copy
   .value {{ value }}
   menu
     btn-copy(:value='value')
 </template>
 
 <script>
-import BtnCopy from "common/NiBtnCopy"
+import BtnCopy from "common/TmBtnCopy"
 export default {
-  name: "ni-li-copy",
+  name: "tm-li-copy",
   components: { BtnCopy },
   props: ["value"]
 }
@@ -17,7 +17,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-li-copy
+.tm-li-copy
   height 3rem
   display flex
   align-items center
diff --git a/app/src/renderer/components/common/NiLiSession.vue b/app/src/renderer/components/common/TmLiSession.vue
similarity index 67%
rename from app/src/renderer/components/common/NiLiSession.vue
rename to app/src/renderer/components/common/TmLiSession.vue
index 513679d335..561d75180e 100644
--- a/app/src/renderer/components/common/NiLiSession.vue
+++ b/app/src/renderer/components/common/TmLiSession.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-.ni-li-session
-  .ni-li-session-icon: i.material-icons {{ icon }}
-  .ni-li-session-text
-    .ni-li-session-title {{ title }}
-    .ni-li-session-subtitle {{ subtitle }}
+.tm-li-session
+  .tm-li-session-icon: i.material-icons {{ icon }}
+  .tm-li-session-text
+    .tm-li-session-title {{ title }}
+    .tm-li-session-subtitle {{ subtitle }}
 </template>
 
 <script>
 export default {
-  name: "ni-li-session",
+  name: "tm-li-session",
   props: ["icon", "title", "subtitle"]
 }
 </script>
@@ -16,7 +16,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-li-session
+.tm-li-session
   display flex
   flex-flow row nowrap
   user-select none
@@ -28,11 +28,11 @@ export default {
   &:hover
     cursor pointer
     background var(--hover-bg)
-    .ni-li-session-icon i
-    .ni-li-session-title
+    .tm-li-session-icon i
+    .tm-li-session-title
       color var(--txt)
 
-.ni-li-session-icon
+.tm-li-session-icon
   height 5rem
   flex 0 0 5rem
   display flex
@@ -41,20 +41,20 @@ export default {
   i
     font-size 2rem
 
-.ni-li-session-text
+.tm-li-session-text
   flex 1
   display flex
   justify-content center
   flex-flow column nowrap
   padding 1rem 1rem
 
-.ni-li-session-title
+.tm-li-session-title
   color var(--txt)
   font-size lg
   line-height 1.25
   margin-bottom 0.375rem
 
-.ni-li-session-subtitle
+.tm-li-session-subtitle
   color var(--dim)
   font-size sm
 </style>
diff --git a/app/src/renderer/components/common/NiModal.vue b/app/src/renderer/components/common/TmModal.vue
similarity index 73%
rename from app/src/renderer/components/common/NiModal.vue
rename to app/src/renderer/components/common/TmModal.vue
index d609b6f0cc..91748720b6 100644
--- a/app/src/renderer/components/common/NiModal.vue
+++ b/app/src/renderer/components/common/TmModal.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
 div(:class='cssClass' @click="close()")
-  .ni-modal-container
-    header.ni-modal-header
-      .ni-modal-icon(v-if='icon')
+  .tm-modal-container
+    header.tm-modal-header
+      .tm-modal-icon(v-if='icon')
         i.material-icons {{ icon }}
-      .ni-modal-title
+      .tm-modal-title
         slot(name='title')
-      .ni-modal-icon.ni-modal-close(@click="close()")
+      .tm-modal-icon.tm-modal-close(@click="close()")
         i.material-icons close
-    main.ni-modal-main
+    main.tm-modal-main
       slot
-    footer.ni-modal-footer
+    footer.tm-modal-footer
       slot(name='footer')
 </template>
 
@@ -18,9 +18,9 @@ div(:class='cssClass' @click="close()")
 export default {
   computed: {
     cssClass() {
-      let value = "ni-modal"
+      let value = "tm-modal"
       if (this.size === "fullscreen" || this.size === "fs") {
-        value += " ni-modal-fullscreen"
+        value += " tm-modal-fullscreen"
       }
       return value
     }
@@ -32,7 +32,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal
+.tm-modal
   position fixed
   top 0
   left 0
@@ -47,10 +47,10 @@ export default {
   align-items center
   backdrop-filter blur(0.5em)
 
-  &.ni-modal-fullscreen
+  &.tm-modal-fullscreen
     display flex
 
-    .ni-modal-container
+    .tm-modal-container
       flex 1
       height 100vh
       max-height 100vh
@@ -58,12 +58,12 @@ export default {
       display flex
       flex-flow column nowrap
 
-      .ni-modal-main
+      .tm-modal-main
         flex 1
         overflow-y scroll
         display block
 
-.ni-modal-container
+.tm-modal-container
   background var(--app-bg)
   box-shadow hsla(0,0,0,0.25) 0 0.25rem 1rem
 
@@ -76,14 +76,14 @@ export default {
   max-width 30rem
   max-height 40rem
 
-.ni-modal-header
+.tm-modal-header
   display flex
   flex-flow row nowrap
   align-items center
   flex 0 0 3rem + 0.0625rem
   background var(--app-fg)
 
-.ni-modal-icon
+.tm-modal-icon
   height 3rem
   flex 0 0 3rem
   display flex
@@ -92,29 +92,29 @@ export default {
 
   i
     font-size lg
-  &.ni-modal-close
+  &.tm-modal-close
     cursor pointer
     i
       color var(--link)
     &:hover i
       color var(--hover)
 
-.ni-modal-icon + .ni-modal-title
+.tm-modal-icon + .tm-modal-title
   padding-left 0
 
-.ni-modal-title
+.tm-modal-title
   flex 1
   font-size h3
   color var(--txt)
   padding 0 1rem
 
-.ni-modal-main, .ni-modal-footer
+.tm-modal-main, .tm-modal-footer
   padding 1rem
 
-.ni-modal-main + .ni-modal-footer
+.tm-modal-main + .tm-modal-footer
   border-top px solid var(--bc)
 
-.ni-modal-main
+.tm-modal-main
   flex 1
   display flex
   flex-flow column
@@ -123,18 +123,18 @@ export default {
   .ps-scrollbar-y-rail
     display none
 
-.ni-modal-main p
+.tm-modal-main p
   margin-bottom 1rem
 
-.ni-modal-main > .ni-article-body
+.tm-modal-main > .tm-article-body
   margin -1rem
 
-.ni-modal-footer
+.tm-modal-footer
   flex 0 0 4rem + px
   &:empty
     display none
 
-.ni-modal-footer > div
+.tm-modal-footer > div
   display flex
   justify-content space-between
 </style>
diff --git a/app/src/renderer/components/common/NiModalError.vue b/app/src/renderer/components/common/TmModalError.vue
similarity index 75%
rename from app/src/renderer/components/common/NiModalError.vue
rename to app/src/renderer/components/common/TmModalError.vue
index ed1ed6a74f..3aee987815 100644
--- a/app/src/renderer/components/common/NiModalError.vue
+++ b/app/src/renderer/components/common/TmModalError.vue
@@ -1,18 +1,18 @@
 <template lang="pug">
-.ni-modal-error__wrapper
-  .ni-modal-error
-    .ni-modal-error__icon: i.material-icons {{ errorIcon }}
-    .ni-modal-error__title {{ errorTitle }}
-    .ni-modal-error__body {{ errorBody }}
-    .ni-modal-error__footer
-      btn#ni-modal-error__btn-issue(
+.tm-modal-error__wrapper
+  .tm-modal-error
+    .tm-modal-error__icon: i.material-icons {{ errorIcon }}
+    .tm-modal-error__title {{ errorTitle }}
+    .tm-modal-error__body {{ errorBody }}
+    .tm-modal-error__footer
+      tm-btn#tm-modal-error__btn-issue(
         size="lg"
         icon="bug_report"
         color="primary"
         value="Create an issue"
         type="anchor"
         :href="issueUrl")
-      btn#ni-modal-error__btn-logs(
+      tm-btn#tm-modal-error__btn-logs(
         size="lg"
         icon="info_outline"
         value="View app logs"
@@ -22,10 +22,10 @@
 <script>
 import { remote, shell } from "electron"
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
-  name: "ni-modal-error",
-  components: { Btn },
+  name: "tm-modal-error",
+  components: { TmBtn },
   computed: {
     ...mapGetters(["config", "lastHeader"]),
     errorIcon() {
@@ -61,7 +61,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal-error__wrapper
+.tm-modal-error__wrapper
   position absolute
   top 0
   left 0
@@ -76,11 +76,11 @@ export default {
   align-items center
   justify-content center
 
-.ni-modal-error
+.tm-modal-error
   padding 1.5rem
   max-width 40rem
 
-.ni-modal-error__icon
+.tm-modal-error__icon
   position fixed
   top 0
   left 0
@@ -90,19 +90,19 @@ export default {
     line-height 1
     color var(--bc-dim)
 
-.ni-modal-error__title
+.tm-modal-error__title
   font-size h1
   font-weight 500
   line-height 1
   margin-bottom 1.5rem
 
-.ni-modal-error__body
+.tm-modal-error__body
   font-size lg
   color var(--dim)
   margin-bottom 3rem
 
-.ni-modal-error__footer
-  .ni-btn
+.tm-modal-error__footer
+  .tm-btn
     width 100%
     margin-right 1.5rem
     margin-bottom 1rem
@@ -111,15 +111,15 @@ export default {
       margin-bottom 0
 
 @media screen and (min-width: 768px)
-  .ni-modal-error__icon i.material-icons
+  .tm-modal-error__icon i.material-icons
     font-size 20vw + 20vh
 
-  .ni-modal-error__body
+  .tm-modal-error__body
     margin-bottom 4.5rem
 
-  .ni-modal-error__footer
+  .tm-modal-error__footer
     min-width: 31rem
 
-  .ni-modal-error__footer .ni-btn
+  .tm-modal-error__footer .tm-btn
       margin-bottom 0
 </style>
diff --git a/app/src/renderer/components/common/NiModalHelp.vue b/app/src/renderer/components/common/TmModalHelp.vue
similarity index 74%
rename from app/src/renderer/components/common/NiModalHelp.vue
rename to app/src/renderer/components/common/TmModalHelp.vue
index 0fd83494b0..d5c1e2b09c 100644
--- a/app/src/renderer/components/common/NiModalHelp.vue
+++ b/app/src/renderer/components/common/TmModalHelp.vue
@@ -1,25 +1,23 @@
 <template lang="pug">
-modal.ni-modal-help(v-if="active" :close="close")
+modal.tm-modal-help(v-if="active" :close="close")
   div(slot='title') Need Help?
   p Something in the app not working correctly? Tell us what went wrong in developer chat or create an issue on our GitHub. Thanks for improving Cosmos Voyager!
-  list-item(
+  tm-list-item(
     title="Developer Chat"
     href="https://riot.im/app/#/room/#cosmos:matrix.org")
-  list-item(
+  tm-list-item(
     title="GitHub Issues"
     href="https://github.com/cosmos/voyager/issues")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import Modal from "common/NiModal"
-import ListItem from "common/NiListItem"
+import Modal from "common/TmModal"
+import { TmListItem } from "@tendermint/ui"
 export default {
-  name: "ni-modal-help",
+  name: "tm-modal-help",
   components: {
-    ListItem,
-    Btn,
+    TmListItem,
     Modal
   },
   computed: {
@@ -39,10 +37,10 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal.ni-modal-help
+.tm-modal.tm-modal-help
   z-index z(modalHelp)
 
-  .ni-modal-main
+  .tm-modal-main
     padding 2rem
 
     p
diff --git a/app/src/renderer/components/common/NiModalLCDApproval.vue b/app/src/renderer/components/common/TmModalLCDApproval.vue
similarity index 75%
rename from app/src/renderer/components/common/NiModalLCDApproval.vue
rename to app/src/renderer/components/common/TmModalLCDApproval.vue
index 0056b98084..c45c558f48 100644
--- a/app/src/renderer/components/common/NiModalLCDApproval.vue
+++ b/app/src/renderer/components/common/TmModalLCDApproval.vue
@@ -1,22 +1,22 @@
 <template lang="pug">
-.ni-modal-lcd-approval__wrapper
-  .ni-modal-lcd-approval
-    .ni-modal-lcd-approval__icon: i.material-icons sync problem
-    .ni-modal-lcd-approval__title Node approval required
-    .ni-modal-lcd-approval__body
+.tm-modal-lcd-approval__wrapper
+  .tm-modal-lcd-approval
+    .tm-modal-lcd-approval__icon: i.material-icons sync problem
+    .tm-modal-lcd-approval__title Node approval required
+    .tm-modal-lcd-approval__body
       | Voyager needs to approve the node you're trying to connect to. Please compare the hash below against the hash from a trusted source. If you are 100% sure that the hashes match, click approve to proceed.
 
-      field#node-hash(type="textarea" :value="hash" disabled)
+      tm-field#node-hash(type="textarea" :value="hash" disabled)
 
-    .ni-modal-lcd-approval__footer
+    .tm-modal-lcd-approval__footer
 
-      btn#ni-modal-lcd-approval__btn-approve(
+      tm-btn#tm-modal-lcd-approval__btn-approve(
         size="lg"
         icon="check"
         color="primary"
         value="Approve Node"
         @click.native="approve")
-      btn#ni-modal-lcd-approval__btn-disapprove(
+      tm-btn#tm-modal-lcd-approval__btn-disapprove(
         size="lg"
         icon="skip_next"
         value="Switch Node"
@@ -24,15 +24,12 @@
 </template>
 
 <script>
-import Btn from "@nylira/vue-button"
-import FormGroup from "common/NiFormGroup"
-import Field from "@nylira/vue-field"
+import { TmBtn, TmField } from "@tendermint/ui"
 export default {
   name: "modal-lcd-approval",
   components: {
-    Btn,
-    FormGroup,
-    Field
+    TmBtn,
+    TmField
   },
   computed: {},
   methods: {
@@ -50,7 +47,7 @@ export default {
 <style lang="stylus">
 @import '~variables';
 
-.ni-modal-lcd-approval {
+.tm-modal-lcd-approval {
   padding: 1.5rem;
   max-width: 40rem;
 
@@ -98,7 +95,7 @@ export default {
     flex-direction: row;
     justify-content: flex-start;
 
-    .ni-btn {
+    .tm-btn {
       width: 100%;
       margin-right: 1.5rem;
       margin-bottom: 1rem;
@@ -116,7 +113,7 @@ export default {
 }
 
 @media screen and (min-width: 768px) {
-  .ni-modal-lcd-approval {
+  .tm-modal-lcd-approval {
     &__icon i.material-icons {
       font-size: 20vw + 20vh;
     }
@@ -125,7 +122,7 @@ export default {
       min-width: 31rem;
     }
 
-    &__footer .ni-btn {
+    &__footer .tm-btn {
       margin-bottom: 0;
     }
   }
diff --git a/app/src/renderer/components/common/NiModalMenu.vue b/app/src/renderer/components/common/TmModalMenu.vue
similarity index 80%
rename from app/src/renderer/components/common/NiModalMenu.vue
rename to app/src/renderer/components/common/TmModalMenu.vue
index 9a32fb4929..67894c15fe 100644
--- a/app/src/renderer/components/common/NiModalMenu.vue
+++ b/app/src/renderer/components/common/TmModalMenu.vue
@@ -1,15 +1,15 @@
 <template lang="pug">
-.ni-modal-menu: slot
+.tm-modal-menu: slot
 </template>
 
 <script>
-export default { name: "ni-modal-menu" }
+export default { name: "tm-modal-menu" }
 </script>
 
 <style lang="stylus">
 @require '~variables'
 
-.ni-modal-menu
+.tm-modal-menu
   background var(--app-bg-alpha)
   z-index z(default)
   user-select none
@@ -17,7 +17,7 @@ export default { name: "ni-modal-menu" }
   overflow-y scroll
 
 @media screen and (max-width:1023px)
-  .ni-modal-menu
+  .tm-modal-menu
     padding-top 3rem
     height 100vh
     position fixed
diff --git a/app/src/renderer/components/common/NiModalNoNodes.vue b/app/src/renderer/components/common/TmModalNoNodes.vue
similarity index 93%
rename from app/src/renderer/components/common/NiModalNoNodes.vue
rename to app/src/renderer/components/common/TmModalNoNodes.vue
index 3f3d54b903..66162ffd19 100644
--- a/app/src/renderer/components/common/NiModalNoNodes.vue
+++ b/app/src/renderer/components/common/TmModalNoNodes.vue
@@ -5,13 +5,13 @@
     .ni-modal-error__title No nodes found
     .ni-modal-error__body All known nodes are offline or incompatible. You can retry to connect or switch to a demo connection so you can try out Voyager.
     .ni-modal-error__footer
-      btn#ni-modal-error__btn-retry(
+      tm-btn#ni-modal-error__btn-retry(
         size="lg"
         icon="autorenew"
         color="primary"
         value="Retry Connection"
         @click.native="retry")
-      btn#ni-modal-error__btn-mock(
+      tm-btn#ni-modal-error__btn-mock(
         size="lg"
         icon="pageview"
         value="Try Demo"
@@ -21,10 +21,10 @@
 <script>
 import { ipcRenderer } from "electron"
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
+import { TmBtn } from "@tendermint/ui"
 export default {
   name: "modal-no-nodes",
-  components: { Btn },
+  components: { TmBtn },
   methods: {
     retry() {
       ipcRenderer.send("retry-connection")
diff --git a/app/src/renderer/components/common/NiModalReceive.vue b/app/src/renderer/components/common/TmModalReceive.vue
similarity index 67%
rename from app/src/renderer/components/common/NiModalReceive.vue
rename to app/src/renderer/components/common/TmModalReceive.vue
index fabf68f450..43c78ca857 100644
--- a/app/src/renderer/components/common/NiModalReceive.vue
+++ b/app/src/renderer/components/common/TmModalReceive.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-modal.ni-modal-receive(v-if="active" :close="close")
+modal.tm-modal-receive(v-if="active" :close="close")
   div(slot='title') Receive Tokens
   p You can receive Cosmos tokens of any denomination by sharing this address.
   li-copy.receive-modal(:value="wallet.address")
@@ -7,20 +7,14 @@ modal.ni-modal-receive(v-if="active" :close="close")
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import BtnCopy from "common/NiBtnCopy"
-import LiCopy from "common/NiLiCopy"
-import Modal from "common/NiModal"
-import Part from "common/NiPart"
+import LiCopy from "common/TmLiCopy"
+import Modal from "common/TmModal"
 export default {
-  name: "ni-modal-receive",
+  name: "tm-modal-receive",
   props: ["value"],
   components: {
-    Btn,
-    BtnCopy,
     LiCopy,
-    Modal,
-    Part
+    Modal
   },
   computed: {
     ...mapGetters(["config", "wallet"]),
@@ -39,10 +33,10 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-modal.ni-modal-receive
+.tm-modal.tm-modal-receive
   z-index z(modalError)
 
-  .ni-modal-main
+  .tm-modal-main
     padding 2rem
 
     p
diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/TmModalSearch.vue
similarity index 67%
rename from app/src/renderer/components/common/NiModalSearch.vue
rename to app/src/renderer/components/common/TmModalSearch.vue
index 01692b6551..d9fd395a7d 100644
--- a/app/src/renderer/components/common/NiModalSearch.vue
+++ b/app/src/renderer/components/common/TmModalSearch.vue
@@ -1,45 +1,42 @@
 <template lang='pug'>
-.ni-modal-search(v-if="open")
-  form.ni-modal-search-container(
+.tm-modal-search(v-if="open")
+  form.tm-modal-search-container(
     v-if="type === 'blocks'"
     v-on:submit.prevent.default="gotoBlock")
-    form-group(field-id="search-input" field-label=""
+    tm-form-group(field-id="search-input" field-label=""
       :error="$v.filters.blocks.search.query.$invalid")
-      .ni-modal-search-field
-        field#search-input.mousetrap(
+      .tm-modal-search-field
+        tm-field#search-input.mousetrap(
           type="number"
           step="1"
           placeholder="View block height..."
           v-model="query")
-        btn(value="Find")
-        btn(type="button" icon="close" @click.native="close")
-      form-msg(name="Query" type="numeric"
+        tm-btn(value="Find")
+        tm-btn(type="button" icon="close" @click.native="close")
+      tm-form-msg(name="Query" type="numeric"
         v-if="!$v.filters.blocks.search.query.numeric")
-      form-msg(name="Query" type="between" min="0"
+      tm-form-msg(name="Query" type="between" min="0"
         :max="$v.filters.blocks.search.query.$params.between.max"
         v-if="!$v.filters.blocks.search.query.between")
-  .ni-modal-search-container(v-else)
-    form-group(field-id="search-input" field-label="")
-      .ni-modal-search-field
-        field#search-input.mousetrap(
+  .tm-modal-search-container(v-else)
+    tm-form-group(field-id="search-input" field-label="")
+      .tm-modal-search-field
+        tm-field#search-input.mousetrap(
           type="text" placeholder="Search..." v-model="query")
-        btn(icon="close" @click.native="close")
+        tm-btn(icon="close" @click.native="close")
 </template>
 
 <script>
 import { between, numeric } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
+import { TmBtn, TmFormGroup, TmField, TmFormMsg } from "@tendermint/ui"
 export default {
   name: "modal-search",
   components: {
-    Btn,
-    Field,
-    FormGroup,
-    FormMsg
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg
   },
   computed: {
     ...mapGetters(["filters", "lastHeader"]),
@@ -84,7 +81,7 @@ export default {
     open(open) {
       if (open) {
         setTimeout(() => {
-          let el = this.$el.querySelector(".ni-field")
+          let el = this.$el.querySelector(".tm-field")
           el.select()
         })
       }
@@ -97,20 +94,20 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-modal-search-container
+.tm-modal-search-container
   background var(--app-fg)
   margin-bottom 1rem
   padding 0.5rem 0
 
-  .ni-btn
+  .tm-btn
     margin-left 0.5rem
-  .ni-field
+  .tm-field
     background var(--app-bg)
 
-.ni-modal-search-field
+.tm-modal-search-field
   display flex
   flex 1
-  .ni-field
+  .tm-field
     width auto
     flex 1
 </style>
diff --git a/app/src/renderer/components/common/NiOnboarding.vue b/app/src/renderer/components/common/TmOnboarding.vue
similarity index 62%
rename from app/src/renderer/components/common/NiOnboarding.vue
rename to app/src/renderer/components/common/TmOnboarding.vue
index 23513ce6e8..1bfc804961 100644
--- a/app/src/renderer/components/common/NiOnboarding.vue
+++ b/app/src/renderer/components/common/TmOnboarding.vue
@@ -1,30 +1,29 @@
 <template lang="pug">
-#onboarding.ni-session-wrapper
-  img.ni-session-backdrop(src="~assets/images/cosmos-logo.png")
-  .ni-session: .ni-session-container
-    .ni-session-header: .ni-session-title Welcome to Voyager
-    .ni-session-main
-      .ni-session-label {{ activeValue }}
+#onboarding.tm-session-wrapper
+  img.tm-session-backdrop(src="~assets/images/cosmos-logo.png")
+  .tm-session: .tm-session-container
+    .tm-session-header: .tm-session-title Welcome to Voyager
+    .tm-session-main
+      .tm-session-label {{ activeValue }}
       img(:src="activeImg")
-      bar-discrete(:nodes="nodes" :click-fn="go" :active="activeKey")
-    .ni-session-footer(v-if="activeKey === nodes.length - 1")
-      btn(value="Restart" @click.native="go(0)" icon="settings_backup_restore")
-      btn(value="Finish" @click.native="finish" color="primary"
+      tm-bar-discrete(:nodes="nodes" :click-fn="go" :active="activeKey")
+    .tm-session-footer(v-if="activeKey === nodes.length - 1")
+      tm-btn(value="Restart" @click.native="go(0)" icon="settings_backup_restore")
+      tm-btn(value="Finish" @click.native="finish" color="primary"
         icon="chevron_right" icon-pos="right" )
-    .ni-session-footer(v-else)
-      btn(value="Skip" @click.native="finish" icon="close")
-      btn(value="Next" @click.native="next" color="primary"
+    .tm-session-footer(v-else)
+      tm-btn(value="Skip" @click.native="finish" icon="close")
+      tm-btn(value="Next" @click.native="next" color="primary"
         icon="chevron_right" icon-pos="right" )
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
-import Btn from "@nylira/vue-button"
-import BarDiscrete from "common/NiBarDiscrete"
+import { TmBarDiscrete, TmBtn } from "@tendermint/ui"
 export default {
-  name: "ni-onboarding",
-  components: { Btn, BarDiscrete },
+  name: "tm-onboarding",
+  components: { TmBtn, TmBarDiscrete },
   computed: {
     ...mapGetters(["onboarding"]),
     activeKey() {
@@ -65,7 +64,7 @@ export default {
     }
   },
   mounted() {
-    new PerfectScrollbar(this.$el.querySelector("#onboarding .ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector("#onboarding .tm-session-main"))
   }
 }
 </script>
@@ -73,6 +72,6 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-#onboarding .ni-session-main
+#onboarding .tm-session-main
   position relative
 </style>
diff --git a/app/src/renderer/components/common/NiPart.vue b/app/src/renderer/components/common/TmPart.vue
similarity index 62%
rename from app/src/renderer/components/common/NiPart.vue
rename to app/src/renderer/components/common/TmPart.vue
index 1664c823e0..d625810955 100644
--- a/app/src/renderer/components/common/NiPart.vue
+++ b/app/src/renderer/components/common/TmPart.vue
@@ -1,19 +1,19 @@
 <template lang='pug'>
-section.ni-part
-  .ni-part-container
-    header.ni-part-header(v-if="$slots['title'] || title")
-      .ni-part-header-container
-        .ni-part-title.h5
+section.tm-part
+  .tm-part-container
+    header.tm-part-header(v-if="$slots['title'] || title")
+      .tm-part-header-container
+        .tm-part-title.h5
           template(v-if='title') {{ title }}
           slot(name='title', v-else='')
-        menu.ni-part-menu
+        menu.tm-part-menu
           slot(name='menu')
-    main.ni-part-main: slot
+    main.tm-part-main: slot
 </template>
 
 <script>
 export default {
-  name: "ni-part",
+  name: "tm-part",
   props: ["title"]
 }
 </script>
@@ -21,30 +21,31 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-part
+.tm-part
   position relative
   max-width width-main-max
   background var(--app-bg-light)
   border-radius 2px
   margin 1rem 0
 
-.ni-part-container, .ni-part-header, .ni-part-title, .ni-part-menu, .ni-part-main
+.tm-part-container, .tm-part-header, .tm-part-title, .tm-part-menu, .tm-part-main
   &:empty
     display none
 
-.ni-part-container
+
+.tm-part-container
   margin 0 auto
 
-.ni-part-header
+.tm-part-header
   padding 1rem 1rem 0.5rem
   border-radius 2px
   background var(--app-bg-light)
 
-.ni-part-header-container
+.tm-part-header-container
   display flex
   align-items center
 
-.ni-part-title, .ni-part-menu
+.tm-part-title, .tm-part-menu
   color var(--dim)
   margin 0
 
@@ -54,7 +55,7 @@ export default {
     &:hover
       color var(--hover)
 
-.ni-part-title
+.tm-part-title
   flex 1
   color var(--dim)
   font-size sm
diff --git a/app/src/renderer/components/common/NiSession.vue b/app/src/renderer/components/common/TmSession.vue
similarity index 75%
rename from app/src/renderer/components/common/NiSession.vue
rename to app/src/renderer/components/common/TmSession.vue
index 22189ebacd..cf35b1135d 100644
--- a/app/src/renderer/components/common/NiSession.vue
+++ b/app/src/renderer/components/common/TmSession.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-.ni-session-wrapper
-  img.ni-session-backdrop(src="~assets/images/cosmos-logo.png")
+.tm-session-wrapper
+  img.tm-session-backdrop(src="~assets/images/cosmos-logo.png")
   session-loading(v-if="config.modals.session.state == 'loading'")
   session-welcome(v-if="config.modals.session.state == 'welcome'")
   session-sign-up(v-if="config.modals.session.state == 'sign-up'")
@@ -12,15 +12,15 @@
 
 <script>
 import { mapGetters } from "vuex"
-import SessionLoading from "common/NiSessionLoading"
-import SessionWelcome from "common/NiSessionWelcome"
-import SessionSignUp from "common/NiSessionSignUp"
-import SessionSignIn from "common/NiSessionSignIn"
-import SessionHardware from "common/NiSessionHardware"
-import SessionImport from "common/NiSessionImport"
-import SessionAccountDelete from "common/NiSessionAccountDelete"
+import SessionLoading from "common/TmSessionLoading"
+import SessionWelcome from "common/TmSessionWelcome"
+import SessionSignUp from "common/TmSessionSignUp"
+import SessionSignIn from "common/TmSessionSignIn"
+import SessionHardware from "common/TmSessionHardware"
+import SessionImport from "common/TmSessionImport"
+import SessionAccountDelete from "common/TmSessionAccountDelete"
 export default {
-  name: "ni-session",
+  name: "tm-session",
   components: {
     SessionLoading,
     SessionWelcome,
@@ -37,23 +37,23 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-session-wrapper
+.tm-session-wrapper
   position relative
   z-index z(modal)
 
-  .ni-session-backdrop
+  .tm-session-backdrop
     position absolute
     top -10vw
     left -10vw
     width 50vw
     opacity 0.25
 
-.ni-field-checkbox
+.tm-field-checkbox
   display flex
   flex-flow row nowrap
   align-items center
 
-  .ni-field-checkbox-input
+  .tm-field-checkbox-input
     flex 0 0 2rem
     height 2rem
     display flex
@@ -66,34 +66,34 @@ export default {
       padding 0
       margin 0
 
-  .ni-field-checkbox-label
+  .tm-field-checkbox-label
     flex 1
     line-height 1.375
     padding 0.5rem 1rem
     font-size 0.875rem
 
-.ni-session
+.tm-session
   position fixed
   top 0
   left 0
   z-index z(default)
   background var(--app-fg)
 
-.ni-session-container
-  &:not(.ni-form)
+.tm-session-container
+  &:not(.tm-form)
     width 100vw
     height 100vh
     display flex
     flex-flow column nowrap
 
-  &.ni-form
-    .ni-form-main
+  &.tm-form
+    .tm-form-main
       width 100vw
       height 100vh
       display flex
       flex-flow column nowrap
 
-.ni-session-header
+.tm-session-header
   display flex
   justify-content space-between
   align-items center
@@ -116,20 +116,20 @@ export default {
       i
         color var(--txt)
 
-  .ni-session-title
+  .tm-session-title
     flex 1
     padding 0 1rem
     font-size xl
     text-align center
     color var(--txt)
 
-.ni-session-main
+.tm-session-main
   min-height 0
   background var(--app-bg-light)
   overflow-y auto
   position relative
 
-  .ni-bar-discrete
+  .tm-bar-discrete
     margin-bottom 1rem
 
   img
@@ -143,13 +143,13 @@ export default {
     padding 1rem
     border-bottom px solid var(--bc)
 
-.ni-session-label
+.tm-session-label
   text-align center
   padding 1rem
   background var(--app-fg)
   color var(--dim)
 
-.ni-session-footer
+.tm-session-footer
   background var(--app-bg-light)
   flex 0 0 5rem + px
   padding 0 3rem
@@ -160,12 +160,12 @@ export default {
   &:empty
     display none
 
-.ni-session-footer > div
+.tm-session-footer > div
   display flex
   justify-content space-between
 
 @media screen and (min-width: 768px)
-  .ni-session-wrapper
+  .tm-session-wrapper
     position fixed
     top 0
     left 0
@@ -177,24 +177,24 @@ export default {
     align-items center
     justify-content center
 
-  .ni-session
+  .tm-session
     position static
     shadow()
 
-  .ni-session-container
-    &:not(.ni-form)
-    &.ni-form .ni-form-main
+  .tm-session-container
+    &:not(.tm-form)
+    &.tm-form .tm-form-main
       width 32rem
       max-height 100vh
       height auto
 
-  .ni-session-header
+  .tm-session-header
     background var(--app-fg)
     margin-top 0
 
-  .ni-session-main
+  .tm-session-main
     padding 3rem 2rem
 
-    .ni-form-group
+    .tm-form-group
       display block !important
 </style>
diff --git a/app/src/renderer/components/common/NiSessionAccountDelete.vue b/app/src/renderer/components/common/TmSessionAccountDelete.vue
similarity index 59%
rename from app/src/renderer/components/common/NiSessionAccountDelete.vue
rename to app/src/renderer/components/common/TmSessionAccountDelete.vue
index 1b27fe2379..ec57ae27b5 100644
--- a/app/src/renderer/components/common/NiSessionAccountDelete.vue
+++ b/app/src/renderer/components/common/TmSessionAccountDelete.vue
@@ -1,48 +1,48 @@
 <template lang="pug">
-.ni-session: form-struct(:submit='onSubmit').ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit='onSubmit').tm-session-container
+  .tm-session-header
     a(@click="setState('sign-in')"): i.material-icons arrow_back
-    .ni-session-title Remove Account
+    .tm-session-title Remove Account
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
-    form-group(:error='$v.fields.deletionPassword.$error'
+  .tm-session-main
+    tm-form-group(:error='$v.fields.deletionPassword.$error'
       field-id='sign-in-password' field-label='Password')
-      field#sign-in-password(
+      tm-field#sign-in-password(
         type="password"
         placeholder="Enter your password"
         v-model="fields.deletionPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.deletionPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.deletionPassword.minLength')
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.deletionPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.deletionPassword.minLength')
 
-    form-group(field-id="sign-up-warning" field-label=' '
+    tm-form-group(field-id="sign-up-warning" field-label=' '
       :error='$v.fields.deletionWarning.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#sign-up-warning(type="checkbox" v-model="fields.deletionWarning")
-        label.ni-field-checkbox-label(for="sign-up-warning")
+        label.tm-field-checkbox-label(for="sign-up-warning")
           | I understand that Cosmos cannot recover deleted accounts without the passphrase.
-      form-msg(name='Deletion confirmation' type='required' v-if='!$v.fields.deletionWarning.required')
-  .ni-session-footer
-    btn(icon="exit_to_app" value="Sign Out and Remove Account" size="lg")
+      tm-form-msg(name='Deletion confirmation' type='required' v-if='!$v.fields.deletionWarning.required')
+  .tm-session-footer
+    tm-btn(icon="exit_to_app" value="Sign Out and Remove Account" size="lg")
 </template>
 
 <script>
 import { required, minLength } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 export default {
-  name: "ni-session-account-delete",
+  name: "tm-session-account-delete",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct
   },
   data: () => ({ fields: { deletionPassword: "" } }),
   methods: {
diff --git a/app/src/renderer/components/common/NiSessionHardware.vue b/app/src/renderer/components/common/TmSessionHardware.vue
similarity index 85%
rename from app/src/renderer/components/common/NiSessionHardware.vue
rename to app/src/renderer/components/common/TmSessionHardware.vue
index 80ecd94c92..47efd6b3d1 100644
--- a/app/src/renderer/components/common/NiSessionHardware.vue
+++ b/app/src/renderer/components/common/TmSessionHardware.vue
@@ -1,23 +1,23 @@
 <template lang="pug">
-.ni-session: .ni-session-container
-  .ni-session-header
+.tm-session: .tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Sign In
+    .tm-session-title Sign In
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     hardware-state(v-if="status == 'connect'" @click.native="setStatus('detect')"
       icon="usb" value="Please plug in your Ledger Wallet")
     hardware-state(v-if="status == 'detect'" @click.native="setStatus('success')"
       icon="rotate_right" spin="true" value="Detecting your Ledger Wallet")
     hardware-state(v-if="status == 'success'" @click.native="onSubmit"
       icon="check_circle" value="Ledger Wallet successfully loaded")
-  .ni-session-footer
+  .tm-session-footer
 </template>
 
 <script>
-import HardwareState from "common/NiHardwareState"
+import HardwareState from "common/TmHardwareState"
 export default {
-  name: "ni-session-hardware",
+  name: "tm-session-hardware",
   components: { HardwareState },
   data: () => ({ status: "connect" }),
   methods: {
diff --git a/app/src/renderer/components/common/NiSessionImport.vue b/app/src/renderer/components/common/TmSessionImport.vue
similarity index 61%
rename from app/src/renderer/components/common/NiSessionImport.vue
rename to app/src/renderer/components/common/TmSessionImport.vue
index 3e32049902..3177e3c0ee 100644
--- a/app/src/renderer/components/common/NiSessionImport.vue
+++ b/app/src/renderer/components/common/TmSessionImport.vue
@@ -1,76 +1,77 @@
 <template lang="pug">
-.ni-session: form-struct(:submit='onSubmit').ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit='onSubmit').tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Import with Seed
+    .tm-session-title Import with Seed
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
-    form-group(field-id='import-name' field-label='Account Name' :error='$v.fields.importName.$error')
-      field#import-name(
+  .tm-session-main
+    tm-form-group(field-id='import-name' field-label='Account Name' :error='$v.fields.importName.$error')
+      tm-field#import-name(
         type="text"
         placeholder="Must have at least 5 characters"
         v-model="fields.importName")
-      form-msg(name='Name' type='required' v-if='!$v.fields.importName.required')
-      form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.importName.minLength')
+      tm-form-msg(name='Name' type='required' v-if='!$v.fields.importName.required')
+      tm-form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.importName.minLength')
 
-    form-group(:error='$v.fields.importPassword.$error'
+    tm-form-group(:error='$v.fields.importPassword.$error'
       field-id='import-password' field-label='Password')
-      field#import-password(
+      tm-field#import-password(
         type="password"
         placeholder="Must be at least 10 characters"
         v-model="fields.importPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.importPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.importPassword.minLength')
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.importPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.importPassword.minLength')
 
-    form-group(:error='$v.fields.importPasswordConfirm.$error'
+    tm-form-group(:error='$v.fields.importPasswordConfirm.$error'
       field-id='import-password-confirmation' field-label='Confirm Password')
-      field#import-password-confirmation(
+      tm-field#import-password-confirmation(
         type="password"
         placeholder="Enter password again"
         v-model="fields.importPasswordConfirm")
-      form-msg(name='Password confirmation' type='match' v-if='!$v.fields.importPasswordConfirm.sameAsPassword')
+      tm-form-msg(name='Password confirmation' type='match' v-if='!$v.fields.importPasswordConfirm.sameAsPassword')
 
-    form-group(:error='$v.fields.importSeed.$error'
+    tm-form-group(:error='$v.fields.importSeed.$error'
       field-id='import-seed' field-label='Seed Phrase')
       field-seed#import-seed(
         :value="fields.importSeed"
         @input="val => fields.importSeed = val"
         placeholder="Must be exactly 16 words")
-      form-msg(name='Seed' type='required' v-if='!$v.fields.importSeed.required')
-      form-msg(name='Seed' type='words16' v-else-if='!$v.fields.importSeed.words16')
+      tm-form-msg(name='Seed' type='required' v-if='!$v.fields.importSeed.required')
+      tm-form-msg(name='Seed' type='words16' v-else-if='!$v.fields.importSeed.words16')
 
-    form-group(field-id="error-collection" field-label=''
+    tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#error-collection(type="checkbox" v-model="fields.errorCollection")
-        label.ni-field-checkbox-label(for="error-collection")
+        label.tm-field-checkbox-label(for="error-collection")
           | I'd like to opt in for remote error tracking to help improve Voyager.
 
-  .ni-session-footer
-    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
+  .tm-session-footer
+    tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FieldSeed from "common/NiFieldSeed"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+import FieldSeed from "common/TmFieldSeed"
+
 export default {
-  name: "ni-session-import",
+  name: "tm-session-import",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
+    TmBtn,
+    TmField,
     FieldSeed,
-    FormGroup,
-    FormMsg,
-    FormStruct
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct
   },
   data: () => ({
     fields: {
@@ -121,7 +122,7 @@ export default {
   },
   mounted() {
     this.$el.querySelector("#import-seed").focus()
-    new PerfectScrollbar(this.$el.querySelector(".ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector(".tm-session-main"))
   },
   validations: () => ({
     fields: {
diff --git a/app/src/renderer/components/common/TmSessionLoading.vue b/app/src/renderer/components/common/TmSessionLoading.vue
new file mode 100644
index 0000000000..f4adf086d4
--- /dev/null
+++ b/app/src/renderer/components/common/TmSessionLoading.vue
@@ -0,0 +1,11 @@
+<template lang="pug">
+.tm-session: .tm-session-container
+  .tm-session-header
+    .tm-session-title Loading&hellip;
+  .tm-session-main &nbsp
+  .tm-session-footer &nbsp;
+</template>
+
+<script>
+export default { name: "tm-session-loading" }
+</script>
diff --git a/app/src/renderer/components/common/NiSessionSignIn.vue b/app/src/renderer/components/common/TmSessionSignIn.vue
similarity index 69%
rename from app/src/renderer/components/common/NiSessionSignIn.vue
rename to app/src/renderer/components/common/TmSessionSignIn.vue
index 9b1cb57a84..ff88a544fa 100644
--- a/app/src/renderer/components/common/NiSessionSignIn.vue
+++ b/app/src/renderer/components/common/TmSessionSignIn.vue
@@ -1,48 +1,49 @@
 <template lang="pug">
-.ni-session: form-struct(:submit="onSubmit").ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit="onSubmit").tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Sign In
+    .tm-session-title Sign In
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
-    form-group(field-id='sign-in-name' field-label='Select Account')
-      field#sign-in-name(
+  .tm-session-main
+    tm-form-group(field-id='sign-in-name' field-label='Select Account')
+      tm-field#sign-in-name(
         type="select"
         v-model="fields.signInName"
         placeholder="Select account…"
         :options="accounts")
-      form-msg(name='Name' type='required' v-if='!$v.fields.signInName.required')
+      tm-form-msg(name='Name' type='required' v-if='!$v.fields.signInName.required')
 
-    form-group(:error='$v.fields.signInPassword.$error'
+    tm-form-group(:error='$v.fields.signInPassword.$error'
       field-id='sign-in-password' field-label='Password')
-      field#sign-in-password(
+      tm-field#sign-in-password(
         type="password"
         v-model="fields.signInPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
-      form-msg(v-if='mockedConnector') default password is 1234567890
-  .ni-session-footer
-    btn(icon="arrow_forward" icon-pos="right" value="Sign In" size="lg" color="primary")
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.signInPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signInPassword.minLength')
+      tm-form-msg(v-if='mockedConnector') default password is 1234567890
+
+  .tm-session-footer
+    tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import { required, minLength } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
 export default {
-  name: "ni-session-sign-in",
+  name: "tm-session-sign-in",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct
   },
   data: () => ({
     fields: {
@@ -118,7 +119,7 @@ export default {
 }
 </script>
 <style lang="stylus">
-.ni-form-group
+.tm-form-group
   a
     cursor pointer
 </style>
diff --git a/app/src/renderer/components/common/NiSessionSignUp.vue b/app/src/renderer/components/common/TmSessionSignUp.vue
similarity index 61%
rename from app/src/renderer/components/common/NiSessionSignUp.vue
rename to app/src/renderer/components/common/TmSessionSignUp.vue
index d9882384fd..41d3f39562 100644
--- a/app/src/renderer/components/common/NiSessionSignUp.vue
+++ b/app/src/renderer/components/common/TmSessionSignUp.vue
@@ -1,81 +1,81 @@
 <template lang="pug">
-.ni-session: form-struct(:submit='onSubmit').ni-session-container
-  .ni-session-header
+.tm-session: tm-form-struct(:submit='onSubmit').tm-session-container
+  .tm-session-header
     a(@click="setState('welcome')"): i.material-icons arrow_back
-    .ni-session-title Create Account
+    .tm-session-title Create Account
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
-    form-group(field-id='sign-up-name' field-label='Account Name' :error='$v.fields.signUpName.$error')
-      field#sign-up-name(
+  .tm-session-main
+    tm-form-group(field-id='sign-up-name' field-label='Account Name' :error='$v.fields.signUpName.$error')
+      tm-field#sign-up-name(
         type="text"
         placeholder="Must be at least 5 characters"
         v-model="fields.signUpName")
-      form-msg(name='Name' type='required' v-if='!$v.fields.signUpName.required')
-      form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.signUpName.minLength')
+      tm-form-msg(name='Name' type='required' v-if='!$v.fields.signUpName.required')
+      tm-form-msg(name='Name' type='minLength' min="5" v-if='!$v.fields.signUpName.minLength')
 
-    form-group(:error='$v.fields.signUpPassword.$error'
+    tm-form-group(:error='$v.fields.signUpPassword.$error'
       field-id='sign-up-password' field-label='Password')
-      field#sign-up-password(
+      tm-field#sign-up-password(
         type="password"
         placeholder="Must be at least 10 characters"
         v-model="fields.signUpPassword")
-      form-msg(name='Password' type='required' v-if='!$v.fields.signUpPassword.required')
-      form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signUpPassword.minLength')
+      tm-form-msg(name='Password' type='required' v-if='!$v.fields.signUpPassword.required')
+      tm-form-msg(name='Password' type='minLength' min="10" v-if='!$v.fields.signUpPassword.minLength')
 
-    form-group(:error='$v.fields.signUpPasswordConfirm.$error'
+    tm-form-group(:error='$v.fields.signUpPasswordConfirm.$error'
       field-id='sign-up-password-confirm' field-label='Confirm Password')
-      field#sign-up-password-confirm(
+      tm-field#sign-up-password-confirm(
         type="password"
         placeholder="Enter password again"
         v-model="fields.signUpPasswordConfirm")
-      form-msg(name='Password confirmation' type='match' v-if='!$v.fields.signUpPasswordConfirm.sameAsPassword')
+      tm-form-msg(name='Password confirmation' type='match' v-if='!$v.fields.signUpPasswordConfirm.sameAsPassword')
 
-    form-group(field-id='sign-up-seed' field-label='Seed Phrase')
+    tm-form-group(field-id='sign-up-seed' field-label='Seed Phrase')
       field-seed#sign-up-seed(v-model="fields.signUpSeed" disabled)
-      form-msg.sm
+      tm-form-msg.sm
         | Please back up the seed phrase for this account. This seed phrase cannot be recovered.
 
-    form-group(field-id="sign-up-warning" field-label=''
+    tm-form-group(field-id="sign-up-warning" field-label=''
       :error='$v.fields.signUpWarning.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#sign-up-warning(type="checkbox" v-model="fields.signUpWarning")
-        label.ni-field-checkbox-label(for="sign-up-warning")
+        label.tm-field-checkbox-label(for="sign-up-warning")
           | I have securely written down my seed. I understand that lost seeds cannot be recovered.
-      form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
+      tm-form-msg(name='Recovery confirmation' type='required' v-if='!$v.fields.signUpWarning.required')
 
-    form-group(field-id="error-collection" field-label=''
+    tm-form-group(field-id="error-collection" field-label=''
       :error='$v.fields.errorCollection.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#error-collection(type="checkbox" v-model="fields.errorCollection")
-        label.ni-field-checkbox-label(for="error-collection")
+        label.tm-field-checkbox-label(for="error-collection")
           | I'd like to opt in for remote error tracking to help improve Voyager.
 
-  .ni-session-footer
-    btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg" :disabled="creating")
+  .tm-session-footer
+    tm-btn(icon="arrow_forward" icon-pos="right" value="Next" size="lg" :disabled="creating")
 </template>
 
 <script>
 import { required, minLength, sameAs } from "vuelidate/lib/validators"
 import PerfectScrollbar from "perfect-scrollbar"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldSeed from "common/NiFieldSeed"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+import FieldSeed from "common/TmFieldSeed"
 export default {
-  name: "ni-session-sign-up",
+  name: "tm-session-sign-up",
   components: {
-    Btn,
-    Field,
+    TmBtn,
+    TmField,
     FieldSeed,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct
   },
   data: () => ({
     creating: true,
@@ -132,7 +132,7 @@ export default {
       this.creating = false
       this.fields.signUpSeed = seedPhrase
     })
-    new PerfectScrollbar(this.$el.querySelector(".ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector(".tm-session-main"))
   },
   validations: () => ({
     fields: {
diff --git a/app/src/renderer/components/common/NiSessionWelcome.vue b/app/src/renderer/components/common/TmSessionWelcome.vue
similarity index 80%
rename from app/src/renderer/components/common/NiSessionWelcome.vue
rename to app/src/renderer/components/common/TmSessionWelcome.vue
index d57df6338b..64166fe45f 100644
--- a/app/src/renderer/components/common/NiSessionWelcome.vue
+++ b/app/src/renderer/components/common/TmSessionWelcome.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-#session-welcome.ni-session: .ni-session-container
-  .ni-session-header
+#session-welcome.tm-session: .tm-session-container
+  .tm-session-header
     a &nbsp;
-    .ni-session-title Sign in to Cosmos Voyager
+    .tm-session-title Sign in to Cosmos Voyager
     a(@click="help"): i.material-icons help_outline
-  .ni-session-main
+  .tm-session-main
     li-session(
       v-if="accountExists"
       @click.native="setState('sign-in')"
@@ -28,20 +28,18 @@
       title="Sign in with hardware"
       subtitle="If you have a Ledger Wallet, choose this option.")
     fundraiser-warning
-  .ni-session-footer
+  .tm-session-footer
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import PerfectScrollbar from "perfect-scrollbar"
 import FundraiserWarning from "common/FundraiserWarning"
-import ListItem from "common/NiListItem"
-import LiSession from "common/NiLiSession"
+import LiSession from "common/TmLiSession"
 export default {
-  name: "ni-session-welcome",
+  name: "tm-session-welcome",
   components: {
     FundraiserWarning,
-    ListItem,
     LiSession
   },
   computed: {
@@ -59,7 +57,7 @@ export default {
     }
   },
   mounted() {
-    new PerfectScrollbar(this.$el.querySelector(".ni-session-main"))
+    new PerfectScrollbar(this.$el.querySelector(".tm-session-main"))
   }
 }
 </script>
diff --git a/app/src/renderer/components/common/TmToolBar.vue b/app/src/renderer/components/common/TmToolBar.vue
new file mode 100644
index 0000000000..a2d14b5ecb
--- /dev/null
+++ b/app/src/renderer/components/common/TmToolBar.vue
@@ -0,0 +1,29 @@
+<template lang="pug">
+  tm-tool-bar
+    slot
+    a.back(@click="$router.go(-1)" v-tooltip.bottom="'Back'")
+      i.material-icons arrow_back
+    a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
+      i.material-icons help_outline
+    a.sign-out(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
+      i.material-icons exit_to_app
+</template>
+
+<script>
+import { TmToolBar } from "@tendermint/ui"
+export default {
+  // the name needs to be different from TmToolBar (tm-tool-bar) or else recursive rendering takes place
+  name: "vm-tool-bar",
+  components: {
+    TmToolBar
+  },
+  methods: {
+    enableModalHelp() {
+      this.$store.commit("setModalHelp", true)
+    },
+    signOut() {
+      this.$store.dispatch("signOut")
+    }
+  }
+}
+</script>
diff --git a/app/src/renderer/components/common/NiUserPane.vue b/app/src/renderer/components/common/TmUserPane.vue
similarity index 79%
rename from app/src/renderer/components/common/NiUserPane.vue
rename to app/src/renderer/components/common/TmUserPane.vue
index 5aae1253d5..dafc72334d 100644
--- a/app/src/renderer/components/common/NiUserPane.vue
+++ b/app/src/renderer/components/common/TmUserPane.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-list-item.ni-li-user(
+tm-list-item.tm-li-user(
   v-if="user.signedIn"
   type="link"
   to="/preferences"
@@ -11,10 +11,10 @@ list-item.ni-li-user(
 <script>
 import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
-import ListItem from "common/NiListItem"
+import { TmListItem } from "@tendermint/ui"
 export default {
-  name: "ni-user-pane",
-  components: { ListItem },
+  name: "tm-user-pane",
+  components: { TmListItem },
   computed: { ...mapGetters(["user", "config"]) },
   methods: {
     close() {
@@ -28,7 +28,7 @@ export default {
 <style lang="stylus">
 @import '~variables'
 
-.ni-li.ni-li-user
+.tm-li.tm-li-user
   border-top px solid var(--bc)
   height 3.5rem + px
 </style>
diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
index 10d04ae25d..69c87a9df8 100644
--- a/app/src/renderer/components/govern/PageProposal.vue
+++ b/app/src/renderer/components/govern/PageProposal.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-page(:title='proposal.title')
+tm-page(:title='proposal.title')
   div(slot="menu"): tool-bar
     a(@click="commentOnProposal(proposal.id)"): i.material-icons comment
     a(@click="proposalIsSpam(proposal.id)"): i.material-icons error
 
-  part(v-if="proposal.type === 'text'")
+  tm-part(v-if="proposal.type === 'text'")
     div(slot='title') Proposed by #[router-link(:to="{ name: 'delegate', params: { delegate: proposal.validatorId }}") {{ proposal.validatorId }}]
     text-block(:content="proposal.data.text")
 
-  part(title='Time to vote: 13D 23H 27M'): form-struct(:submit='confirmVote')
+  tm-part(title='Time to vote: 13D 23H 27M'): tm-form-struct(:submit='confirmVote')
     field-vote(@click.native="vote('yes')" dt='Yes' :dd='yesPct'
       color='hsl(120,50%,35%)' :active="votePick === 'yes'" :results="voteVisible")
 
@@ -22,27 +22,24 @@ page(:title='proposal.title')
       color='hsl(0,0%,35%)' :active="votePick === 'abstain'" :results="voteVisible")
 
     div(slot='footer')
-      btn(theme='cosmos' type='button' @click.native="toggleVoteVisible" value='Toggle Results')
-      btn(theme='cosmos' type='submit' value='Confirm Vote')
+      tm-btn(theme='cosmos' type='button' @click.native="toggleVoteVisible" value='Toggle Results')
+      tm-btn(theme='cosmos' type='submit' value='Confirm Vote')
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import FieldVote from "common/NiFieldVote"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
+import FieldVote from "common/TmFieldVote"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposal",
   components: {
-    Btn,
+    TmBtn,
     FieldVote,
-    FormStruct,
-    Page,
-    Part,
+    TmFormStruct,
+    TmPage,
+    TmPart,
     TextBlock,
     ToolBar
   },
diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
index e16b1b42b9..941d723506 100644
--- a/app/src/renderer/components/govern/PageProposals.vue
+++ b/app/src/renderer/components/govern/PageProposals.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Proposals')
+tm-page(title='Proposals')
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'New Proposal'")
       i.material-icons add
@@ -21,15 +21,13 @@ page(title='Proposals')
 import { mapGetters } from "vuex"
 import { includes, orderBy } from "lodash"
 import Mousetrap from "mousetrap"
-import DataLoading from "common/NiDataLoading"
-import DataEmpty from "common/NiDataEmpty"
-import DataEmptySearch from "common/NiDataEmptySearch"
+import DataLoading from "common/TmDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import DataEmptySearch from "common/TmDataEmptySearch"
 import LiProposal from "govern/LiProposal"
-import ModalSearch from "common/NiModalSearch"
-import TabBar from "common/NiTabBar"
-import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import ModalSearch from "common/TmModalSearch"
+import ToolBar from "common/TmToolBar"
+import { TmPage } from "@tendermint/ui"
 export default {
   name: "page-proposals",
   components: {
@@ -38,9 +36,7 @@ export default {
     DataEmptySearch,
     LiProposal,
     ModalSearch,
-    Page,
-    Part,
-    TabBar,
+    TmPage,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
index 4706bd36a5..a0650eae73 100644
--- a/app/src/renderer/components/govern/PageProposalsNew.vue
+++ b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -1,27 +1,25 @@
 <template lang="pug">
-page(title='New Proposal')
+tm-page(title='New Proposal')
   div(slot="menu"): tool-bar
     router-link(to="/proposals" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  part(title='Choose a Type')
-    list-item(title='Adjust Parameters' to="/proposals/new/adjust")
-    list-item(title='Amend Constitution' to="/proposals/new/amend")
-    list-item(title='Create Atoms' to="/proposals/new/create")
-    list-item(title='Plain Text' to="/proposals/new/text")
-    list-item(title='Upgrade Code' to="/proposals/new/upgrade")
+  tm-part(title='Choose a Type')
+    tm-list-item(title='Adjust Parameters' to="/proposals/new/adjust")
+    tm-list-item(title='Amend Constitution' to="/proposals/new/amend")
+    tm-list-item(title='Create Atoms' to="/proposals/new/create")
+    tm-list-item(title='Plain Text' to="/proposals/new/text")
+    tm-list-item(title='Upgrade Code' to="/proposals/new/upgrade")
 </template>
 
 <script>
-import ListItem from "common/NiListItem"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
-import ToolBar from "common/NiToolBar"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new",
   components: {
-    ListItem,
-    Page,
-    Part,
+    TmListItem,
+    TmPage,
+    TmPart,
     ToolBar
   }
 }
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
index bd55c07d2c..76f01ecde6 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -1,56 +1,56 @@
 <template lang="pug">
-page(title="Proposal: Adjust Parameters")
+tm-page(title="Proposal: Adjust Parameters")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+  tm-form-struct(:submit="onSubmit")
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      tm-form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      tm-form-msg(name='Proposal Body' type='length'
         :min='bodyMinLength' :max='bodyMaxLength'
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-adjust",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
index 27faf479dd..c9f9175423 100644
--- a/app/src/renderer/components/govern/PageProposalsNewAmend.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -1,56 +1,56 @@
 <template lang="pug">
-page(title="Proposal: Amend Constitution")
+tm-page(title="Proposal: Amend Constitution")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+  tm-form-struct(:submit="onSubmit")
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      tm-form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      tm-form-msg(name='Proposal Body' type='length'
         :min='bodyMinLength' :max='bodyMaxLength'
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-amend",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
index c69ca7786c..9132f4e835 100644
--- a/app/src/renderer/components/govern/PageProposalsNewCreate.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -1,56 +1,56 @@
 <template lang="pug">
-page(title="Proposal: Create Atoms")
+tm-page(title="Proposal: Create Atoms")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+  tm-form-struct(:submit="onSubmit")
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      tm-form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      tm-form-msg(name='Proposal Body' type='length'
         :min='bodyMinLength' :max='bodyMaxLength'
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-create",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
index 459cbc655d..02df66780f 100644
--- a/app/src/renderer/components/govern/PageProposalsNewText.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -1,56 +1,57 @@
 <template lang="pug">
-page(title="Proposal: Freeform Text")
+tm-page(title="Proposal: Freeform Text")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+  tm-form-struct(:submit="onSubmit")
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      tm-form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      tm-form-msg(name='Proposal Body' type='length'
         :min='bodyMinLength' :max='bodyMaxLength'
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-text",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
index 9dbbdd72fe..d650d8b4d1 100644
--- a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
+++ b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -1,56 +1,57 @@
 <template lang="pug">
-page(title="Proposal: Upgrade Code")
+tm-page(title="Proposal: Upgrade Code")
   div(slot="menu"): tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
-  form-struct(:submit="onSubmit")
-    form-group(:error="$v.fields.title.$error"
+  tm-form-struct(:submit="onSubmit")
+    tm-form-group(:error="$v.fields.title.$error"
       field-id='proposal-title' field-label='Proposal Title')
-      field#proposal-title(
+      tm-field#proposal-title(
         type="text"
         placeholder="Proposal Title"
         v-model="fields.title")
-      form-msg(name='Proposal Title' type='required'
+      tm-form-msg(name='Proposal Title' type='required'
         v-if='!$v.fields.title.required')
-      form-msg(name='Proposal Title' type='length'
+      tm-form-msg(name='Proposal Title' type='length'
         :min='titleMinLength' :max='titleMaxLength'
         v-if='!$v.fields.title.minLength || !$v.fields.title.maxLength')
-    form-group(:error="$v.fields.body.$error"
+    tm-form-group(:error="$v.fields.body.$error"
       field-id='proposal-body' field-label='Proposal Body')
-      field#proposal-body(
+      tm-field#proposal-body(
         type="textarea"
         placeholder="Write your proposal here..."
         v-model="fields.body")
-      form-msg(name='Proposal Body' type='required'
+      tm-form-msg(name='Proposal Body' type='required'
         v-if='!$v.fields.body.required')
-      form-msg(name='Proposal Body' type='length'
+      tm-form-msg(name='Proposal Body' type='length'
         :min='bodyMinLength' :max='bodyMaxLength'
         v-if='!$v.fields.body.minLength || !$v.fields.body.maxLength')
     div(slot="footer")
       div
-      btn(icon="send" value="Propose" type="submit")
+      tm-btn(icon="send" value="Propose" type="submit")
 </template>
 
 <script>
 import { minLength, maxLength, required } from "vuelidate/lib/validators"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-proposals-new-upgrade",
   components: {
-    Btn,
-    Field,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
+    TmBtn,
+    TmField,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
     ToolBar
   },
   data: () => ({
diff --git a/app/src/renderer/components/monitor/PageBlock.vue b/app/src/renderer/components/monitor/PageBlock.vue
index 65233fce5e..d74c4a8d0d 100644
--- a/app/src/renderer/components/monitor/PageBlock.vue
+++ b/app/src/renderer/components/monitor/PageBlock.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(:title="pageBlockTitle")
+tm-page(:title="pageBlockTitle")
   data-loading(v-if="blockchain.blockLoading")
   data-empty(v-else-if="!block || !block.header || !blockMeta")
   template(v-else)
@@ -15,33 +15,33 @@ page(:title="pageBlockTitle")
         v-tooltip.bottom="'Newer Block'")
         i.material-icons chevron_right
 
-    part(title='')
-      list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
+    tm-part(title='')
+      tm-list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
 
-    part(title='Header')
-      list-item(dt="Chain ID" :dd="block.header.chain_id")
-      list-item(dt="Time" :dd="blockHeaderTime")
-      list-item(dt="Transactions" :dd="block.header.num_txs")
-      list-item(dt="Last Commit Hash" :dd="block.header.last_commit_hash")
-      list-item(dt="Validators Hash" :dd="block.header.validators_hash")
-      list-item(dt="App Hash" :dd="block.header.app_hash")
+    tm-part(title='Header')
+      tm-list-item(dt="Chain ID" :dd="block.header.chain_id")
+      tm-list-item(dt="Time" :dd="blockHeaderTime")
+      tm-list-item(dt="Transactions" :dd="block.header.num_txs")
+      tm-list-item(dt="Last Commit Hash" :dd="block.header.last_commit_hash")
+      tm-list-item(dt="Validators Hash" :dd="block.header.validators_hash")
+      tm-list-item(dt="App Hash" :dd="block.header.app_hash")
 
-    part(title='Last Block')
-      list-item(dt="Hash" :dd="block.header.last_block_id.hash")
-      list-item(dt="Parts Total"
+    tm-part(title='Last Block')
+      tm-list-item(dt="Hash" :dd="block.header.last_block_id.hash")
+      tm-list-item(dt="Parts Total"
         :dd="block.header.last_block_id.parts.total")
-      list-item(dt="Parts Hash" :dd="block.header.last_block_id.parts.hash")
+      tm-list-item(dt="Parts Hash" :dd="block.header.last_block_id.parts.hash")
 
-    part(title="Precommit"
+    tm-part(title="Precommit"
       v-for="p in block.last_commit.precommits"
       :key="p.validator_address" v-if="p !== null")
-      list-item(dt="Address" :dd="p.validator_address")
-      list-item(dt="Index" :dd="p.validator_index")
-      list-item(dt="Round" :dd="p.round")
-      list-item(:dt="`Sig (${p.signature.type})`"
+      tm-list-item(dt="Address" :dd="p.validator_address")
+      tm-list-item(dt="Index" :dd="p.validator_index")
+      tm-list-item(dt="Round" :dd="p.round")
+      tm-list-item(:dt="`Sig (${p.signature.type})`"
       :dd="p.signature.data")
 
-    part(title='Transactions')
+    tm-part(title='Transactions')
       data-loading(v-if="blockchain.blockLoading")
       data-empty(v-else-if="block.header.num_txs === 0" title="Empty Block" subtitle="There were no transactions in this block.")
       template(
@@ -61,12 +61,10 @@ import { mapGetters } from "vuex"
 import moment from "moment"
 import num from "scripts/num"
 import LiTransaction from "wallet/LiTransaction"
-import DataLoading from "common/NiDataLoading"
-import DataEmpty from "common/NiDataEmpty"
-import ToolBar from "common/NiToolBar"
-import ListItem from "common/NiListItem"
-import Part from "common/NiPart"
-import Page from "common/NiPage"
+import DataLoading from "common/TmDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import ToolBar from "common/TmToolBar"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-block",
   components: {
@@ -74,9 +72,9 @@ export default {
     DataLoading,
     DataEmpty,
     ToolBar,
-    ListItem,
-    Part,
-    Page
+    TmListItem,
+    TmPart,
+    TmPage
   },
   computed: {
     ...mapGetters(["blockchain", "blockTxInfo", "config"]),
diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue
index 300afc03da..b0cc25e8c7 100644
--- a/app/src/renderer/components/monitor/PageBlocks.vue
+++ b/app/src/renderer/components/monitor/PageBlocks.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Block Explorer')
+tm-page(title='Block Explorer')
   div(slot="menu"): tool-bar
     a(@click='setSearch()' v-tooltip.bottom="'Search Block'" :disabled="!somethingToSearch")
       i.material-icons search
@@ -9,14 +9,14 @@ page(title='Block Explorer')
   data-loading(v-if="blockchain.syncing" title="Node is syncing blockchain…")
   data-loading(v-if="!blockchain.syncing && !blockchain.subscription")
 
-  part(title='Current Block' v-if="blockchain.subscription")
-    list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")
-    list-item(dt='Block Time' :dd='latestBlockTime')
-    list-item(dt='Block Hash' :dd='latestBlockHash')
+  tm-part(title='Current Block' v-if="blockchain.subscription")
+    tm-list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")
+    tm-list-item(dt='Block Time' :dd='latestBlockTime')
+    tm-list-item(dt='Block Hash' :dd='latestBlockHash')
 
-  part(title='Latest Blocks' v-if="blockchain.subscription")
-    list-item.column-header(dt="Block Height" dd="# of Transactions")
-    list-item(
+  tm-part(title='Latest Blocks' v-if="blockchain.subscription")
+    tm-list-item.column-header(dt="Block Height" dd="# of Transactions")
+    tm-list-item(
       v-for="block in blocks"
       :key="block.header.height"
       :dt="num.prettyInt(block.header.height)"
@@ -29,21 +29,19 @@ import moment from "moment"
 import Mousetrap from "mousetrap"
 import num from "scripts/num"
 import { mapGetters } from "vuex"
-import ListItem from "common/NiListItem"
-import DataError from "common/NiDataError"
-import DataLoading from "common/NiDataLoading"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
-import ToolBar from "common/NiToolBar"
-import ModalSearch from "common/NiModalSearch"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import DataError from "common/TmDataError"
+import DataLoading from "common/TmDataLoading"
+import ToolBar from "common/TmToolBar"
+import ModalSearch from "common/TmModalSearch"
 export default {
   name: "page-blocks",
   components: {
-    ListItem,
+    TmListItem,
     DataError,
     DataLoading,
-    Page,
-    Part,
+    TmPage,
+    TmPart,
     ToolBar,
     ModalSearch
   },
@@ -83,8 +81,8 @@ export default {
 @require '~variables'
 
 .column-header
-  .ni-li-dd,
-  .ni-li-dt
+  .tm-li-dd,
+  .tm-li-dt
     font-size sm
     color var(--dim)
 </style>
diff --git a/app/src/renderer/components/staking/LiDelegate.vue b/app/src/renderer/components/staking/LiDelegate.vue
index 691e026673..afcf2d9dcb 100644
--- a/app/src/renderer/components/staking/LiDelegate.vue
+++ b/app/src/renderer/components/staking/LiDelegate.vue
@@ -25,12 +25,10 @@
 <script>
 import { mapGetters } from "vuex"
 import num from "scripts/num"
-import Btn from "@nylira/vue-button"
 import { maxBy } from "lodash"
 export default {
   name: "li-delegate",
   props: ["delegate"],
-  components: { Btn },
   computed: {
     ...mapGetters([
       "shoppingCart",
diff --git a/app/src/renderer/components/staking/PageBond.vue b/app/src/renderer/components/staking/PageBond.vue
index 3ea9ed4564..2c549c089e 100644
--- a/app/src/renderer/components/staking/PageBond.vue
+++ b/app/src/renderer/components/staking/PageBond.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-page.page-bond(:title="`Bond ${denom}`")
+tm-page.page-bond(:title="`Bond ${denom}`")
   div(slot="menu"): tool-bar
-  part(:title="`Start bonding your ${totalAtoms} ${denom}`"): form-struct( :submit="onSubmit")
+  tm-part(:title="`Start bonding your ${totalAtoms} ${denom}`"): tm-form-struct( :submit="onSubmit")
     .bond-group(:class="bondGroupClass(unbondedAtomsDelta)")
       .bond-group__fields
         .bond-bar
@@ -15,14 +15,14 @@ page.page-bond(:title="`Bond ${denom}`")
         .bond-percent
           label.bond-delta
             span(v-if="unbondedAtomsDeltaPct !== '0%'") {{ unbondedAtomsDeltaPct }}
-          field.bond-percent__input(
+          tm-field.bond-percent__input(
             disabled
             placeholder="0%"
             :value="bondBarPercent(newUnbondedAtoms)")
         .bond-value
           label.bond-delta
             span(v-if="unbondedAtomsDelta !== 0") {{ unbondedAtomsDelta }}
-          field.bond-value__input#new-unbonded-atoms(
+          tm-field.bond-value__input#new-unbonded-atoms(
             disabled
             type="number"
             placeholder="Atoms"
@@ -45,14 +45,14 @@ page.page-bond(:title="`Bond ${denom}`")
         .bond-percent
           label.bond-delta
             span(v-if="d.deltaAtomsPercent !== '0%'") {{ d.deltaAtomsPercent }}
-          field.bond-percent__input(
+          tm-field.bond-percent__input(
             disabled
             placeholder="0%"
             :value="bondBarPercent(d.atoms)")
         .bond-value
           label.bond-delta
             span(v-if="d.deltaAtoms !== 0") {{ d.deltaAtoms }}
-          field.bond-value__input(
+          tm-field.bond-value__input(
             type="number"
             placeholder="Atoms"
             step="1"
@@ -61,11 +61,11 @@ page.page-bond(:title="`Bond ${denom}`")
             v-model.number="d.atoms"
             @change.native="limitMax(d, $event)")
 
-      form-msg(name="Atoms" type="required"
+      tm-form-msg(name="Atoms" type="required"
         v-if="!$v.fields.delegates.$each[index].atoms.required")
-      form-msg(name="Atoms" type="numeric"
+      tm-form-msg(name="Atoms" type="numeric"
         v-if="!$v.fields.delegates.$each[index].atoms.numeric")
-      form-msg(name="Atoms" type="between" :min="minimumAtoms" :max="$v.fields.delegates.$each[index].atoms.$params.between.max"
+      tm-form-msg(name="Atoms" type="between" :min="minimumAtoms" :max="$v.fields.delegates.$each[index].atoms.$params.between.max"
         v-if="!$v.fields.delegates.$each[index].atoms.between")
 
     .bond-group.bond-group--unbonding(
@@ -84,32 +84,32 @@ page.page-bond(:title="`Bond ${denom}`")
         .bond-percent
           label.bond-delta
             span(v-if="newUnbondingAtomsDeltaPct !== '0%'") {{ newUnbondingAtomsDeltaPct }}
-          field.bond-percent__input(
+          tm-field.bond-percent__input(
             disabled
             placeholder="0%"
             :value="bondBarPercent(newUnbondingAtoms)")
         .bond-value
           label.bond-delta
             span(v-if="newUnbondingAtomsDelta !== 0") {{ newUnbondingAtomsDelta }}
-          field.bond-value__input#new-unbonding-atoms(
+          tm-field.bond-value__input#new-unbonding-atoms(
             disabled
             type="number"
             placeholder="Atoms"
             :value="newUnbondingAtoms")
 
-    form-group(field-id="bond-confirm" field-label=''
+    tm-form-group(field-id="bond-confirm" field-label=''
       :error='$v.fields.bondConfirm.$error')
-      .ni-field-checkbox
-        .ni-field-checkbox-input
+      .tm-field-checkbox
+        .tm-field-checkbox-input
           input#bond-confirm(type="checkbox" v-model="fields.bondConfirm")
-        label.ni-field-checkbox-label(for="bond-confirm")
+        label.tm-field-checkbox-label(for="bond-confirm")
           | Yes, update my bonds. I understand unbonding will take 30 days.
-      form-msg(name="Bonding Confirmation" type='required'
+      tm-form-msg(name="Bonding Confirmation" type='required'
         v-if='!$v.fields.bondConfirm.required')
 
     div(slot='footer')
-      btn#btn-reset(type="button" @click.native="resetFields" value="Reset" color="danger")
-      btn#btn-bond(value="Submit" color="primary")
+      tm-btn#btn-reset(type="button" @click.native="resetFields" value="Reset" color="danger")
+      tm-btn#btn-bond(value="Submit" color="primary")
 </template>
 
 <script>
@@ -117,28 +117,29 @@ import { between, numeric, required } from "vuelidate/lib/validators"
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import interact from "interactjs"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldAddon from "common/NiFieldAddon"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmPart,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+
+import FieldAddon from "common/TmFieldAddon"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-bond",
   components: {
-    Btn,
-    Field,
+    TmBtn,
+    TmField,
     FieldAddon,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
-    Part,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/staking/PageDelegate.vue b/app/src/renderer/components/staking/PageDelegate.vue
index c262df226f..b87c7eb725 100644
--- a/app/src/renderer/components/staking/PageDelegate.vue
+++ b/app/src/renderer/components/staking/PageDelegate.vue
@@ -1,35 +1,31 @@
 <template lang="pug">
-page(:title="delegateType + ' Profile'")
+tm-page(:title="delegateType + ' Profile'")
   div(slot="menu"): tool-bar
 
-  part(:title="delegateType + ' Info'")
-    list-item(dt='Moniker' :dd='delegate.moniker')
-    list-item(dt='Website' :dd='delegate.website')
-    list-item(dt='Address' :dd='delegate.address')
-    list-item(dt='Public Key' :dd='delegate.pub_key.data')
+  tm-part(:title="delegateType + ' Info'")
+    tm-list-item(dt='Moniker' :dd='delegate.moniker')
+    tm-list-item(dt='Website' :dd='delegate.website')
+    tm-list-item(dt='Address' :dd='delegate.address')
+    tm-list-item(dt='Public Key' :dd='delegate.pub_key.data')
 
-  part(:title="delegateType + ' Description'")
+  tm-part(:title="delegateType + ' Description'")
     text-block(:content="delegate.details || 'No description available.'")
 
-  part(:title="delegateType + ' Details'" v-if="isValidator")
-    list-item(dt="Total Vote Power" :dd="delegate.voting_power")
+  tm-part(:title="delegateType + ' Details'" v-if="isValidator")
+    tm-list-item(dt="Total Vote Power" :dd="delegate.voting_power")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import ListItem from "common/NiListItem"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-delegate",
   components: {
-    Btn,
-    ListItem,
-    Page,
-    Part,
+    TmListItem,
+    TmPage,
+    TmPart,
     TextBlock,
     ToolBar
   },
diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
index 7c01a8ea56..7e84184639 100644
--- a/app/src/renderer/components/staking/PageStaking.vue
+++ b/app/src/renderer/components/staking/PageStaking.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Staking')
+tm-page(title='Staking')
   div(slot="menu"): tool-bar
     a(@click='updateDelegates()' v-tooltip.bottom="'Refresh'")
       i.material-icons refresh
@@ -19,10 +19,10 @@ page(title='Staking')
   .fixed-button-bar(v-if="!delegates.loading")
     template(v-if="userCanDelegate")
       .label #[strong {{ shoppingCart.length }}] delegates selected
-      btn(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next" color="primary")
+      tm-btn(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next" color="primary")
     template(v-else)
       .label You do not have any ATOMs to delegate.
-      btn(disabled icon="chevron_right" icon-pos="right" value="Next" color="primary")
+      tm-btn(disabled icon="chevron_right" icon-pos="right" value="Next" color="primary")
 </template>
 
 <script>
@@ -31,28 +31,24 @@ import num from "scripts/num"
 import { includes, orderBy, forEach } from "lodash"
 import Mousetrap from "mousetrap"
 import LiDelegate from "staking/LiDelegate"
-import Btn from "@nylira/vue-button"
-import DataEmpty from "common/NiDataEmpty"
-import DataEmptySearch from "common/NiDataEmptySearch"
-import DataLoading from "common/NiDataLoading"
-import Field from "@nylira/vue-field"
-import ModalSearch from "common/NiModalSearch"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmBtn, TmPage } from "@tendermint/ui"
+import DataEmpty from "common/TmDataEmpty"
+import DataEmptySearch from "common/TmDataEmptySearch"
+import DataLoading from "common/TmDataLoading"
+
+import ModalSearch from "common/TmModalSearch"
 import PanelSort from "staking/PanelSort"
-import ToolBar from "common/NiToolBar"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-staking",
   components: {
     LiDelegate,
-    Btn,
+    TmBtn,
     DataEmpty,
     DataEmptySearch,
     DataLoading,
-    Field,
     ModalSearch,
-    Page,
-    Part,
+    TmPage,
     PanelSort,
     ToolBar
   },
diff --git a/app/src/renderer/components/wallet/LiTransaction.vue b/app/src/renderer/components/wallet/LiTransaction.vue
index 26061a55c3..fd7c041eff 100644
--- a/app/src/renderer/components/wallet/LiTransaction.vue
+++ b/app/src/renderer/components/wallet/LiTransaction.vue
@@ -10,15 +10,15 @@ mixin tx-container-sent
       .tx-element.tx-address(v-if="!sentSelf") Sent to {{ receiver }}
       .tx-element.tx-address(v-if="sentSelf") You sent this amount to yourself.
 
-.ni-li-tx(v-if="sentSelf" @click="() => devMode && viewTransaction()")
+.tm-li-tx(v-if="sentSelf" @click="() => devMode && viewTransaction()")
   .tx-icon: i.material-icons swap_horiz
   +tx-container-sent
 
-.ni-li-tx.ni-li-tx-sent(v-else-if="sent" @click="() => devMode && viewTransaction()")
+.tm-li-tx.tm-li-tx-sent(v-else-if="sent" @click="() => devMode && viewTransaction()")
   .tx-icon: i.material-icons remove_circle
   +tx-container-sent
 
-.ni-li-tx.ni-li-tx-received(v-else @click="() => devMode && viewTransaction()")
+.tm-li-tx.tm-li-tx-received(v-else @click="() => devMode && viewTransaction()")
   .tx-icon: i.material-icons add_circle
   .tx-container
     .tx-element.tx-coins
@@ -34,7 +34,7 @@ mixin tx-container-sent
 import num from "scripts/num"
 import moment from "moment"
 export default {
-  name: "ni-li-tx",
+  name: "tm-li-tx",
   computed: {
     transactionValue() {
       return this.transaction.tx.value.msg.value
@@ -84,7 +84,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.ni-li-tx
+.tm-li-tx
   display flex
   font-size sm
   border-bottom 1px solid var(--bc-dim)
@@ -136,12 +136,12 @@ export default {
     color var(--dim)
     font-size sm
 
-  &.ni-li-tx-sent
+  &.tm-li-tx-sent
     .tx-icon, .tx-coin .value
       &:before
         content '-'
 
-  &.ni-li-tx-received
+  &.tm-li-tx-received
     .tx-icon
       background var(--app-fg)
 
@@ -156,7 +156,7 @@ export default {
     background var(--hover-bg)
 
 @media screen and (min-width: 700px)
-  .ni-li-tx
+  .tm-li-tx
     font-size 0.875rem
 
     .tx-container
diff --git a/app/src/renderer/components/wallet/PageSend.vue b/app/src/renderer/components/wallet/PageSend.vue
index bc427dda7d..00210d2a8c 100644
--- a/app/src/renderer/components/wallet/PageSend.vue
+++ b/app/src/renderer/components/wallet/PageSend.vue
@@ -1,79 +1,82 @@
 <template lang='pug'>
-page(title='Send')
+tm-page(title='Send')
   div(slot="menu"): tool-bar
-  form-struct(:submit="onSubmit")
-    part(title='Denomination Options')
-      form-group(:error='$v.fields.denom.$error'
+  tm-form-struct(:submit="onSubmit")
+    tm-part(title='Denomination Options')
+      tm-form-group(:error='$v.fields.denom.$error'
         field-id='send-denomination' field-label='Denomination')
-        field#send-denomination(
+        tm-field#send-denomination(
           type="select"
           v-model="fields.denom"
           :options="denominations"
           placeholder="Select token...")
-        form-msg(name='Denomination' type='required' v-if='!$v.fields.denom.required')
+        tm-form-msg(name='Denomination' type='required' v-if='!$v.fields.denom.required')
 
-    part(title='Transaction Details')
-      form-group(:error='$v.fields.zoneId.$error'
+    tm-part(title='Transaction Details')
+      tm-form-group(:error='$v.fields.zoneId.$error'
         v-if="config.devMode"
         field-id='send-zone-id' field-label='Zone ID')
-        field#send-zone-id(
+        tm-field#send-zone-id(
           type="select"
           v-model="fields.zoneId"
           :options="zoneIds"
           placeholder="Select zone...")
-        form-msg(name='Zone' type='required' v-if='!$v.fields.zoneId.required')
-      form-group(:error='$v.fields.address.$error'
+        tm-form-msg(name='Zone' type='required' v-if='!$v.fields.zoneId.required')
+      tm-form-group(:error='$v.fields.address.$error'
         field-id='send-address' field-label='Send To')
-        field-group
-          field#send-address(
+        tm-field-group
+          tm-field#send-address(
             type='text'
             v-model='fields.address'
             placeholder='Address')
-        form-msg(name='Address' type='required' v-if='!$v.fields.address.required')
-        form-msg(name='Address' type='bech32' :body="bech32error" v-else-if='!$v.fields.address.bech32Validate')
+        tm-form-msg(name='Address' type='required' v-if='!$v.fields.address.required')
+        tm-form-msg(name='Address' type='bech32' :body="bech32error" v-else-if='!$v.fields.address.bech32Validate')
 
-      form-group(:error='$v.fields.amount.$error'
+      tm-form-group(:error='$v.fields.amount.$error'
         field-id='send-amount' field-label='Amount')
-        field-group
-          field#send-amount(
+        tm-field-group
+          tm-field#send-amount(
             type='number'
             v-model='fields.amount'
             placeholder='Amount')
-        form-msg(name='Amount' type='required' v-if='!$v.fields.amount.required')
-        form-msg(name='Amount' type='between' :min='max ? 1 : 0' :max='max'
+        tm-form-msg(name='Amount' type='required' v-if='!$v.fields.amount.required')
+        tm-form-msg(name='Amount' type='between' :min='max ? 1 : 0' :max='max'
           v-if='!$v.fields.amount.between')
 
     div(slot='footer')
       div
-      btn(v-if='sending' value='Sending...' disabled color="primary")
-      btn(v-else @click='onSubmit' value="Send Tokens" color="primary")
+      tm-btn(v-if='sending' value='Sending...' disabled color="primary")
+      tm-btn(v-else @click='onSubmit' value="Send Tokens" color="primary")
 </template>
 
 <script>
 import b32 from "scripts/b32"
 import { required, between } from "vuelidate/lib/validators"
 import { mapActions, mapGetters } from "vuex"
-import Btn from "@nylira/vue-button"
-import Field from "@nylira/vue-field"
-import FieldAddon from "common/NiFieldAddon"
-import FieldGroup from "common/NiFieldGroup"
-import FormGroup from "common/NiFormGroup"
-import FormMsg from "common/NiFormMsg"
-import FormStruct from "common/NiFormStruct"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
-import ToolBar from "common/NiToolBar"
+import {
+  TmBtn,
+  TmFieldGroup,
+  TmFormGroup,
+  TmFormStruct,
+  TmPage,
+  TmPart,
+  TmField,
+  TmFormMsg
+} from "@tendermint/ui"
+
+import FieldAddon from "common/TmFieldAddon"
+import ToolBar from "common/TmToolBar"
 export default {
   components: {
-    Btn,
-    Field,
+    TmBtn,
+    TmField,
     FieldAddon,
-    FieldGroup,
-    FormGroup,
-    FormMsg,
-    FormStruct,
-    Page,
-    Part,
+    TmFieldGroup,
+    TmFormGroup,
+    TmFormMsg,
+    TmFormStruct,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/wallet/PageTransactions.vue b/app/src/renderer/components/wallet/PageTransactions.vue
index 9635cf6fa5..5e2d99650d 100644
--- a/app/src/renderer/components/wallet/PageTransactions.vue
+++ b/app/src/renderer/components/wallet/PageTransactions.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Transactions')
+tm-page(title='Transactions')
   div(slot="menu"): tool-bar
     a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.material-icons search
@@ -23,14 +23,13 @@ import shortid from "shortid"
 import { mapGetters } from "vuex"
 import { includes, orderBy, uniqBy } from "lodash"
 import Mousetrap from "mousetrap"
-import DataLoading from "common/NiDataLoading"
-import DataEmptySearch from "common/NiDataEmptySearch"
-import DataEmptyTx from "common/NiDataEmptyTx"
+import DataLoading from "common/TmDataLoading"
+import DataEmptySearch from "common/TmDataEmptySearch"
+import DataEmptyTx from "common/TmDataEmptyTx"
 import LiTransaction from "wallet/LiTransaction"
-import ModalSearch from "common/NiModalSearch"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
-import ToolBar from "common/NiToolBar"
+import ModalSearch from "common/TmModalSearch"
+import { TmPage } from "@tendermint/ui"
+import ToolBar from "common/TmToolBar"
 export default {
   name: "page-transactions",
   components: {
@@ -39,8 +38,7 @@ export default {
     DataEmptySearch,
     DataEmptyTx,
     ModalSearch,
-    Page,
-    Part,
+    TmPage,
     ToolBar
   },
   computed: {
diff --git a/app/src/renderer/components/wallet/PageWallet.vue b/app/src/renderer/components/wallet/PageWallet.vue
index eba5b2139b..8024d288f7 100644
--- a/app/src/renderer/components/wallet/PageWallet.vue
+++ b/app/src/renderer/components/wallet/PageWallet.vue
@@ -1,25 +1,27 @@
 <template lang="pug">
-page(title='Wallet')
-  div(slot="menu"): tool-bar
-    a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
-      i.material-icons refresh
-    a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
-      i.material-icons search
+tm-page(title='Wallet')
+  div(slot="menu")
+    tm-tool-bar
+      a(@click='updateBalances()' v-tooltip.bottom="'Refresh'")
+        i.material-icons refresh
+      a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
+        i.material-icons search
 
   modal-search(type="balances" v-if="somethingToSearch")
 
-  part(title='Your Address')
-    list-item(
+  tm-part(title='Your Address')
+    tm-list-item(
       :title="wallet.address"
       :btn="'Receive'"
       :overflow="true"
       @click.native="copy")
+      btn-receive(slot="btn-receive")
 
-  part#part-available-balances(title="Available Balances")
+  tm-part#part-available-balances(title="Available Balances")
     data-loading(v-if="wallet.balancesLoading")
     data-empty(v-else-if="wallet.balances.length === 0")
     data-empty-search(v-else-if="filteredBalances.length === 0")
-    list-item.ni-li-balance(
+    tm-list-item.tm-li-balance(
       v-for="i in filteredBalances"
       v-if="wallet.balances.length > 0 && i.amount > 0"
       :btn="'Send'"
@@ -28,8 +30,8 @@ page(title='Wallet')
       :dd="i.amount"
       :to="{name: 'send', params: {denom: i.denom}}")
 
-  part#part-staked-balances(v-if="config.devMode" title="Staked Balances")
-    list-item(
+  tm-part#part-staked-balances(v-if="config.devMode" title="Staked Balances")
+    tm-list-item(
       btn="Stake"
       :dt="stakingDenom"
       :dd="stakedTokens"
@@ -40,17 +42,15 @@ page(title='Wallet')
 import { mapGetters } from "vuex"
 import { clipboard } from "electron"
 import { sum, includes, orderBy } from "lodash"
-import Btn from "@nylira/vue-button"
 import Mousetrap from "mousetrap"
-import DataLoading from "common/NiDataLoading"
-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"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
-import ToolBar from "common/NiToolBar"
+import DataLoading from "common/TmDataLoading"
+import DataEmpty from "common/TmDataEmpty"
+import DataEmptySearch from "common/TmDataEmptySearch"
+import LiCopy from "common/TmLiCopy"
+import BtnReceive from "common/TmBtnReceive"
+import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
+import ModalSearch from "common/TmModalSearch"
+import TmToolBar from "common/TmToolBar"
 export default {
   name: "page-wallet",
   components: {
@@ -58,11 +58,12 @@ export default {
     DataEmpty,
     DataEmptySearch,
     LiCopy,
-    ListItem,
+    TmListItem,
     ModalSearch,
-    Page,
-    Part,
-    ToolBar
+    TmPage,
+    TmPart,
+    TmToolBar,
+    BtnReceive
   },
   computed: {
     ...mapGetters(["filters", "wallet", "committedDelegations", "config"]),
diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
index f27915d2b9..8bb9ad8077 100644
--- a/app/src/renderer/styles/app.styl
+++ b/app/src/renderer/styles/app.styl
@@ -38,7 +38,7 @@ a
   flex-flow column nowrap
   min-width 0
 
-.ni-field
+.tm-field, .tm-field
   border-radius 2px!important
   padding 0.5rem !important
 
diff --git a/archive/components/AppMenuUser.vue b/archive/components/AppMenuUser.vue
index 1eed0ae9e3..fd9540a87c 100644
--- a/archive/components/AppMenuUser.vue
+++ b/archive/components/AppMenuUser.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
 modal-menu.app-menu-user(v-if="!config.desktop")
-  part(title='User Menu')
+  tm-part(title='User Menu')
     template(v-if="user.signedIn")
       list-item(to="/settings" exact @click.native="close" title="Settings")
       list-item(type="anchor" @click.native="signOut" title="Sign Out")
     template(v-else)
       list-item(type="anchor" @click.native="signIn" title="Sign In")
 modal-menu.app-menu-user(@click="close" v-else): .outer-wrapper: .inner-wrapper
-  part(title='User Menu')
+  tm-part(title='User Menu')
     template(v-if="user.signedIn")
       list-item(to="/settings" exact @click.native="close" title="Settings")
       list-item(type="anchor" @click.native="signOut" title="Sign Out")
@@ -20,13 +20,13 @@ import { mapGetters } from "vuex"
 import noScroll from "no-scroll"
 import ListItem from "common/NiListItem"
 import ModalMenu from "common/NiModalMenu"
-import Part from "common/NiPart"
+import { TmPart } from "@tendermint/ui"
 export default {
   name: "app-menu-user",
   components: {
     ListItem,
     ModalMenu,
-    Part
+    TmPart
   },
   computed: {
     ...mapGetters(["user", "config"])
diff --git a/archive/components/FormGroupDelegate.vue b/archive/components/FormGroupDelegate.vue
index 6eb3c96f7c..619bb9a893 100644
--- a/archive/components/FormGroupDelegate.vue
+++ b/archive/components/FormGroupDelegate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-form-group(:class='cssClass' :error="$v.fields.atoms.$error")
+tm-form-group(:class='cssClass' :error="$v.fields.atoms.$error")
   i.fa.fa-check-square-o(@click='rm(delegate.id)')
   router-link.id(:to="{ name: 'delegate', params: { delegate: delegate.id } }")
     | {{ delegate.keybaseID }}
@@ -18,7 +18,7 @@ form-group(:class='cssClass' :error="$v.fields.atoms.$error")
 import { mapGetters } from "vuex"
 import Field from "@nylira/vue-field"
 import Btn from "@nylira/vue-button"
-import FormGroup from "common/NiFormGroup"
+import { TmFormGroup } from "@tendermint/ui"
 import FormMsg from "common/NiFormMsg"
 export default {
   name: "card-delegate-atoms",
@@ -26,7 +26,7 @@ export default {
   components: {
     Btn,
     Field,
-    FormGroup,
+    TmFormGroup,
     FormMsg
   },
   computed: {
diff --git a/archive/components/PageDelegatePower.vue b/archive/components/PageDelegatePower.vue
index a0e437b9c4..5b52041860 100644
--- a/archive/components/PageDelegatePower.vue
+++ b/archive/components/PageDelegatePower.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-page(icon="storage" :title="`${delegateId} Vote Power`")
+tm-page(icon="storage" :title="`${delegateId} Vote Power`")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
       i.material-icons arrow_back
 
-  part(title='Vote Power (Millions of ATOMs) / Time')
+  tm-part(title='Vote Power (Millions of ATOMs) / Time')
     chart-vote-power(:votes="chartData")
 
-  part(title='Statistics')
+  tm-part(title='Statistics')
     list-item(dt='Total Vote Power' dd='4.2M ATOM')
     list-item#li-solo-power(dt="Solo Vote Power" dd="1M ATOM (19%)")
     list-item#li-delegated-power(dt="Delg. Vote Power" dd="3.2M ATOM (81%)")
@@ -19,15 +19,14 @@ page(icon="storage" :title="`${delegateId} Vote Power`")
 import ChartVotePower from "monitor/ChartVotePower"
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-power",
   components: {
     ChartVotePower,
     ListItem,
-    Page,
-    Part,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/PageDelegateProposals.vue b/archive/components/PageDelegateProposals.vue
index 4ab2fa24a4..e7e26d1fce 100644
--- a/archive/components/PageDelegateProposals.vue
+++ b/archive/components/PageDelegateProposals.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="`${delegateId} Proposals`")
+tm-page(icon="storage" :title="`${delegateId} Proposals`")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -7,10 +7,10 @@ page(icon="storage" :title="`${delegateId} Proposals`")
     a(@click='toggleSearch' v-tooltip.bottom="'Search'")
       i.material-icons search
 
-  part(title='Current Proposals')
+  tm-part(title='Current Proposals')
     list-item(title="Title of the proposal here" subtitle="Live now" to="/proposal")
 
-  part(title='Past Proposals')
+  tm-part(title='Past Proposals')
     list-item(title="Title of the proposal here" subtitle="Failed" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Passed" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Passed" to="/proposals")
@@ -22,14 +22,13 @@ page(icon="storage" :title="`${delegateId} Proposals`")
 <script>
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-proposals",
   components: {
     ListItem,
-    Page,
-    Part,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/PageDelegateSlashes.vue b/archive/components/PageDelegateSlashes.vue
index 6e341d9e5b..5bf4ea5bce 100644
--- a/archive/components/PageDelegateSlashes.vue
+++ b/archive/components/PageDelegateSlashes.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="`${delegateId} Slashes`")
+tm-page(icon="storage" :title="`${delegateId} Slashes`")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -7,12 +7,12 @@ page(icon="storage" :title="`${delegateId} Slashes`")
     a(@click='toggleSearch' v-tooltip.bottom="'Search'")
       i.material-icons search
 
-  part(title='Statistics')
+  tm-part(title='Statistics')
     list-item(dt="Slashes" dd="7")
     list-item(dt="Percentage Slashed" dd="3%")
     list-item(dt="Last Slash:" dd="2 weeks ago")
 
-  part(title='Slashes')
+  tm-part(title='Slashes')
     list-item(title="Title of the proposal here" subtitle="Slashed: 17%" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Slashed: 5%" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="Slashed: 3%" to="/proposals")
@@ -23,14 +23,13 @@ page(icon="storage" :title="`${delegateId} Slashes`")
 <script>
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-slashes",
   components: {
     ListItem,
-    Page,
-    Part,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/archive/components/PageDelegateVotes.vue b/archive/components/PageDelegateVotes.vue
index 697b4c8cc2..bf547a1b44 100644
--- a/archive/components/PageDelegateVotes.vue
+++ b/archive/components/PageDelegateVotes.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
+tm-page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
   div(slot="menu"): tool-bar
     router-link(v-tooltip.bottom="'Back'"
       :to="{ name: 'delegate', params: { delegate: $route.params.delegate }}")
@@ -7,14 +7,14 @@ page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
     a(@click='toggleSearch' v-tooltip.bottom="'Search'")
       i.material-icons search
 
-  part(title='Vote Statistics')
+  tm-part(title='Vote Statistics')
     list-item(dt="Voted Yes:" dd="27%")
     list-item(dt="Voted No:" dd="5%")
     list-item(dt="Voted Reject:" dd="4%")
     list-item(dt="Abstained:" dd="11%")
     list-item(dt="Did Not Vote:" dd="53%")
 
-  part(title='Past Votes')
+  tm-part(title='Past Votes')
     list-item(title="Title of the proposal here" subtitle="YES" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="NO" to="/proposals")
     list-item(title="Title of the proposal here" subtitle="REJECT" to="/proposals")
@@ -27,14 +27,13 @@ page(icon="storage" :title="delegate.description.moniker" subtitle="Votes")
 import { mapGetters } from "vuex"
 import ListItem from "common/NiListItem"
 import ToolBar from "common/NiToolBar"
-import Page from "common/NiPage"
-import Part from "common/NiPart"
+import { TmPage, TmPart } from "@tendermint/ui"
 export default {
   name: "page-delegate-votes",
   components: {
     ListItem,
-    Page,
-    Part,
+    TmPage,
+    TmPart,
     ToolBar
   },
   computed: {
diff --git a/codecov.yaml b/codecov.yaml
index 4475840196..2986bf17c6 100644
--- a/codecov.yaml
+++ b/codecov.yaml
@@ -19,4 +19,5 @@ comment:
   require_head: yes
 
 ignore:
-  - "tasks/release.js"
\ No newline at end of file
+  - "tasks/release.js"
+  - "app/src/renderer/components/govern/*"
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..9b588ce855
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,45 @@
+module.exports = {
+  testMatch: ["**/unit/specs/**/*spec.js"],
+  moduleFileExtensions: ["js", "vue"],
+  moduleDirectories: ["app/node_modules", "node_modules", "src"],
+  moduleNameMapper: {
+    "^src/(.*)$": "<rootDir>/app/src/$1",
+    "^app/(.*)$": "<rootDir>/app/$1",
+    "^renderer/(.*)$": "<rootDir>/app/src/renderer/$1",
+    "^common/(.*)$": "<rootDir>/app/src/renderer/components/common/$1",
+    "^govern/(.*)$": "<rootDir>/app/src/renderer/components/govern/$1",
+    "^monitor/(.*)$": "<rootDir>/app/src/renderer/components/monitor/$1",
+    "^staking/(.*)$": "<rootDir>/app/src/renderer/components/staking/$1",
+    "^scripts/(.*)$": "<rootDir>/app/src/renderer/scripts/$1",
+    "^wallet/(.*)$": "<rootDir>/app/src/renderer/components/wallet/$1",
+    "^variables$": "<rootDir>/app/src/renderer/styles/variables.styl"
+  },
+
+  transform: {
+    ".*\\.vue$": "<rootDir>/node_modules/jest-vue-preprocessor",
+    ".*\\.js$": "<rootDir>/node_modules/babel-jest"
+  },
+
+  transformIgnorePatterns: ["node_modules/(?!@tendermint/ui|.*vue)"],
+
+  collectCoverage: true,
+  mapCoverage: true,
+  coverageDirectory: "./test/unit/coverage",
+  coverageReporters: ["lcov"],
+  coveragePathIgnorePatterns: [
+    "/node_modules/",
+    "/build/",
+    "/dist/",
+    "/test/",
+    "/app/src/config.js"
+  ],
+  testURL: "http://localhost",
+  setupFiles: [
+    "./test/unit/helpers/fixed_time.js",
+    "./test/unit/helpers/setup.js",
+    "./test/unit/helpers/console_error_throw.js",
+    "./test/unit/helpers/genesis_mock.js",
+    "./test/unit/helpers/electron_mock.js",
+    "jest-localstorage-mock"
+  ]
+}
diff --git a/package.json b/package.json
index bb6eb10931..3b27c0a570 100644
--- a/package.json
+++ b/package.json
@@ -98,9 +98,7 @@
     "xmlhttprequest": "1.8.0"
   },
   "dependencies": {
-    "@nylira/vue-button": "4.4.3",
-    "@nylira/vue-field": "1.5.0",
-    "@nylira/vue-notifications": "1.5.0",
+    "@tendermint/ui": "0.2.7",
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
@@ -141,61 +139,6 @@
     "vuelidate": "0.6.2",
     "vuex": "3.0.1"
   },
-  "jest": {
-    "testMatch": [
-      "**/unit/specs/**/*spec.js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "vue"
-    ],
-    "moduleDirectories": [
-      "app/node_modules",
-      "node_modules",
-      "src"
-    ],
-    "moduleNameMapper": {
-      "^src/(.*)$": "<rootDir>/app/src/$1",
-      "^app/(.*)$": "<rootDir>/app/$1",
-      "^renderer/(.*)$": "<rootDir>/app/src/renderer/$1",
-      "^common/(.*)$": "<rootDir>/app/src/renderer/components/common/$1",
-      "^govern/(.*)$": "<rootDir>/app/src/renderer/components/govern/$1",
-      "^monitor/(.*)$": "<rootDir>/app/src/renderer/components/monitor/$1",
-      "^staking/(.*)$": "<rootDir>/app/src/renderer/components/staking/$1",
-      "^scripts/(.*)$": "<rootDir>/app/src/renderer/scripts/$1",
-      "^wallet/(.*)$": "<rootDir>/app/src/renderer/components/wallet/$1",
-      "^variables$": "<rootDir>/app/src/renderer/styles/variables.styl"
-    },
-    "transform": {
-      ".*.vue$": "jest-vue-preprocessor",
-      ".*.js$": "babel-jest"
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!.*vue$)"
-    ],
-    "collectCoverage": true,
-    "mapCoverage": true,
-    "coverageDirectory": "./test/unit/coverage",
-    "coverageReporters": [
-      "lcov"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/build/",
-      "/dist/",
-      "/test/",
-      "/app/src/config.js"
-    ],
-    "testURL": "http://localhost",
-    "setupFiles": [
-      "./test/unit/helpers/fixed_time.js",
-      "./test/unit/helpers/setup.js",
-      "./test/unit/helpers/console_error_throw.js",
-      "./test/unit/helpers/genesis_mock.js",
-      "./test/unit/helpers/electron_mock.js",
-      "jest-localstorage-mock"
-    ]
-  },
   "prettier": {
     "semi": false
   }
diff --git a/test/e2e/common.js b/test/e2e/common.js
index 5707db4009..f8433edd30 100644
--- a/test/e2e/common.js
+++ b/test/e2e/common.js
@@ -12,8 +12,8 @@ module.exports = {
   async closeNotifications(app) {
     // close notifications as they overlay the menu button
     await sleep(100)
-    while (await app.client.isExisting(`.ni-notification`)) {
-      await app.client.$(`.ni-notification`).click()
+    while (await app.client.isExisting(`.tm-notification`)) {
+      await app.client.$(`.tm-notification`).click()
       await sleep(100)
     }
   },
@@ -50,13 +50,13 @@ module.exports = {
     await module.exports.openMenu(app)
     // click link
     await app.client.$(`a*=${linkText}`).click()
-    await app.client.waitUntilTextExists(".ni-page-header-title", titleText)
+    await app.client.waitUntilTextExists(".tm-page-header-title", titleText)
     console.log(`navigated to "${linkText}"`)
   },
   async navigateToPreferences(app) {
     await module.exports.openMenu(app)
     // click link
-    await app.client.$(`.ni-li-user`).click()
+    await app.client.$(`.tm-li-user`).click()
     console.log(`navigated to preferences`)
   },
   newTempDir() {
@@ -90,13 +90,13 @@ module.exports = {
     await module.exports.selectOption(app, accountsSelect, account)
 
     await app.client.$("#sign-in-password").setValue("1234567890")
-    await app.client.$(".ni-session-footer button").click()
+    await app.client.$(".tm-session-footer button").click()
 
     await app.client.waitForExist("#app-content", 10000)
 
     // checking if user is logged in
     await module.exports.openMenu(app)
-    let activeUser = await app.client.$(".ni-li-user .ni-li-subtitle").getText()
+    let activeUser = await app.client.$(".tm-li-user .tm-li-subtitle").getText()
     if (account !== activeUser) {
       throw new Error(
         "Incorrect user logged in (" + account + ", " + activeUser + ")"
@@ -109,12 +109,12 @@ module.exports = {
   },
   async logout(app) {
     console.log("logging out")
-    if (await app.client.isExisting(".ni-li-session")) {
+    if (await app.client.isExisting(".tm-li-session")) {
       return
     }
     await module.exports.openMenu(app)
 
-    await app.client.$(".ni-li-user").click()
+    await app.client.$(".tm-li-user").click()
     await sleep(300)
     await app.client
       .$(".material-icons=exit_to_app")
diff --git a/test/e2e/launch.js b/test/e2e/launch.js
index 3f0450603a..57457b2099 100644
--- a/test/e2e/launch.js
+++ b/test/e2e/launch.js
@@ -66,17 +66,17 @@ function launch(t) {
       })
 
       // TODO: use approval element once we restore initting
-      //       (".ni-modal-lcd-approval")
-      let initialElement = ".ni-session-wrapper"
+      //       (".tm-modal-lcd-approval")
+      let initialElement = ".tm-session-wrapper"
       await startApp(app, initialElement)
       t.ok(app.isRunning(), "app is running")
 
       // TODO: uncomment below once we restore initting
 
       // accept node hash
-      // await app.client.$("#ni-modal-lcd-approval__btn-approve").click()
+      // await app.client.$("#tm-modal-lcd-approval__btn-approve").click()
       // await app.client.waitForExist(
-      //   ".ni-session-title=Sign in to Cosmos Voyager",
+      //   ".tm-session-title=Sign in to Cosmos Voyager",
       //   5000
       // )
 
@@ -87,9 +87,9 @@ function launch(t) {
       t.ok(app.isRunning(), "app recovers from uninitialized gaia")
 
       // accept node hash
-      // await app.client.$("#ni-modal-lcd-approval__btn-approve").click()
+      // await app.client.$("#tm-modal-lcd-approval__btn-approve").click()
       // await app.client.waitForExist(
-      //   ".ni-session-title=Sign in to Cosmos Voyager",
+      //   ".tm-session-title=Sign in to Cosmos Voyager",
       //   5000
       // )
       // console.log("approved hash")
@@ -107,7 +107,7 @@ function launch(t) {
       )
       console.log("setup test accounts")
 
-      await startApp(app, ".ni-session-title=Sign In")
+      await startApp(app, ".tm-session-title=Sign In")
       t.ok(app.isRunning(), "app is running")
 
       // disable the onboarding wizard
@@ -167,7 +167,7 @@ async function writeLogs(app, location) {
   console.log("Wrote renderer process log to", rendererProcessLogLocation)
 }
 
-async function startApp(app, awaitingSelector = ".ni-session") {
+async function startApp(app, awaitingSelector = ".tm-session") {
   await app.start()
 
   await app.client.waitForExist(awaitingSelector, 10 * 1000).catch(async e => {
@@ -256,12 +256,12 @@ async function createAccount(name, seed) {
 
 module.exports = {
   getApp: launch,
-  restart: async function(app, awaitingSelector = ".ni-session-title=Sign In") {
+  restart: async function(app, awaitingSelector = ".tm-session-title=Sign In") {
     console.log("restarting app")
     await stop(app)
     await startApp(app, awaitingSelector)
   },
-  refresh: async function(app, awaitingSelector = ".ni-session-title=Sign In") {
+  refresh: async function(app, awaitingSelector = ".tm-session-title=Sign In") {
     console.log("refreshing app")
     await app.restart()
     await app.client.waitForExist(awaitingSelector, 5000)
diff --git a/test/e2e/preferences.js b/test/e2e/preferences.js
index 8409baaa47..bcf092f624 100644
--- a/test/e2e/preferences.js
+++ b/test/e2e/preferences.js
@@ -29,7 +29,7 @@ test("preferences", async function(t) {
     let networkSelect = () => $("#select-network select")
     let themeSelect = () => $("#select-theme select")
     let tutorialBtn = () => $("#toggle-onboarding")
-    let statisticsToggle = () => $("label.ni-toggle")
+    let statisticsToggle = () => $("label.tm-toggle")
 
     t.test("default network", async function(t) {
       let option = await networkSelect().getValue()
@@ -38,14 +38,14 @@ test("preferences", async function(t) {
     })
     t.test("mock network", async function(t) {
       await selectOption(app, "#select-network select", "mock")
-      await app.client.waitForVisible(".ni-session-wrapper", 5000)
+      await app.client.waitForVisible(".tm-session-wrapper", 5000)
 
       await login(app, "default")
       await navigateToPreferences(app) //should click preferences link with username
 
       await sleep(1000)
       let network = await app.client
-        .$("#ni-connected-network__string")
+        .$("#tm-connected-network__string")
         .getHTML()
       t.ok(
         network.indexOf("offline demo") !== -1,
diff --git a/test/e2e/signin.js b/test/e2e/signin.js
index 3c41bb68ae..0e107cc548 100644
--- a/test/e2e/signin.js
+++ b/test/e2e/signin.js
@@ -17,21 +17,21 @@ test("sign in", async function(t) {
   let el = (...args) => app.client.$(...args)
   // clicking the button does fail in webdriver as there is no actual click handler on the button
   async function clickContinue() {
-    return app.client.submitForm(".ni-session form")
+    return app.client.submitForm(".tm-session form")
   }
 
   t.test("signup", async function(t) {
-    await app.client.waitForExist(".ni-session-title=Sign In", 10000)
+    await app.client.waitForExist(".tm-session-title=Sign In", 10000)
 
     // go to login selection
     await app.client
       .$("i=arrow_back")
       .$("..")
       .click()
-    await app.client.waitForExist(".ni-li-session", 1000)
+    await app.client.waitForExist(".tm-li-session", 1000)
     // go to new account
     await app.client
-      .$(".ni-li-session-title=Create new account")
+      .$(".tm-li-session-title=Create new account")
       .$("..")
       .$("..")
       .click()
@@ -48,7 +48,7 @@ test("sign in", async function(t) {
           .$("..")
           .$("..")
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await warning().click()
@@ -57,7 +57,7 @@ test("sign in", async function(t) {
           .$("..")
           .$("..")
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -68,7 +68,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await app.client.leftClick("#sign-up-name")
@@ -76,7 +76,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await app.client.leftClick("#sign-up-name")
@@ -84,7 +84,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -95,7 +95,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await password().click()
@@ -103,7 +103,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await password().click()
@@ -111,7 +111,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await password()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -122,7 +122,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await passwordConfirm().click()
@@ -130,7 +130,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for not matching passwords"
       )
       await passwordConfirm().click()
@@ -138,7 +138,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -151,7 +151,7 @@ test("sign in", async function(t) {
       await app.client.waitForExist("#app-content", 10000)
       await openMenu(app)
       let activeUser = await app.client
-        .$(".ni-li-user .ni-li-subtitle")
+        .$(".tm-li-user .tm-li-subtitle")
         .getText()
       t.ok(activeUser === "signin_test", "user is logged in")
 
@@ -169,7 +169,7 @@ test("sign in", async function(t) {
       .$("..")
       .click()
 
-    await app.client.waitForExist(".ni-session", 1000)
+    await app.client.waitForExist(".tm-session", 1000)
 
     t.end()
   })
@@ -181,10 +181,10 @@ test("sign in", async function(t) {
       .$("i=arrow_back")
       .$("..")
       .click()
-    await app.client.waitForExist(".ni-li-session", 1000)
+    await app.client.waitForExist(".tm-li-session", 1000)
     // go to import with seed
     await app.client
-      .$(".ni-li-session-title=Import with seed")
+      .$(".tm-li-session-title=Import with seed")
       .$("..")
       .$("..")
       .click()
@@ -199,7 +199,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await accountName().scroll()
@@ -208,7 +208,7 @@ test("sign in", async function(t) {
       t.ok(
         await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await accountName().click()
@@ -216,7 +216,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await accountName()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -227,7 +227,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await password().click()
@@ -235,7 +235,7 @@ test("sign in", async function(t) {
       t.ok(
         await password()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for too few letters"
       )
       await password().click()
@@ -243,7 +243,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await password()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -254,7 +254,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await passwordConfirm().click()
@@ -262,7 +262,7 @@ test("sign in", async function(t) {
       t.ok(
         await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error for not matching passwords"
       )
       await passwordConfirm().click()
@@ -270,7 +270,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await passwordConfirm()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -281,7 +281,7 @@ test("sign in", async function(t) {
       t.ok(
         await seed()
           .$("..")
-          .isExisting(".ni-form-msg--error"),
+          .isExisting(".tm-form-msg--error"),
         "shows error"
       )
       await seed().click()
@@ -291,7 +291,7 @@ test("sign in", async function(t) {
       t.ok(
         !(await seed()
           .$("..")
-          .isExisting(".ni-form-msg--error")),
+          .isExisting(".tm-form-msg--error")),
         "hides error"
       )
       t.end()
@@ -304,7 +304,7 @@ test("sign in", async function(t) {
       await app.client.waitForExist("#app-content", 5000)
       await openMenu(app)
       let activeUser = await app.client
-        .$(".ni-li-user .ni-li-subtitle")
+        .$(".tm-li-user .tm-li-subtitle")
         .getText()
       t.equal(activeUser, "seed_test", "user is logged in")
 
diff --git a/test/e2e/wallet.js b/test/e2e/wallet.js
index 3329a2cf75..1e47c224c5 100644
--- a/test/e2e/wallet.js
+++ b/test/e2e/wallet.js
@@ -57,7 +57,7 @@ test("wallet", async function(t) {
     return app.client.waitForExist(balanceElemSlector, 20000).then(() =>
       $(balanceElemSlector)
         .$("..")
-        .$("div.ni-li-dd")
+        .$("div.tm-li-dd")
     )
   }
 
@@ -65,7 +65,7 @@ test("wallet", async function(t) {
     async function goToSendPage() {
       await navigate(app, "Wallet")
       await $("#part-available-balances")
-        .$(".ni-li-dt=FERMION")
+        .$(".tm-li-dt=FERMION")
         .$("..")
         .$("..")
         .click()
@@ -73,7 +73,7 @@ test("wallet", async function(t) {
 
     await navigate(app, "Wallet")
 
-    let sendBtn = () => $(".ni-form-footer button")
+    let sendBtn = () => $(".tm-form-footer button")
     let addressInput = () => $("#send-address")
     let amountInput = () => $("#send-amount")
     let denomBtn = denom => $(`option=${denom.toUpperCase()}`)
@@ -166,8 +166,8 @@ test("wallet", async function(t) {
         "cosmosaccaddr1xrnylx3l5mptnpjd4h0d52wtvealsdnv5k77n8"
       )
       await sendBtn().click()
-      await app.client.waitForExist(".ni-notification", 10 * 1000)
-      let msg = await app.client.$(".ni-notification .body").getText()
+      await app.client.waitForExist(".tm-notification", 10 * 1000)
+      let msg = await app.client.$(".tm-notification .body").getText()
       console.log("msg", msg)
       t.ok(msg.includes("Success"), "Send successful")
       // close the notifications to have a clean setup for the next tests
diff --git a/test/unit/specs/components/common/NiBarDiscrete.spec.js b/test/unit/specs/components/common/NiBarDiscrete.spec.js
deleted file mode 100644
index 0176eac58f..0000000000
--- a/test/unit/specs/components/common/NiBarDiscrete.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import htmlBeautify from "html-beautify"
-import NiBarDiscrete from "common/NiBarDiscrete"
-
-describe("NiBarDiscrete", () => {
-  let wrapper
-  beforeEach(() => {
-    wrapper = mount(NiBarDiscrete)
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/NiDataMsg.spec.js b/test/unit/specs/components/common/NiDataMsg.spec.js
deleted file mode 100644
index dfdb9bfd46..0000000000
--- a/test/unit/specs/components/common/NiDataMsg.spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-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/components/common/NiFieldGroup.spec.js b/test/unit/specs/components/common/NiFieldGroup.spec.js
deleted file mode 100644
index 1cef18af53..0000000000
--- a/test/unit/specs/components/common/NiFieldGroup.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-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/components/common/NiFormGroup.spec.js b/test/unit/specs/components/common/NiFormGroup.spec.js
deleted file mode 100644
index 34df24ea47..0000000000
--- a/test/unit/specs/components/common/NiFormGroup.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-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/components/common/NiFormMsg.spec.js b/test/unit/specs/components/common/NiFormMsg.spec.js
deleted file mode 100644
index bb1ff67d06..0000000000
--- a/test/unit/specs/components/common/NiFormMsg.spec.js
+++ /dev/null
@@ -1,118 +0,0 @@
-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: "",
-      error: "Password must be between 16 and 255 characters"
-    },
-    {
-      type: "words16",
-      name: "Seed",
-      error: "Seed phrase must be 16 words"
-    },
-    {
-      type: "alphaNum",
-      name: "Asdf",
-      error: "Asdf must contain only alphanumeric characters"
-    },
-    {
-      type: "numeric",
-      name: "Asdf",
-      error: "Asdf must contain only numerals"
-    },
-    {
-      type: "between",
-      name: "Asdf",
-      min: 16,
-      max: 255,
-      error: "Asdf must be between 16 and 255"
-    },
-    {
-      type: "date",
-      name: "Asdf",
-      error: "Asdf must be a valid date"
-    },
-    {
-      type: "datetime",
-      name: "Asdf",
-      error: "Asdf must be a valid date and time"
-    },
-    {
-      type: "exactLength",
-      name: "Asdf",
-      length: 16,
-      error: "Asdf must be exactly 16 characters"
-    },
-    {
-      type: "ipAddress",
-      name: "Asdf",
-      error: "Asdf must be a valid IPv4 or IPv6 address"
-    },
-    {
-      type: "minLength",
-      name: "Asdf",
-      min: 2,
-      error: "Asdf must be longer than 2 characters"
-    },
-    {
-      type: "maxLength",
-      name: "Asdf",
-      max: 255,
-      error: "Asdf must be shorter than 255 characters"
-    },
-    {
-      type: "match",
-      name: "Asdf",
-      error: "Asdf must match"
-    },
-    {
-      type: "required",
-      name: "Asdf",
-      error: "Asdf is required"
-    },
-    {
-      type: "url",
-      name: "Asdf",
-      error: "Asdf must be a valid URL (http:// required)"
-    },
-    {
-      type: "asdf",
-      name: "Asdf",
-      error: "Asdf must be valid"
-    }
-  ]
-
-  beforeEach(() => {
-    wrapper = mount(NiFormMsg, { propsData: propsData[0] })
-  })
-  for (let i = 1; i < propsData.length; i++) {}
-
-  it("has a type from props", () => {
-    expect(wrapper.vm.type).toBe("length")
-  })
-
-  it("has the expected html structure", () => {
-    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
-  })
-
-  for (let i = 0; i < propsData.length; i++) {
-    it("shows correct message for " + propsData[i].type, () => {
-      wrapper.setData(propsData[i])
-      expect(
-        wrapper
-          .find(".ni-form-msg")
-          .text()
-          .trim()
-      ).toContain(propsData[i].error)
-    })
-  }
-})
diff --git a/test/unit/specs/components/common/NiFormStruct.spec.js b/test/unit/specs/components/common/NiFormStruct.spec.js
deleted file mode 100644
index f73fea138a..0000000000
--- a/test/unit/specs/components/common/NiFormStruct.spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-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/components/common/NiListItem.spec.js b/test/unit/specs/components/common/NiListItem.spec.js
deleted file mode 100644
index b5f0d4cde3..0000000000
--- a/test/unit/specs/components/common/NiListItem.spec.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiListItem from "common/NiListItem"
-
-describe("NiListItem", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiListItem, {
-      propsData: {
-        type: null,
-        title: null,
-        subtitle: null,
-        image: null,
-        icon: null,
-        to: null,
-        dt: null,
-        dd: null,
-        href: null,
-        spin: null
-      }
-    })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a thumb", () => {
-    wrapper.setProps({ dt: "Link", href: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    wrapper.setProps({ icon: "icon_hello" })
-    expect(wrapper.find("i")).toBeDefined()
-    wrapper.setProps({ icon: null, image: "path/to/img" })
-    expect(wrapper.find("img")).toBeDefined()
-  })
-
-  it("should use a slot for a thumb", () => {
-    wrapper = mount(NiListItem, {
-      propsData: { dt: "Link", href: "/location" },
-      slots: { graphic: "<graphic-elem />" }
-    })
-    expect(wrapper.contains("graphic-elem")).toBe(true)
-  })
-
-  it("should show a description", () => {
-    wrapper.setProps({ dt: "Link", href: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    expect(wrapper.html()).toContain("Link")
-    wrapper.setProps({ dd: "HALLO" })
-    expect(wrapper.html()).toContain("HALLO")
-  })
-
-  it("should use a slot for a description", () => {
-    wrapper = mount(NiListItem, {
-      propsData: { dt: "Link", to: "/location" },
-      slots: { dd: "Some description here" }
-    })
-    expect(wrapper.html()).toContain("Some description here")
-  })
-
-  it("should show a dd link", () => {
-    wrapper.setProps({ dt: "Link", href: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a router-link", () => {
-    wrapper.setProps({ dt: "Link", to: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a label", () => {
-    wrapper.setProps({ title: "Title", subtitle: "Subtitle" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    expect(wrapper.html()).toContain("Title")
-    expect(wrapper.html()).toContain("Subtitle")
-  })
-
-  it("should show as dd text", () => {
-    wrapper.setProps({ dt: "Link" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show as text link", () => {
-    wrapper.setProps({ dt: "Link" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show a subtitle router link", () => {
-    wrapper.setProps({ to: "/location" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show as text", () => {
-    wrapper.setProps({ title: "Link" })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("should show as image", () => {
-    wrapper = mount(NiListItem, {
-      propsData: { type: "image" },
-      slots: { image: '<img src="route/to/image" />' }
-    })
-    expect(wrapper.find("img")).toBeDefined()
-  })
-
-  it("should append the fa-spin class", () => {
-    wrapper.setProps({
-      title: "Connecting...",
-      spin: "true",
-      icon: "rotate_right"
-    })
-    expect(wrapper.vm.$el).toMatchSnapshot()
-    expect(wrapper.html()).toContain("fa-spin")
-  })
-})
diff --git a/test/unit/specs/components/common/NiPage.spec.js b/test/unit/specs/components/common/NiPage.spec.js
deleted file mode 100644
index ac8c9d7ddb..0000000000
--- a/test/unit/specs/components/common/NiPage.spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Vuex from "vuex"
-import { mount, createLocalVue } from "@vue/test-utils"
-import NiPage from "common/NiPage"
-
-const config = require("renderer/vuex/modules/config").default({})
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-
-describe("NiPage", () => {
-  let wrapper
-  let store = new Vuex.Store({
-    getters: { config: () => config.state },
-    modules: { config }
-  })
-  store.commit = jest.fn()
-
-  beforeEach(() => {
-    store.commit.mockClear()
-    wrapper = mount(NiPage, {
-      localVue,
-      store,
-      propsData: {
-        title: "Title",
-        subtitle: "Subtitle",
-        icon: "hello_icon"
-      },
-      stubs: { "app-footer": "<app-footer />" }
-    })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/NiPageFooter.spec.js b/test/unit/specs/components/common/NiPageFooter.spec.js
deleted file mode 100644
index 874ac08bfe..0000000000
--- a/test/unit/specs/components/common/NiPageFooter.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiPageFooter from "common/NiPageFooter"
-
-describe("NiPageFooter", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiPageFooter)
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/NiPageHeader.spec.js b/test/unit/specs/components/common/NiPageHeader.spec.js
deleted file mode 100644
index a5a726854a..0000000000
--- a/test/unit/specs/components/common/NiPageHeader.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiPageHeader from "common/NiPageHeader"
-
-describe("NiPageHeader", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiPageHeader)
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/NiPart.spec.js b/test/unit/specs/components/common/NiPart.spec.js
deleted file mode 100644
index 10c327079a..0000000000
--- a/test/unit/specs/components/common/NiPart.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiPart from "common/NiPart"
-
-describe("NiPart", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiPart, { propsData: { title: "Test" } })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-
-  it("only has header if a title is defined", () => {
-    wrapper = mount(NiPart, { slots: { default: "<custom-main />" } })
-    expect(wrapper.find("header").exists()).toBe(false)
-    expect(wrapper.find("custom-main").exists()).toBe(true)
-  })
-
-  it("gets title from prop if defined", () => {
-    wrapper = mount(NiPart, { propsData: { title: "Test" } })
-    expect(wrapper.find(".ni-part-title").text()).toBe("Test")
-  })
-
-  it("should use slots", () => {
-    wrapper = mount(NiPart, {
-      slots: {
-        title: "<custom-title />",
-        default: "<custom-main />",
-        menu: "<custom-menu />"
-      }
-    })
-    expect(wrapper.find("custom-title").exists()).toBe(true)
-    expect(wrapper.find("custom-menu").exists()).toBe(true)
-    expect(wrapper.find("custom-main").exists()).toBe(true)
-  })
-})
diff --git a/test/unit/specs/components/common/NiTabBar.spec.js b/test/unit/specs/components/common/NiTabBar.spec.js
deleted file mode 100644
index 40b5f1cd81..0000000000
--- a/test/unit/specs/components/common/NiTabBar.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils"
-import NiTabBar from "common/NiTabBar"
-
-describe("NiTabBar", () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(NiTabBar, { slots: { default: "<main-slot />" } })
-  })
-
-  it("has the expected html structure", () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
-  })
-})
diff --git a/test/unit/specs/components/common/Page404.spec.js b/test/unit/specs/components/common/Page404.spec.js
index 9064ce7807..ca2fa46cf6 100644
--- a/test/unit/specs/components/common/Page404.spec.js
+++ b/test/unit/specs/components/common/Page404.spec.js
@@ -1,5 +1,6 @@
 import setup from "../../../helpers/vuex-setup"
 import Page404 from "renderer/components/common/Page404"
+import htmlBeautify from "html-beautify"
 
 describe("Page404", () => {
   let instance = setup()
@@ -8,13 +9,20 @@ describe("Page404", () => {
   beforeEach(() => {
     let test = instance.mount(Page404)
     wrapper = test.wrapper
+    wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it("should show links to other pages", () => {
-    expect(wrapper.findAll(".ni-li").length > 0).toBe(true)
+    expect(wrapper.findAll(".tm-li").length > 0).toBe(true)
   })
 })
diff --git a/test/unit/specs/components/common/PagePreferences.spec.js b/test/unit/specs/components/common/PagePreferences.spec.js
index 8368f2c771..853782a2f2 100644
--- a/test/unit/specs/components/common/PagePreferences.spec.js
+++ b/test/unit/specs/components/common/PagePreferences.spec.js
@@ -17,7 +17,13 @@ describe("PagePreferences", () => {
     })
   })
 
-  it("has the expected html structure if connected", () => {
+  it("has the expected html structure if connected", async () => {
+    // after importing the @tendermint/ui components  modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
     expect(wrapper.vm.$el.outerHTML).toContain("Select network")
     expect(wrapper.vm.$el.outerHTML).toContain("Select theme")
diff --git a/test/unit/specs/components/common/NiBtnCopy.spec.js b/test/unit/specs/components/common/TmBtnCopy.spec.js
similarity index 90%
rename from test/unit/specs/components/common/NiBtnCopy.spec.js
rename to test/unit/specs/components/common/TmBtnCopy.spec.js
index 03227c0edf..336e0fc19e 100644
--- a/test/unit/specs/components/common/NiBtnCopy.spec.js
+++ b/test/unit/specs/components/common/TmBtnCopy.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiBtnCopy from "renderer/components/common/NiBtnCopy"
+import TmBtnCopy from "renderer/components/common/TmBtnCopy"
 
-describe("NiBtnCopy", () => {
+describe("TmBtnCopy", () => {
   let wrapper, store
   let instance = setup()
 
   beforeEach(() => {
-    let test = instance.mount(NiBtnCopy, {
+    let test = instance.mount(TmBtnCopy, {
       propsData: { value: "this is a test" }
     })
     wrapper = test.wrapper
diff --git a/test/unit/specs/components/common/NiBtnReceive.spec.js b/test/unit/specs/components/common/TmBtnReceive.spec.js
similarity index 76%
rename from test/unit/specs/components/common/NiBtnReceive.spec.js
rename to test/unit/specs/components/common/TmBtnReceive.spec.js
index 14aa42b7e4..ef8c6396e9 100644
--- a/test/unit/specs/components/common/NiBtnReceive.spec.js
+++ b/test/unit/specs/components/common/TmBtnReceive.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiBtnReceive from "renderer/components/common/NiBtnReceive"
+import TmBtnReceive from "renderer/components/common/TmBtnReceive"
 
-describe("NiBtnReceive", () => {
+describe("TmBtnReceive", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiBtnReceive)
+    let instance = mount(TmBtnReceive)
     wrapper = instance.wrapper
     store = instance.store
   })
diff --git a/test/unit/specs/components/common/NiConnectedNetwork.spec.js b/test/unit/specs/components/common/TmConnectedNetwork.spec.js
similarity index 78%
rename from test/unit/specs/components/common/NiConnectedNetwork.spec.js
rename to test/unit/specs/components/common/TmConnectedNetwork.spec.js
index f858f3d600..8505dc64d1 100644
--- a/test/unit/specs/components/common/NiConnectedNetwork.spec.js
+++ b/test/unit/specs/components/common/TmConnectedNetwork.spec.js
@@ -1,13 +1,13 @@
-import NiConnectedNetwork from "common/NiConnectedNetwork"
+import TmConnectedNetwork from "common/TmConnectedNetwork"
 import htmlBeautify from "html-beautify"
 import setup from "../../../helpers/vuex-setup"
 
-describe("NiConnectedNetwork", () => {
+describe("TmConnectedNetwork", () => {
   let wrapper, router, store, instance
   let { mount } = setup()
 
   beforeEach(async () => {
-    instance = mount(NiConnectedNetwork)
+    instance = mount(TmConnectedNetwork)
     store = instance.store
     router = instance.router
     wrapper = instance.wrapper
@@ -22,7 +22,7 @@ describe("NiConnectedNetwork", () => {
   it("has a network icon", () => {
     expect(
       wrapper
-        .find("#ni-connected-network__icon i.material-icons")
+        .find("#tm-connected-network__icon i.material-icons")
         .text()
         .trim()
     ).toBe("wifi")
@@ -31,7 +31,7 @@ describe("NiConnectedNetwork", () => {
   it("has a network string", () => {
     expect(
       wrapper
-        .find("#ni-connected-network__string")
+        .find("#tm-connected-network__string")
         .text()
         .trim()
     ).toBe("Connected to test-net via 127.0.0.1 (change network)")
@@ -40,15 +40,15 @@ describe("NiConnectedNetwork", () => {
   it("has a block string", () => {
     expect(
       wrapper
-        .find("#ni-connected-network__block")
+        .find("#tm-connected-network__block")
         .text()
         .trim()
     ).toBe("Current Block: #42")
   })
 
   it("has a certain style for mockedConnector", () => {
-    expect(wrapper.find("#ni-connected-network").classes()).toContain(
-      "ni-connected-network--mocked"
+    expect(wrapper.find("#tm-connected-network").classes()).toContain(
+      "tm-connected-network--mocked"
     )
   })
   it("has a network tooltip for mockedConnector", () => {
@@ -71,32 +71,33 @@ describe("NiConnectedNetwork", () => {
 
   it("has a connecting state", async () => {
     await store.commit("setConnected", false)
+    wrapper.update()
     expect(
       wrapper
         .find(
-          "#ni-disconnected-network .ni-connected-network__icon i.material-icons"
+          "#tm-disconnected-network .tm-connected-network__icon i.material-icons"
         )
         .text()
     ).toBe("rotate_right")
     expect(
       wrapper
-        .find("#ni-disconnected-network .ni-connected-network__string")
+        .find("#tm-disconnected-network .tm-connected-network__string")
         .text()
     ).toBe("Connecting to network…")
   })
 
   it("shows a link to the preferences page if not on the preferences page", () => {
-    expect(wrapper.find("#ni-connected-network_preferences-link")).toBeDefined()
+    expect(wrapper.find("#tm-connected-network_preferences-link")).toBeDefined()
     router.push("/preferences")
     wrapper.update()
     expect(wrapper.vm.$route.name).toBe("preferences")
     expect(
-      wrapper.vm.$el.querySelector("#ni-connected-network_preferences-link")
+      wrapper.vm.$el.querySelector("#tm-connected-network_preferences-link")
     ).toBeFalsy()
   })
 
   it("shows the connected node", async () => {
-    instance = mount(NiConnectedNetwork)
+    instance = mount(TmConnectedNetwork)
     store = instance.store
     router = instance.router
     wrapper = instance.wrapper
@@ -111,10 +112,11 @@ describe("NiConnectedNetwork", () => {
 
   it("should close the menu if clicking on switch to live network intent", async () => {
     store.commit("setActiveMenu", "app")
+    wrapper.update()
     expect(store.state.config.activeMenu).toBe("app")
     let spy = jest.spyOn(wrapper.vm, "closeMenu")
     wrapper.vm.$el
-      .querySelector("#ni-connected-network_preferences-link")
+      .querySelector("#tm-connected-network_preferences-link")
       .click()
     expect(spy).toHaveBeenCalled()
     expect(store.state.config.activeMenu).not.toBe("app")
diff --git a/test/unit/specs/components/common/NiDataEmpty.spec.js b/test/unit/specs/components/common/TmDataEmpty.spec.js
similarity index 70%
rename from test/unit/specs/components/common/NiDataEmpty.spec.js
rename to test/unit/specs/components/common/TmDataEmpty.spec.js
index 289fed7371..81a4002a66 100644
--- a/test/unit/specs/components/common/NiDataEmpty.spec.js
+++ b/test/unit/specs/components/common/TmDataEmpty.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataEmpty from "common/NiDataEmpty"
+import TmDataEmpty from "common/TmDataEmpty"
 
-describe("NiDataEmpty", () => {
+describe("TmDataEmpty", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataEmpty)
+    wrapper = mount(TmDataEmpty)
   })
 
   it("has the expected html structure", () => {
@@ -15,7 +15,7 @@ describe("NiDataEmpty", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("info_outline")
@@ -24,7 +24,7 @@ describe("NiDataEmpty", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title h4")
+        .find(".tm-data-msg__title h4")
         .text()
         .trim()
     ).toBe("N/A")
@@ -33,7 +33,7 @@ describe("NiDataEmpty", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle h5")
+        .find(".tm-data-msg__subtitle h5")
         .text()
         .trim()
     ).toBe("No data available yet.")
diff --git a/test/unit/specs/components/common/NiDataEmptySearch.spec.js b/test/unit/specs/components/common/TmDataEmptySearch.spec.js
similarity index 69%
rename from test/unit/specs/components/common/NiDataEmptySearch.spec.js
rename to test/unit/specs/components/common/TmDataEmptySearch.spec.js
index 19a926db7d..442b39b119 100644
--- a/test/unit/specs/components/common/NiDataEmptySearch.spec.js
+++ b/test/unit/specs/components/common/TmDataEmptySearch.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataEmptySearch from "common/NiDataEmptySearch"
+import TmDataEmptySearch from "common/TmDataEmptySearch"
 
-describe("NiDataEmptySearch", () => {
+describe("TmDataEmptySearch", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataEmptySearch)
+    wrapper = mount(TmDataEmptySearch)
   })
 
   it("has the expected html structure", () => {
@@ -15,7 +15,7 @@ describe("NiDataEmptySearch", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("search")
@@ -24,7 +24,7 @@ describe("NiDataEmptySearch", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("No Results")
@@ -33,7 +33,7 @@ describe("NiDataEmptySearch", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toBe("Your search did not match any available data.")
diff --git a/test/unit/specs/components/common/NiDataEmptyTx.spec.js b/test/unit/specs/components/common/TmDataEmptyTx.spec.js
similarity index 72%
rename from test/unit/specs/components/common/NiDataEmptyTx.spec.js
rename to test/unit/specs/components/common/TmDataEmptyTx.spec.js
index f8a874d72c..db194b613b 100644
--- a/test/unit/specs/components/common/NiDataEmptyTx.spec.js
+++ b/test/unit/specs/components/common/TmDataEmptyTx.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataEmptyTx from "common/NiDataEmptyTx"
+import TmDataEmptyTx from "common/TmDataEmptyTx"
 
-describe("NiDataEmptyTx", () => {
+describe("TmDataEmptyTx", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataEmptyTx)
+    wrapper = mount(TmDataEmptyTx)
   })
 
   it("has the expected html structure", () => {
@@ -15,7 +15,7 @@ describe("NiDataEmptyTx", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("info_outline")
@@ -24,7 +24,7 @@ describe("NiDataEmptyTx", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("No Transaction History")
@@ -33,7 +33,7 @@ describe("NiDataEmptyTx", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toContain("Looks like you haven't sent or received any transactions yet.")
diff --git a/test/unit/specs/components/common/NiDataError.spec.js b/test/unit/specs/components/common/TmDataError.spec.js
similarity index 73%
rename from test/unit/specs/components/common/NiDataError.spec.js
rename to test/unit/specs/components/common/TmDataError.spec.js
index 473ea5c250..5c364e5fe2 100644
--- a/test/unit/specs/components/common/NiDataError.spec.js
+++ b/test/unit/specs/components/common/TmDataError.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataError from "common/NiDataError"
+import TmDataError from "common/TmDataError"
 
-describe("NiDataError", () => {
+describe("TmDataError", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataError)
+    wrapper = mount(TmDataError)
   })
 
   it("has the expected html structure", () => {
@@ -15,7 +15,7 @@ describe("NiDataError", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("sentiment_very_dissatisfied")
@@ -24,7 +24,7 @@ describe("NiDataError", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("Aw shucks!")
@@ -33,7 +33,7 @@ describe("NiDataError", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toContain(
diff --git a/test/unit/specs/components/common/NiDataLoading.spec.js b/test/unit/specs/components/common/TmDataLoading.spec.js
similarity index 68%
rename from test/unit/specs/components/common/NiDataLoading.spec.js
rename to test/unit/specs/components/common/TmDataLoading.spec.js
index 262499c40d..3bfb7ab511 100644
--- a/test/unit/specs/components/common/NiDataLoading.spec.js
+++ b/test/unit/specs/components/common/TmDataLoading.spec.js
@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiDataLoading from "common/NiDataLoading"
+import TmDataLoading from "common/TmDataLoading"
 
-describe("NiDataLoading", () => {
+describe("TmDataLoading", () => {
   let wrapper
   beforeEach(() => {
-    wrapper = mount(NiDataLoading)
+    wrapper = mount(TmDataLoading)
   })
 
   it("has the expected html structure", () => {
@@ -15,7 +15,7 @@ describe("NiDataLoading", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__icon i.material-icons")
+        .find(".tm-data-msg__icon i.material-icons")
         .text()
         .trim()
     ).toBe("rotate_right")
@@ -23,14 +23,14 @@ describe("NiDataLoading", () => {
 
   it("has a spinning icon", () => {
     expect(
-      wrapper.find(".ni-data-msg__icon").contains("i.material-icons.fa-spin")
+      wrapper.find(".tm-data-msg__icon").contains("i.material-icons.fa-spin")
     ).toBe(true)
   })
 
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__title div")
+        .find(".tm-data-msg__title div")
         .text()
         .trim()
     ).toBe("Data is loading…")
@@ -39,7 +39,7 @@ describe("NiDataLoading", () => {
   it("has a subtitle", () => {
     expect(
       wrapper
-        .find(".ni-data-msg__subtitle div")
+        .find(".tm-data-msg__subtitle div")
         .text()
         .trim()
     ).toBe("Please wait a moment.")
diff --git a/test/unit/specs/components/common/NiFieldAddon.spec.js b/test/unit/specs/components/common/TmFieldAddon.spec.js
similarity index 78%
rename from test/unit/specs/components/common/NiFieldAddon.spec.js
rename to test/unit/specs/components/common/TmFieldAddon.spec.js
index cdbbe0223c..8cf34f7637 100644
--- a/test/unit/specs/components/common/NiFieldAddon.spec.js
+++ b/test/unit/specs/components/common/TmFieldAddon.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiFieldAddon from "common/NiFieldAddon"
+import TmFieldAddon from "common/TmFieldAddon"
 
-describe("NiFieldAddon", () => {
+describe("TmFieldAddon", () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = mount(NiFieldAddon, {
+    wrapper = mount(TmFieldAddon, {
       slots: { default: '<div class="fake-addon">ATOM</div>' }
     })
   })
diff --git a/test/unit/specs/components/common/NiFieldSeed.spec.js b/test/unit/specs/components/common/TmFieldSeed.spec.js
similarity index 74%
rename from test/unit/specs/components/common/NiFieldSeed.spec.js
rename to test/unit/specs/components/common/TmFieldSeed.spec.js
index 09ea4ef128..691282af62 100644
--- a/test/unit/specs/components/common/NiFieldSeed.spec.js
+++ b/test/unit/specs/components/common/TmFieldSeed.spec.js
@@ -1,8 +1,8 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiFieldSeed from "common/NiFieldSeed"
+import TmFieldSeed from "common/TmFieldSeed"
 
-describe("NiFieldSeed", () => {
+describe("TmFieldSeed", () => {
   let wrapper
 
   let propsData = {
@@ -10,7 +10,7 @@ describe("NiFieldSeed", () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(NiFieldSeed, { propsData })
+    wrapper = mount(TmFieldSeed, { propsData })
   })
 
   it("has a value from props", () => {
@@ -24,6 +24,6 @@ describe("NiFieldSeed", () => {
   })
 
   it("has the correct class", () => {
-    expect(wrapper.find(".ni-field").classes()).toContain("ni-field-seed")
+    expect(wrapper.find(".tm-field").classes()).toContain("tm-field-seed")
   })
 })
diff --git a/test/unit/specs/components/common/NiFieldVote.spec.js b/test/unit/specs/components/common/TmFieldVote.spec.js
similarity index 77%
rename from test/unit/specs/components/common/NiFieldVote.spec.js
rename to test/unit/specs/components/common/TmFieldVote.spec.js
index 7887436e5e..ad1295f2ff 100644
--- a/test/unit/specs/components/common/NiFieldVote.spec.js
+++ b/test/unit/specs/components/common/TmFieldVote.spec.js
@@ -1,8 +1,8 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiFieldVote from "common/NiFieldVote"
+import TmFieldVote from "common/TmFieldVote"
 
-describe("NiFieldVote", () => {
+describe("TmFieldVote", () => {
   let wrapper
 
   let propsData = {
@@ -14,7 +14,7 @@ describe("NiFieldVote", () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(NiFieldVote, { propsData })
+    wrapper = mount(TmFieldVote, { propsData })
   })
 
   it("has a color from props", () => {
@@ -28,7 +28,7 @@ describe("NiFieldVote", () => {
   it("shows the title of the vote option", () => {
     expect(
       wrapper
-        .find(".ni-field-vote-dt")
+        .find(".tm-field-vote-dt")
         .text()
         .trim()
     ).toBe("No")
@@ -37,7 +37,7 @@ describe("NiFieldVote", () => {
   it("has been selected by the user", () => {
     expect(
       wrapper
-        .find(".ni-field-vote-input i.material-icons")
+        .find(".tm-field-vote-input i.material-icons")
         .text()
         .trim()
     ).toBe("radio_button_checked")
@@ -46,7 +46,7 @@ describe("NiFieldVote", () => {
   it("shows the percentage who voted", () => {
     expect(
       wrapper
-        .find(".ni-field-vote-dd")
+        .find(".tm-field-vote-dd")
         .text()
         .trim()
     ).toBe("34%")
diff --git a/test/unit/specs/components/common/NiHardwareState.spec.js b/test/unit/specs/components/common/TmHardwareState.spec.js
similarity index 78%
rename from test/unit/specs/components/common/NiHardwareState.spec.js
rename to test/unit/specs/components/common/TmHardwareState.spec.js
index 89301c6c85..4f11fbc96d 100644
--- a/test/unit/specs/components/common/NiHardwareState.spec.js
+++ b/test/unit/specs/components/common/TmHardwareState.spec.js
@@ -1,8 +1,8 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiHardwareState from "common/NiHardwareState"
+import TmHardwareState from "common/TmHardwareState"
 
-describe("NiHardwareState", () => {
+describe("TmHardwareState", () => {
   let wrapper
 
   let propsData = {
@@ -12,7 +12,7 @@ describe("NiHardwareState", () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(NiHardwareState, { propsData })
+    wrapper = mount(TmHardwareState, { propsData })
   })
 
   it("has an icon from props", () => {
@@ -30,7 +30,7 @@ describe("NiHardwareState", () => {
   it("has a label", () => {
     expect(
       wrapper
-        .find(".ni-hardware-state__label")
+        .find(".tm-hardware-state__label")
         .text()
         .trim()
     ).toContain("Detecting your Ledger Wallet")
diff --git a/test/unit/specs/components/common/NiLiCopy.spec.js b/test/unit/specs/components/common/TmLiCopy.spec.js
similarity index 84%
rename from test/unit/specs/components/common/NiLiCopy.spec.js
rename to test/unit/specs/components/common/TmLiCopy.spec.js
index 0cbbd05989..8ab27ab216 100644
--- a/test/unit/specs/components/common/NiLiCopy.spec.js
+++ b/test/unit/specs/components/common/TmLiCopy.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiLiCopy from "common/NiLiCopy"
+import TmLiCopy from "common/TmLiCopy"
 
-describe("NiLiCopy", () => {
+describe("TmLiCopy", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiLiCopy)
+    let instance = mount(TmLiCopy)
     wrapper = instance.wrapper
     store = instance.store
   })
diff --git a/test/unit/specs/components/common/NiLiSession.spec.js b/test/unit/specs/components/common/TmLiSession.spec.js
similarity index 61%
rename from test/unit/specs/components/common/NiLiSession.spec.js
rename to test/unit/specs/components/common/TmLiSession.spec.js
index 6872dd20ec..f591b75760 100644
--- a/test/unit/specs/components/common/NiLiSession.spec.js
+++ b/test/unit/specs/components/common/TmLiSession.spec.js
@@ -1,7 +1,7 @@
 import { shallow } from "@vue/test-utils"
-import NiLiSession from "common/NiLiSession"
+import TmLiSession from "common/TmLiSession"
 
-describe("NiLiSession", () => {
+describe("TmLiSession", () => {
   let wrapper
   let propsData = {
     icon: "mood",
@@ -9,7 +9,7 @@ describe("NiLiSession", () => {
     subtitle: "useful subtitle"
   }
   beforeEach(() => {
-    wrapper = shallow(NiLiSession, { propsData })
+    wrapper = shallow(TmLiSession, { propsData })
   })
 
   it("has the expected html structure", () => {
@@ -18,18 +18,18 @@ describe("NiLiSession", () => {
 
   it("should have an icon", () => {
     expect(
-      wrapper.find(".ni-li-session-icon i.material-icons").html()
+      wrapper.find(".tm-li-session-icon i.material-icons").html()
     ).toContain("mood")
   })
 
   it("should have a title", () => {
-    expect(wrapper.find(".ni-li-session-title").html()).toContain(
+    expect(wrapper.find(".tm-li-session-title").html()).toContain(
       "useful title"
     )
   })
 
   it("should have a subtitle", () => {
-    expect(wrapper.find(".ni-li-session-subtitle").html()).toContain(
+    expect(wrapper.find(".tm-li-session-subtitle").html()).toContain(
       "useful subtitle"
     )
   })
diff --git a/test/unit/specs/components/common/NiModal.spec.js b/test/unit/specs/components/common/TmModal.spec.js
similarity index 80%
rename from test/unit/specs/components/common/NiModal.spec.js
rename to test/unit/specs/components/common/TmModal.spec.js
index 4a0130be1d..cf17095fd5 100644
--- a/test/unit/specs/components/common/NiModal.spec.js
+++ b/test/unit/specs/components/common/TmModal.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils"
-import NiModal from "common/NiModal"
+import TmModal from "common/TmModal"
 
-describe("NiModal", () => {
+describe("TmModal", () => {
   let wrapper, close
 
   beforeEach(() => {
     close = jest.fn()
-    wrapper = mount(NiModal, {
+    wrapper = mount(TmModal, {
       propsData: {
         size: null,
         icon: null,
@@ -25,13 +25,13 @@ describe("NiModal", () => {
   })
 
   it("should call close button click", () => {
-    wrapper.find(".ni-modal-close").trigger("click")
+    wrapper.find(".tm-modal-close").trigger("click")
     expect(close).toHaveBeenCalled()
   })
 
   it("should set size", () => {
     wrapper.setProps({ size: "fs" })
-    expect(wrapper.classes()).toContain("ni-modal-fullscreen")
+    expect(wrapper.classes()).toContain("tm-modal-fullscreen")
   })
 
   it("should show icon", () => {
@@ -41,7 +41,7 @@ describe("NiModal", () => {
   })
 
   it("should use slots", () => {
-    wrapper = mount(NiModal, {
+    wrapper = mount(TmModal, {
       slots: {
         title: "<custom-title />",
         footer: "<custom-footer />"
diff --git a/test/unit/specs/components/common/NiModalError.spec.js b/test/unit/specs/components/common/TmModalError.spec.js
similarity index 76%
rename from test/unit/specs/components/common/NiModalError.spec.js
rename to test/unit/specs/components/common/TmModalError.spec.js
index 9080cdea90..54a2e13f91 100644
--- a/test/unit/specs/components/common/NiModalError.spec.js
+++ b/test/unit/specs/components/common/TmModalError.spec.js
@@ -1,7 +1,7 @@
 import Vuex from "vuex"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiModalError from "common/NiModalError"
+import TmModalError from "common/TmModalError"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -14,7 +14,7 @@ jest.mock("electron", () => ({
   }
 }))
 
-describe("NiModalError", () => {
+describe("TmModalError", () => {
   let wrapper
   let store = new Vuex.Store({
     getters: {
@@ -24,7 +24,7 @@ describe("NiModalError", () => {
   })
 
   beforeEach(() => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store
     })
@@ -37,21 +37,21 @@ describe("NiModalError", () => {
   it("has an icon", () => {
     expect(
       wrapper
-        .find(".ni-modal-error__icon i.material-icons")
+        .find(".tm-modal-error__icon i.material-icons")
         .text()
         .trim()
     ).toBe("error_outline")
   })
 
   it("shows an icon if specified", () => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store,
       propsData: { icon: "icon-x" }
     })
     expect(
       wrapper
-        .find(".ni-modal-error__icon i.material-icons")
+        .find(".tm-modal-error__icon i.material-icons")
         .text()
         .trim()
     ).toBe("icon-x")
@@ -60,21 +60,21 @@ describe("NiModalError", () => {
   it("has a title", () => {
     expect(
       wrapper
-        .find(".ni-modal-error__title")
+        .find(".tm-modal-error__title")
         .text()
         .trim()
     ).toBe("Voyager ran into an error")
   })
 
   it("shows a title if specified", () => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store,
       propsData: { title: "title-x" }
     })
     expect(
       wrapper
-        .find(".ni-modal-error__title")
+        .find(".tm-modal-error__title")
         .text()
         .trim()
     ).toBe("title-x")
@@ -83,7 +83,7 @@ describe("NiModalError", () => {
   it("has a body", () => {
     expect(
       wrapper
-        .find(".ni-modal-error__body")
+        .find(".tm-modal-error__body")
         .text()
         .trim()
     ).toContain(
@@ -92,14 +92,14 @@ describe("NiModalError", () => {
   })
 
   it("shows a body if specified", () => {
-    wrapper = mount(NiModalError, {
+    wrapper = mount(TmModalError, {
       localVue,
       store,
       propsData: { body: "body-x" }
     })
     expect(
       wrapper
-        .find(".ni-modal-error__body")
+        .find(".tm-modal-error__body")
         .text()
         .trim()
     ).toBe("body-x")
@@ -110,10 +110,10 @@ describe("NiModalError", () => {
   })
 
   it("has a button to create an issue", () => {
-    wrapper.find("#ni-modal-error__btn-issue").trigger("click")
+    wrapper.find("#tm-modal-error__btn-issue").trigger("click")
   })
 
   it("has a button to view the app logs", () => {
-    wrapper.find("#ni-modal-error__btn-logs").trigger("click")
+    wrapper.find("#tm-modal-error__btn-logs").trigger("click")
   })
 })
diff --git a/test/unit/specs/components/common/NiModalHelp.spec.js b/test/unit/specs/components/common/TmModalHelp.spec.js
similarity index 76%
rename from test/unit/specs/components/common/NiModalHelp.spec.js
rename to test/unit/specs/components/common/TmModalHelp.spec.js
index d619060c32..8a06f8f1d4 100644
--- a/test/unit/specs/components/common/NiModalHelp.spec.js
+++ b/test/unit/specs/components/common/TmModalHelp.spec.js
@@ -1,15 +1,16 @@
 import setup from "../../../helpers/vuex-setup"
-import NiModalHelp from "common/NiModalHelp"
+import TmModalHelp from "common/TmModalHelp"
 
-describe("NiModalHelp", () => {
+describe("TmModalHelp", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalHelp)
+    let instance = mount(TmModalHelp)
     wrapper = instance.wrapper
     store = instance.store
     store.commit("setModalHelp", true)
+    wrapper.update()
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NiModalLCDApproval.spec.js b/test/unit/specs/components/common/TmModalLCDApproval.spec.js
similarity index 85%
rename from test/unit/specs/components/common/NiModalLCDApproval.spec.js
rename to test/unit/specs/components/common/TmModalLCDApproval.spec.js
index 20d5bace2b..54553db88f 100644
--- a/test/unit/specs/components/common/NiModalLCDApproval.spec.js
+++ b/test/unit/specs/components/common/TmModalLCDApproval.spec.js
@@ -1,13 +1,13 @@
 import setup from "../../../helpers/vuex-setup"
-import NiModalLCDApproval from "common/NiModalLCDApproval"
+import TmModalLCDApproval from "common/TmModalLCDApproval"
 
 let instance = setup()
 
-describe("NiModalLCDApproval", () => {
+describe("TmModalLCDApproval", () => {
   let wrapper, store
 
   beforeEach(() => {
-    let test = instance.mount(NiModalLCDApproval, {
+    let test = instance.mount(TmModalLCDApproval, {
       propsData: { hash: "this_is_a_hash" }
     })
     wrapper = test.wrapper
diff --git a/test/unit/specs/components/common/NiModalNoNodes.spec.js b/test/unit/specs/components/common/TmModalNoNodes.spec.js
similarity index 87%
rename from test/unit/specs/components/common/NiModalNoNodes.spec.js
rename to test/unit/specs/components/common/TmModalNoNodes.spec.js
index 9da170c213..3109de2c66 100644
--- a/test/unit/specs/components/common/NiModalNoNodes.spec.js
+++ b/test/unit/specs/components/common/TmModalNoNodes.spec.js
@@ -1,12 +1,12 @@
-import NiModalNoNodes from "common/NiModalNoNodes"
+import TmModalNoNodes from "common/TmModalNoNodes"
 import setup from "../../../helpers/vuex-setup"
 
-describe("NiModalNoNodes", () => {
+describe("TmModalNoNodes", () => {
   let wrapper, store
   let { mount, localVue } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalNoNodes)
+    let instance = mount(TmModalNoNodes)
     store = instance.store
     wrapper = instance.wrapper
   })
diff --git a/test/unit/specs/components/common/NiModalReceive.spec.js b/test/unit/specs/components/common/TmModalReceive.spec.js
similarity index 80%
rename from test/unit/specs/components/common/NiModalReceive.spec.js
rename to test/unit/specs/components/common/TmModalReceive.spec.js
index 17145de430..ff2b8212c2 100644
--- a/test/unit/specs/components/common/NiModalReceive.spec.js
+++ b/test/unit/specs/components/common/TmModalReceive.spec.js
@@ -1,12 +1,12 @@
 import setup from "../../../helpers/vuex-setup"
-import NiModalReceive from "common/NiModalReceive"
+import TmModalReceive from "common/TmModalReceive"
 
-describe("NiModalReceive", () => {
+describe("TmModalReceive", () => {
   let wrapper, store
   let { mount } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalReceive)
+    let instance = mount(TmModalReceive)
     wrapper = instance.wrapper
     store = instance.store
     store.commit("setModalHelp", true)
diff --git a/test/unit/specs/components/common/NiModalSearch.spec.js b/test/unit/specs/components/common/TmModalSearch.spec.js
similarity index 89%
rename from test/unit/specs/components/common/NiModalSearch.spec.js
rename to test/unit/specs/components/common/TmModalSearch.spec.js
index d827dbb088..bc54bc974a 100644
--- a/test/unit/specs/components/common/NiModalSearch.spec.js
+++ b/test/unit/specs/components/common/TmModalSearch.spec.js
@@ -1,13 +1,13 @@
-import NiModalSearch from "common/NiModalSearch"
+import TmModalSearch from "common/TmModalSearch"
 import setup from "../../../helpers/vuex-setup"
 import Vuelidate from "vuelidate"
 
-describe("NiModalSearch", () => {
+describe("TmModalSearch", () => {
   let wrapper, store
   let { mount, localVue } = setup()
 
   beforeEach(() => {
-    let instance = mount(NiModalSearch, { propsData: { type: "transactions" } })
+    let instance = mount(TmModalSearch, { propsData: { type: "transactions" } })
     localVue.use(Vuelidate)
     store = instance.store
     wrapper = instance.wrapper
@@ -50,7 +50,7 @@ describe("NiModalSearch", () => {
 
     expect(
       wrapper
-        .find(".ni-modal-search-field .ni-btn__value")
+        .find(".tm-modal-search-field .tm-btn__value")
         .text()
         .trim()
     ).toBe("Find")
diff --git a/test/unit/specs/components/common/NiOnboarding.spec.js b/test/unit/specs/components/common/TmOnboarding.spec.js
similarity index 95%
rename from test/unit/specs/components/common/NiOnboarding.spec.js
rename to test/unit/specs/components/common/TmOnboarding.spec.js
index b725f43b10..9fd6957ea3 100644
--- a/test/unit/specs/components/common/NiOnboarding.spec.js
+++ b/test/unit/specs/components/common/TmOnboarding.spec.js
@@ -1,4 +1,4 @@
-import NiOnboarding from "common/NiOnboarding.vue"
+import TmOnboarding from "common/TmOnboarding.vue"
 import htmlBeautify from "html-beautify"
 import setup from "../../../helpers/vuex-setup"
 
@@ -23,12 +23,12 @@ jest.mock(
   () => jest.fn()
 )
 
-describe("NiOnboarding", () => {
+describe("TmOnboarding", () => {
   let wrapper, store, instance
   let { mount } = setup()
 
   beforeEach(() => {
-    instance = mount(NiOnboarding)
+    instance = mount(TmOnboarding)
     wrapper = instance.wrapper
     store = instance.store
     wrapper.update()
diff --git a/test/unit/specs/components/common/NISession.spec.js b/test/unit/specs/components/common/TmSession.spec.js
similarity index 95%
rename from test/unit/specs/components/common/NISession.spec.js
rename to test/unit/specs/components/common/TmSession.spec.js
index f192d8ce95..e8f1b09ab2 100644
--- a/test/unit/specs/components/common/NISession.spec.js
+++ b/test/unit/specs/components/common/TmSession.spec.js
@@ -1,12 +1,12 @@
 import Vuex from "vuex"
 import { mount, createLocalVue } from "@vue/test-utils"
-import NiSession from "common/NiSession"
+import TmSession from "common/TmSession"
 const config = require("renderer/vuex/modules/config").default({})
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
 
-describe("NiSessionWelcome", () => {
+describe("TmSessionWelcome", () => {
   let wrapper, store
 
   beforeEach(() => {
@@ -14,7 +14,7 @@ describe("NiSessionWelcome", () => {
       getters: { config: () => config.state },
       modules: { config }
     })
-    wrapper = mount(NiSession, {
+    wrapper = mount(TmSession, {
       localVue,
       store,
       stubs: {
diff --git a/test/unit/specs/components/common/NISessionAccountDelete.spec.js b/test/unit/specs/components/common/TmSessionAccountDelete.spec.js
similarity index 85%
rename from test/unit/specs/components/common/NISessionAccountDelete.spec.js
rename to test/unit/specs/components/common/TmSessionAccountDelete.spec.js
index 420d9c1da2..e3930994ae 100644
--- a/test/unit/specs/components/common/NISessionAccountDelete.spec.js
+++ b/test/unit/specs/components/common/TmSessionAccountDelete.spec.js
@@ -2,23 +2,24 @@ import Vuex from "vuex"
 import Vuelidate from "vuelidate"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiSessionAccountDelete from "common/NiSessionAccountDelete"
+import TmSessionAccountDelete from "common/TmSessionAccountDelete"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Vuelidate)
 
-describe("NiSessionAccountDelete", () => {
+describe("TmSessionAccountDelete", () => {
   let wrapper, store
 
   beforeEach(() => {
     store = new Vuex.Store()
-    wrapper = mount(NiSessionAccountDelete, {
+    wrapper = mount(TmSessionAccountDelete, {
       localVue,
       store
     })
     store.commit = jest.fn()
     store.dispatch = jest.fn(async () => true)
+    wrapper.update()
   })
 
   it("has the expected html structure", () => {
@@ -27,7 +28,7 @@ describe("NiSessionAccountDelete", () => {
 
   it("should go back to the login screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual([
@@ -38,7 +39,7 @@ describe("NiSessionAccountDelete", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
@@ -67,7 +68,7 @@ describe("NiSessionAccountDelete", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if deletionWarning is not acknowledged", async () => {
@@ -79,7 +80,7 @@ describe("NiSessionAccountDelete", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show a notification if deletion failed", async () => {
diff --git a/test/unit/specs/components/common/NISessionHardware.spec.js b/test/unit/specs/components/common/TmSessionHardware.spec.js
similarity index 91%
rename from test/unit/specs/components/common/NISessionHardware.spec.js
rename to test/unit/specs/components/common/TmSessionHardware.spec.js
index aad4eafbcc..80d663af82 100644
--- a/test/unit/specs/components/common/NISessionHardware.spec.js
+++ b/test/unit/specs/components/common/TmSessionHardware.spec.js
@@ -2,7 +2,7 @@ import Vuex from "vuex"
 import Vuelidate from "vuelidate"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NISessionHardware from "common/NiSessionHardware"
+import NISessionHardware from "common/TmSessionHardware"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -26,7 +26,7 @@ describe("NISessionHardware", () => {
 
   it("should go back to the welcome screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0][0]).toBe("setModalSessionState")
@@ -35,7 +35,7 @@ describe("NISessionHardware", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
diff --git a/test/unit/specs/components/common/NiSessionImport.spec.js b/test/unit/specs/components/common/TmSessionImport.spec.js
similarity index 92%
rename from test/unit/specs/components/common/NiSessionImport.spec.js
rename to test/unit/specs/components/common/TmSessionImport.spec.js
index 9c9254bfe4..d97503fe0b 100644
--- a/test/unit/specs/components/common/NiSessionImport.spec.js
+++ b/test/unit/specs/components/common/TmSessionImport.spec.js
@@ -2,7 +2,7 @@ import Vuex from "vuex"
 import Vuelidate from "vuelidate"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiSessionImport from "common/NiSessionImport"
+import TmSessionImport from "common/TmSessionImport"
 jest.mock("renderer/google-analytics.js", () => uid => {})
 const seed =
   "goose toward escape engine wheel board help torch avocado educate rose rebel rigid side aspect abandon"
@@ -10,12 +10,12 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Vuelidate)
 
-describe("NiSessionImport", () => {
+describe("TmSessionImport", () => {
   let wrapper, store
 
   beforeEach(() => {
     store = new Vuex.Store()
-    wrapper = mount(NiSessionImport, {
+    wrapper = mount(TmSessionImport, {
       localVue,
       store
     })
@@ -29,7 +29,7 @@ describe("NiSessionImport", () => {
 
   it("should go back to the welcome screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0][0]).toBe("setModalSessionState")
@@ -38,7 +38,7 @@ describe("NiSessionImport", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
@@ -128,7 +128,7 @@ describe("NiSessionImport", () => {
     wrapper.setData({ fields: { importSeed: "" } })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if seed is 16 words long", async () => {
@@ -139,7 +139,7 @@ describe("NiSessionImport", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if password is not confirmed", async () => {
@@ -153,7 +153,7 @@ describe("NiSessionImport", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should not continue if creation failed", async () => {
diff --git a/test/unit/specs/components/common/NISessionLoading.spec.js b/test/unit/specs/components/common/TmSessionLoading.spec.js
similarity index 64%
rename from test/unit/specs/components/common/NISessionLoading.spec.js
rename to test/unit/specs/components/common/TmSessionLoading.spec.js
index 4f530302d1..d760d1d1a4 100644
--- a/test/unit/specs/components/common/NISessionLoading.spec.js
+++ b/test/unit/specs/components/common/TmSessionLoading.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NiSessionLoading from "common/NiSessionLoading"
+import TmSessionLoading from "common/TmSessionLoading"
 
-describe("NiSessionLoading", () => {
+describe("TmSessionLoading", () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = mount(NiSessionLoading)
+    wrapper = mount(TmSessionLoading)
   })
 
   it("has the expected html structure", () => {
diff --git a/test/unit/specs/components/common/NISessionSignIn.spec.js b/test/unit/specs/components/common/TmSessionSignIn.spec.js
similarity index 88%
rename from test/unit/specs/components/common/NISessionSignIn.spec.js
rename to test/unit/specs/components/common/TmSessionSignIn.spec.js
index ca57e32526..b6e9a4bdc9 100644
--- a/test/unit/specs/components/common/NISessionSignIn.spec.js
+++ b/test/unit/specs/components/common/TmSessionSignIn.spec.js
@@ -1,16 +1,16 @@
 import setup from "../../../helpers/vuex-setup"
 import Vuelidate from "vuelidate"
 import htmlBeautify from "html-beautify"
-import NiSessionSignIn from "common/NiSessionSignIn"
+import TmSessionSignIn from "common/TmSessionSignIn"
 
 let instance = setup()
 instance.localVue.use(Vuelidate)
 
-describe("NiSessionSignIn", () => {
+describe("TmSessionSignIn", () => {
   let wrapper, store
 
   beforeEach(() => {
-    let test = instance.mount(NiSessionSignIn)
+    let test = instance.mount(TmSessionSignIn)
     store = test.store
     wrapper = test.wrapper
   })
@@ -21,7 +21,7 @@ describe("NiSessionSignIn", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit).toHaveBeenCalledWith("setModalHelp", true)
@@ -57,7 +57,7 @@ describe("NiSessionSignIn", () => {
     wrapper.setData({ fields: { signInPassword: "123" } })
     wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show a notification if signin failed", async () => {
@@ -74,7 +74,7 @@ describe("NiSessionSignIn", () => {
   })
 
   it("should set the default password in mocked mode", async () => {
-    let test = instance.mount(NiSessionSignIn, {
+    let test = instance.mount(TmSessionSignIn, {
       getters: {
         mockedConnector: () => true
       }
diff --git a/test/unit/specs/components/common/NISessionSignUp.spec.js b/test/unit/specs/components/common/TmSessionSignUp.spec.js
similarity index 93%
rename from test/unit/specs/components/common/NISessionSignUp.spec.js
rename to test/unit/specs/components/common/TmSessionSignUp.spec.js
index e62c0c8ac1..3d405f2a39 100644
--- a/test/unit/specs/components/common/NISessionSignUp.spec.js
+++ b/test/unit/specs/components/common/TmSessionSignUp.spec.js
@@ -1,7 +1,7 @@
 import setup from "../../../helpers/vuex-setup"
 import Vuelidate from "vuelidate"
 import htmlBeautify from "html-beautify"
-import NISessionSignUp from "common/NiSessionSignUp"
+import NISessionSignUp from "common/TmSessionSignUp"
 jest.mock("renderer/google-analytics.js", () => uid => {})
 
 let instance = setup()
@@ -17,12 +17,13 @@ describe("NISessionSignUp", () => {
   })
 
   it("has the expected html structure", () => {
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
   it("should go back to the welcome screen on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(0)
       .trigger("click")
     expect(store.commit.mock.calls[0][0]).toBe("setModalSessionState")
@@ -31,7 +32,7 @@ describe("NISessionSignUp", () => {
 
   it("should open the help modal on click", () => {
     wrapper
-      .findAll(".ni-session-header a")
+      .findAll(".tm-session-header a")
       .at(1)
       .trigger("click")
     expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
@@ -126,7 +127,7 @@ describe("NISessionSignUp", () => {
     })
     wrapper.vm.onSubmit()
     expect(store.commit).not.toHaveBeenCalled()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if password is not 10 long", async () => {
@@ -141,7 +142,7 @@ describe("NISessionSignUp", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show error if password is not confirmed", async () => {
@@ -156,7 +157,7 @@ describe("NISessionSignUp", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should show an error if account name is not 5 long", async () => {
@@ -171,7 +172,7 @@ describe("NISessionSignUp", () => {
     })
     await wrapper.vm.onSubmit()
     expect(store.commit.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("should not continue if creation failed", async () => {
diff --git a/test/unit/specs/components/common/NISessionWelcome.spec.js b/test/unit/specs/components/common/TmSessionWelcome.spec.js
similarity index 93%
rename from test/unit/specs/components/common/NISessionWelcome.spec.js
rename to test/unit/specs/components/common/TmSessionWelcome.spec.js
index 83b4aeafee..eae97be353 100644
--- a/test/unit/specs/components/common/NISessionWelcome.spec.js
+++ b/test/unit/specs/components/common/TmSessionWelcome.spec.js
@@ -1,8 +1,8 @@
 import Vuex from "vuex"
 import { mount, createLocalVue } from "@vue/test-utils"
 import htmlBeautify from "html-beautify"
-import NISessionWelcome from "common/NiSessionWelcome"
-import LiSession from "common/NiLiSession"
+import NISessionWelcome from "common/TmSessionWelcome"
+import LiSession from "common/TmLiSession"
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -28,7 +28,7 @@ describe("NISessionWelcome", () => {
   describe("without accounts", () => {
     it("should open the help modal on click", () => {
       wrapper
-        .findAll(".ni-session-header a")
+        .findAll(".tm-session-header a")
         .at(1)
         .trigger("click")
       expect(store.commit.mock.calls[0]).toEqual(["setModalHelp", true])
diff --git a/test/unit/specs/components/common/NiToolBar.spec.js b/test/unit/specs/components/common/TmToolBar.spec.js
similarity index 77%
rename from test/unit/specs/components/common/NiToolBar.spec.js
rename to test/unit/specs/components/common/TmToolBar.spec.js
index 8a21a699b1..ace7dec0ab 100644
--- a/test/unit/specs/components/common/NiToolBar.spec.js
+++ b/test/unit/specs/components/common/TmToolBar.spec.js
@@ -1,14 +1,15 @@
 import setup from "../../../helpers/vuex-setup"
-import NiToolBar from "common/NiToolBar"
+import TmToolBar from "common/TmToolBar"
 
-describe("NiToolBar", () => {
+describe("TmToolBar", () => {
   let wrapper, store, instance
   let { mount } = setup()
 
   beforeEach(() => {
-    instance = mount(NiToolBar)
+    instance = mount(TmToolBar)
     wrapper = instance.wrapper
     store = instance.store
+    wrapper.update()
   })
 
   it("has the expected html structure", () => {
@@ -17,11 +18,13 @@ describe("NiToolBar", () => {
 
   it("sets the helper modal", () => {
     wrapper.vm.enableModalHelp()
+    wrapper.update()
     expect(store.state.config.modals.help.active).toBe(true)
   })
 
   it("call dispatch to sign the user out", () => {
     wrapper.vm.signOut()
+    wrapper.update()
     expect(store.dispatch).toHaveBeenCalledWith("signOut")
   })
 })
diff --git a/test/unit/specs/components/common/NiUserPane.spec.js b/test/unit/specs/components/common/TmUserPane.spec.js
similarity index 81%
rename from test/unit/specs/components/common/NiUserPane.spec.js
rename to test/unit/specs/components/common/TmUserPane.spec.js
index 918b21696d..ec049bd668 100644
--- a/test/unit/specs/components/common/NiUserPane.spec.js
+++ b/test/unit/specs/components/common/TmUserPane.spec.js
@@ -1,13 +1,13 @@
-import NiUserPane from "common/NiUserPane"
-import ListItem from "common/NiListItem"
+import TmUserPane from "common/TmUserPane"
+import { TmListItem } from "@tendermint/ui"
 import setup from "../../../helpers/vuex-setup"
 
-describe("NiUserPane", () => {
+describe("TmUserPane", () => {
   let wrapper, router, store, instance
   let { mount } = setup()
 
   beforeEach(async () => {
-    instance = mount(NiUserPane)
+    instance = mount(TmUserPane)
     store = instance.store
     router = instance.router
     wrapper = instance.wrapper
@@ -33,7 +33,7 @@ describe("NiUserPane", () => {
   })
 
   it("should redirect to the preferences page if signed in", () => {
-    wrapper.find(ListItem).trigger("click")
+    wrapper.find(TmListItem).trigger("click")
     expect(router.currentRoute.path).toBe("/preferences")
   })
 })
diff --git a/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap b/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap
index 1aca13a755..0fe8b8f194 100644
--- a/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/AppMenu.spec.js.snap
@@ -3,78 +3,78 @@
 exports[`AppMenu has the expected html structure 1`] = `
 "<menu class=\\"app-menu\\">
    <div class=\\"app-menu-main ps\\">
-      <a href=\\"#/\\" class=\\"ni-li ni-li-link router-link-exact-active router-link-active\\" id=\\"app-menu__wallet\\" exact=\\"exact\\">
-      <div class=\\"ni-li-container\\">
-         <div class=\\"ni-li-thumb\\">
+      <a href=\\"#/\\" class=\\"tm-li tm-li-link router-link-exact-active router-link-active\\" id=\\"app-menu__wallet\\" exact=\\"exact\\">
+      <div class=\\"tm-li-container\\">
+         <div class=\\"tm-li-thumb\\">
             <!---->
          </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Wallet
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/wallet/transactions\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__transactions\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/wallet/transactions\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__transactions\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Transactions
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/staking\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__staking\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/staking\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__staking\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Staking
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/proposals\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__proposals\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/proposals\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__proposals\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Proposals
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
-   </a><a href=\\"#/blocks\\" class=\\"ni-li ni-li-link\\" id=\\"app-menu__blocks\\" exact=\\"exact\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   </a><a href=\\"#/blocks\\" class=\\"tm-li tm-li-link\\" id=\\"app-menu__blocks\\" exact=\\"exact\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Blocks
       </div>
-   <div class=\\"ni-li-subtitle\\"></div>
+   <div class=\\"tm-li-subtitle\\"></div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
@@ -86,31 +86,31 @@ exports[`AppMenu has the expected html structure 1`] = `
       <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-   <div id=\\"ni-disconnected-network\\" class=\\"ni-connected-network ni-disconnected-network\\">
-      <div class=\\"ni-connected-network__icon\\">
+   <div id=\\"tm-disconnected-network\\" class=\\"tm-connected-network tm-disconnected-network\\">
+      <div class=\\"tm-connected-network__icon\\">
          <i class=\\"material-icons fa-spin\\">rotate_right</i>
       </div>
-   <div class=\\"ni-connected-network__string\\">
+   <div class=\\"tm-connected-network__string\\">
       Connecting to network…
    </div>
 </div>
-   <a href=\\"#/preferences\\" class=\\"ni-li ni-li-link ni-li-user proposal-enter proposal-enter-active\\">
-   <div class=\\"ni-li-container\\">
-      <div class=\\"ni-li-thumb\\">
+   <a href=\\"#/preferences\\" class=\\"tm-li tm-li-link tm-li-user proposal-enter proposal-enter-active\\">
+   <div class=\\"tm-li-container\\">
+      <div class=\\"tm-li-thumb\\">
          <!---->
       </div>
-   <div class=\\"ni-li-label\\">
-      <div class=\\"ni-li-title\\">
+   <div class=\\"tm-li-label\\">
+      <div class=\\"tm-li-title\\">
          Preferences
       </div>
-   <div class=\\"ni-li-subtitle\\">
+   <div class=\\"tm-li-subtitle\\">
       default
    </div>
 </div>
-   <div class=\\"ni-li-icon\\">
+   <div class=\\"tm-li-icon\\">
       <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
    </div>
 </div>
    </a>
 </menu>"
-`;
+`
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
deleted file mode 100644
index e906d884c7..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiSessionAccountDelete has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
-         <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
-               <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
-                  Remove Account
-               </div>
-      <a><i class=\\"material-icons\\">help_outline</i></a>
-   </div>
-      <div class=\\"ni-session-main\\">
-         <div class=\\"ni-form-group\\">
-            <!---->
-            <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 sm ni-form-msg--error\\">
-                  Password is required
-               </div>
-                  <!---->
-   </div>
-</div>
-      <div class=\\"ni-form-group\\">
-         <!---->
-         <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\\">
-               </div>
-      <label for=\\"sign-up-warning\\" class=\\"ni-field-checkbox-label\\">I understand that Cosmos cannot recover deleted accounts without the passphrase.</label>
-   </div>
-      <div class=\\"ni-form-msg sm ni-form-msg--error\\">
-         Deletion confirmation is required
-      </div>
-</div>
-</div>
-</div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">exit_to_app</i>
-         <!---->
-         <span class=\\"ni-btn__value\\">Sign Out and Remove Account</span></span></button>
-      </div>
-</main>
-      <!---->
-</div>
-</form>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap
deleted file mode 100644
index 653a42346d..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NISessionHardware.spec.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NISessionHardware has the expected html structure 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 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=\\"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=\\"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/components/common/__snapshots__/NISessionLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
deleted file mode 100644
index 8fe532a9fc..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiSessionLoading has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
-         <div class=\\"ni-session-title\\">
-            Voyager is loading…
-         </div>
-</div>
-<div class=\\"ni-session-main ni-session-main--loading\\">
-   <img src=\\"~assets/images/loader.svg\\">
-</div>
-</div>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
deleted file mode 100644
index a1a1a70b91..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiSessionSignIn has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
-         <!---->
-         <main class=\\"ni-form-main\\">
-            <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-form-group\\">
-            <!---->
-            <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\\">
-                     Select account…
-                  </option>
-                  </select>
-                  <div class=\\"ni-field-select-addon\\">
-                     <i class=\\"material-icons\\">arrow_drop_down</i>
-                  </div>
-</div>
-      <div class=\\"ni-form-msg sm ni-form-msg--error\\">
-         Name is required
-      </div>
-</div>
-</div>
-      <div class=\\"ni-form-group\\">
-         <!---->
-         <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 sm ni-form-msg--error\\">
-               Password is required
-            </div>
-               <!---->
-               <!---->
-   </div>
-</div>
-</div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
-         <!---->
-         <span class=\\"ni-btn__value\\">Sign In</span></span></button>
-      </div>
-</main>
-      <!---->
-</div>
-</form>
-</div>"
-`;
-
-exports[`NiSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"ni-session\\"><form class=\\"ni-session-container ni-form\\"><div class=\\"ni-form-container\\"><!----><main class=\\"ni-form-main\\"><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-form-group\\"><!----><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\\">Select account…</option></select><div class=\\"ni-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"ni-form-msg sm ni-form-msg--error\\">Name is required</div></div></div><div class=\\"ni-form-group\\"><!----><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 sm ni-form-msg--error\\">Password is required</div><!----><div class=\\"ni-form-msg sm ni-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"ni-session-footer\\"><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"ni-btn__value\\">Sign In</span></span></button></div></main><!----></div></form></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
deleted file mode 100644
index 872e764343..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiBarDiscrete.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiBarDiscrete has the expected html structure 1`] = `
-"<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-</div>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
deleted file mode 100644
index f5f7c23451..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\"><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>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
deleted file mode 100644
index ded8a911d0..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiBtnReceive.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiBtnReceive has the expected html structure 1`] = `"<button class=\\"ni-btn btn-receive\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">file_download</i><!----><span class=\\"ni-btn__value\\">Receive</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
deleted file mode 100644
index e9c0660da3..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmpty.spec.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// 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\\">
-      <h4>
-         N/A
-      </h4>
-</div>
-<div class=\\"ni-data-msg__subtitle\\">
-   <h5>
-      No data available yet.
-   </h5>
-</div>
-</div>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
deleted file mode 100644
index 402b0493b0..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiDataLoading.spec.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// 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/components/common/__snapshots__/NiDataMsg.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
deleted file mode 100644
index 30910d2f6b..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiDataMsg.spec.js.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// 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/components/common/__snapshots__/NiFieldGroup.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldGroup.spec.js.snap
deleted file mode 100644
index e4786602a5..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFieldGroup.spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// 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/components/common/__snapshots__/NiFieldSeed.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
deleted file mode 100644
index c07f82bc79..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFieldSeed.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiFieldSeed has the expected html structure 1`] = `"<textarea class=\\"ni-field-seed ni-field\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
deleted file mode 100644
index 0f265d3a4d..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFieldVote.spec.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// 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/components/common/__snapshots__/NiFormGroup.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormGroup.spec.js.snap
deleted file mode 100644
index 99c56d7fe9..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFormGroup.spec.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// 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/components/common/__snapshots__/NiFormMsg.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
deleted file mode 100644
index 3f27cc7e5b..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFormMsg.spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// 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/components/common/__snapshots__/NiFormStruct.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
deleted file mode 100644
index 581e86f0f8..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiFormStruct.spec.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// 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/components/common/__snapshots__/NiHardwareState.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
deleted file mode 100644
index ede7ef1e20..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiHardwareState.spec.js.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// 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/components/common/__snapshots__/NiListItem.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
deleted file mode 100644
index 7495e1b260..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiListItem.spec.js.snap
+++ /dev/null
@@ -1,392 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiListItem has the expected html structure 1`] = `<!---->`;
-
-exports[`NiListItem should append the fa-spin class 1`] = `
-<div
-  class="ni-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <i
-        class="material-icons fa-spin"
-      >
-        rotate_right
-      </i>
-    </div>
-    <div
-      class="ni-li-label"
-    >
-      <div
-        class="ni-li-title"
-      >
-        Connecting...
-      </div>
-      <div
-        class="ni-li-subtitle"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show a dd link 1`] = `
-<a
-  class="ni-li ni-li-link v-enter v-enter-active"
-  href="/location"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-dl"
-    >
-      <div
-        class="ni-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="ni-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</a>
-`;
-
-exports[`NiListItem should show a description 1`] = `
-<a
-  class="ni-li ni-li-link v-enter v-enter-active"
-  href="/location"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-dl"
-    >
-      <div
-        class="ni-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="ni-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</a>
-`;
-
-exports[`NiListItem should show a label 1`] = `
-<div
-  class="ni-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-label"
-    >
-      <div
-        class="ni-li-title"
-      >
-        Title
-      </div>
-      <div
-        class="ni-li-subtitle"
-      >
-        Subtitle
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show a router-link 1`] = `
-<router-link
-  class="ni-li ni-li-link v-enter v-enter-active"
-  name="proposal"
-  to="/location"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-dl"
-    >
-      <div
-        class="ni-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="ni-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</router-link>
-`;
-
-exports[`NiListItem should show a subtitle router link 1`] = `
-<router-link
-  class="ni-li ni-li-link v-enter v-enter-active"
-  name="proposal"
-  to="/location"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-label"
-    >
-      <div
-        class="ni-li-title"
-      >
-        
-      </div>
-      <div
-        class="ni-li-subtitle"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="ni-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</router-link>
-`;
-
-exports[`NiListItem should show a thumb 1`] = `
-<a
-  class="ni-li ni-li-link v-enter v-enter-active"
-  href="/location"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-dl"
-    >
-      <div
-        class="ni-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-dd"
-      >
-        
-      </div>
-    </div>
-    <div
-      class="ni-li-icon"
-    >
-      <i
-        class="material-icons inactive"
-      >
-        chevron_right
-      </i>
-      <i
-        class="material-icons active"
-      >
-        my_location
-      </i>
-    </div>
-  </div>
-</a>
-`;
-
-exports[`NiListItem should show as dd text 1`] = `
-<div
-  class="ni-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-dl"
-    >
-      <div
-        class="ni-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-dd"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show as text 1`] = `
-<div
-  class="ni-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-label"
-    >
-      <div
-        class="ni-li-title"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-subtitle"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NiListItem should show as text link 1`] = `
-<div
-  class="ni-li v-enter v-enter-active"
-  name="proposal"
->
-  <div
-    class="ni-li-container"
-  >
-    <div
-      class="ni-li-thumb"
-    >
-      <!---->
-    </div>
-    <div
-      class="ni-li-dl"
-    >
-      <div
-        class="ni-li-dt"
-      >
-        Link
-      </div>
-      <div
-        class="ni-li-dd"
-      >
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
deleted file mode 100644
index 17525e7cc0..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiModalError.spec.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiModalError has the expected html structure 1`] = `
-"<div class=\\"ni-modal-error__wrapper\\">
-   <div class=\\"ni-modal-error\\">
-      <div class=\\"ni-modal-error__icon\\">
-         <i class=\\"material-icons\\">error_outline</i>
-      </div>
-<div class=\\"ni-modal-error__title\\">
-   Voyager ran into an error
-</div>
-<div class=\\"ni-modal-error__body\\">
-   Voyager has encountered a critical error that blocks the app from running. Please create an issue and include a copy of the app logs.
-</div>
-<div class=\\"ni-modal-error__footer\\">
-   <a class=\\"ni-btn\\" id=\\"ni-modal-error__btn-issue\\" href=\\"https://github.com/cosmos/voyager/issues\\"><span class=\\"ni-btn__container ni-btn--size-lg ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">bug_report</i><span class=\\"ni-btn__value\\">Create an issue</span></span></a><button class=\\"ni-btn\\" id=\\"ni-modal-error__btn-logs\\"><span class=\\"ni-btn__container ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">info_outline</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">View app logs</span></span></button>
-</div>
-</div>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap
deleted file mode 100644
index 6de6571261..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiModalReceive.spec.js.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiModalReceive has the expected html structure 1`] = `<!---->`;
-
-exports[`NiModalReceive should hide 1`] = `<!---->`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
deleted file mode 100644
index e5e7f79c0e..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiOnboarding.spec.js.snap
+++ /dev/null
@@ -1,221 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiOnboarding has the expected html structure 0 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
-               Welcome to Voyager
-            </div>
-</div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
-      This is a quick tour of the primary features of Cosmos Voyager.
-   </div>
-<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node ni-bar-discrete__node--active\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-</div>
-</div>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
-</div>
-</div>
-</div>
-</div>"
-`;
-
-exports[`NiOnboarding has the expected html structure 1 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
-               Welcome to Voyager
-            </div>
-</div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
-      You can send and receive Cosmos tokens from anyone around the world.
-   </div>
-<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-</div>
-</div>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
-</div>
-</div>
-</div>
-</div>"
-`;
-
-exports[`NiOnboarding has the expected html structure 2 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
-               Welcome to Voyager
-            </div>
-</div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
-      You can stake your Atoms to Cosmos Validators to earn even more Atoms.
-   </div>
-<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-</div>
-</div>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
-</div>
-</div>
-</div>
-</div>"
-`;
-
-exports[`NiOnboarding has the expected html structure 3 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
-               Welcome to Voyager
-            </div>
-</div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
-      Through governance, you can vote on the future of the Cosmos Network.
-   </div>
-<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-</div>
-</div>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
-</div>
-</div>
-</div>
-</div>"
-`;
-
-exports[`NiOnboarding has the expected html structure 4 1`] = `
-"<div id=\\"onboarding\\" class=\\"ni-session-wrapper\\">
-   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"ni-session-backdrop\\">
-   <div class=\\"ni-session\\">
-      <div class=\\"ni-session-container\\">
-         <div class=\\"ni-session-header\\">
-            <div class=\\"ni-session-title\\">
-               Welcome to Voyager
-            </div>
-</div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-session-label\\">
-      Start using Voyager to explore the Cosmos Network!
-   </div>
-<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
-<div class=\\"ni-bar-discrete\\">
-   <div class=\\"ni-bar-discrete__container\\">
-      <div class=\\"ni-bar-discrete__edge\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-<div class=\\"ni-bar-discrete__node\\"></div>
-</div>
-</div>
-<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</div>
-<div class=\\"ni-session-footer\\">
-   <button class=\\"ni-btn\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">close</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Skip</span></span></button><button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i>
-   <!---->
-   <span class=\\"ni-btn__value\\">Next</span></span></button>
-</div>
-</div>
-</div>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap
deleted file mode 100644
index 1a1e365050..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPage has the expected html structure 1`] = `
-<div
-  class="ni-page"
->
-  <header
-    class="ni-page-header"
-    icon="hello_icon"
-  >
-    <div
-      class="ni-page-header-container"
-    >
-      <div
-        class="ni-page-header-text"
-      >
-        <div
-          class="ni-page-header-title"
-        >
-          <h2>
-            Title
-          </h2>
-        </div>
-        <div
-          class="ni-page-header-subtitle"
-        >
-          <h3>
-            Subtitle
-          </h3>
-        </div>
-      </div>
-      <menu
-        class="ni-page-header-menu"
-      >
-        <div />
-      </menu>
-    </div>
-  </header>
-  <main
-    class="ni-page-main ps"
-  >
-    <div
-      class="ps__rail-x"
-      style="left: 0px; top: 0px;"
-    >
-      <div
-        class="ps__thumb-x"
-        style="left: 0px; width: 0px;"
-        tabindex="0"
-      />
-    </div>
-    <div
-      class="ps__rail-y"
-      style="top: 0px; left: 0px;"
-    >
-      <div
-        class="ps__thumb-y"
-        style="top: 0px; height: 0px;"
-        tabindex="0"
-      />
-    </div>
-  </main>
-</div>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap
deleted file mode 100644
index ca952fa668..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPageFooter.spec.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPageFooter has the expected html structure 1`] = `
-<footer
-  class="ni-page-footer"
->
-  <div
-    class="container"
-  />
-</footer>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap
deleted file mode 100644
index 67694aa7b2..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPageHeader.spec.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPageHeader has the expected html structure 1`] = `
-<header
-  class="ni-page-header"
->
-  <div
-    class="ni-page-header-container"
-  >
-    <div
-      class="ni-page-header-text"
-    >
-      <div
-        class="ni-page-header-title"
-      />
-      <div
-        class="ni-page-header-subtitle"
-      />
-    </div>
-    <menu
-      class="ni-page-header-menu"
-    />
-  </div>
-</header>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap
deleted file mode 100644
index 43d807cdf6..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiPart.spec.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiPart has the expected html structure 1`] = `
-<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"
-        >
-          Test
-        </div>
-        <menu
-          class="ni-part-menu"
-        />
-      </div>
-    </header>
-    <main
-      class="ni-part-main"
-    />
-  </div>
-</section>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
deleted file mode 100644
index f4e83807d5..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiSessionImport has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
-         <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
-               <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
-                  Import with Seed
-               </div>
-      <a><i class=\\"material-icons\\">help_outline</i></a>
-   </div>
-      <div class=\\"ni-session-main ps\\">
-         <div class=\\"ni-form-group\\">
-            <!---->
-            <label for=\\"import-name\\" class=\\"ni-form-group__label\\">Account Name</label>
-            <div class=\\"ni-form-group__field\\">
-               <input type=\\"text\\" placeholder=\\"Must have at least 5 characters\\" class=\\"ni-field\\" id=\\"import-name\\">
-               <div class=\\"ni-form-msg sm ni-form-msg--error\\">
-                  Name is required
-               </div>
-                  <!---->
-   </div>
-</div>
-      <div class=\\"ni-form-group\\">
-         <!---->
-         <label for=\\"import-password\\" class=\\"ni-form-group__label\\">Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"ni-field\\" id=\\"import-password\\">
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
-               Password is required
-            </div>
-               <!---->
-   </div>
-</div>
-      <div class=\\"ni-form-group\\">
-         <!---->
-         <label for=\\"import-password-confirmation\\" class=\\"ni-form-group__label\\">Confirm Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"ni-field\\" id=\\"import-password-confirmation\\">
-            <!---->
-         </div>
-</div>
-      <div class=\\"ni-form-group\\">
-         <!---->
-         <label for=\\"import-seed\\" class=\\"ni-form-group__label\\">Seed Phrase</label>
-         <div class=\\"ni-form-group__field\\">
-            <textarea class=\\"ni-field-seed ni-field\\" id=\\"import-seed\\" placeholder=\\"Must be exactly 16 words\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
-               Seed is required
-            </div>
-</div>
-</div>
-      <div class=\\"ni-form-group\\">
-         <!---->
-         <!---->
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
-                  <input id=\\"error-collection\\" type=\\"checkbox\\">
-               </div>
-      <label for=\\"error-collection\\" class=\\"ni-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
-   </div>
-</div>
-</div>
-      <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
-         <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
-</div>
-      <div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
-         <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
-</div>
-</div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
-         <!---->
-         <span class=\\"ni-btn__value\\">Next</span></span></button>
-      </div>
-</main>
-      <!---->
-</div>
-</form>
-</div>"
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap
deleted file mode 100644
index ef818e1c98..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiTabBar.spec.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiTabBar has the expected html structure 1`] = `
-<div
-  class="ni-tab-bar"
->
-  <div
-    class="ni-tab-bar-container"
-  >
-    <main-slot />
-  </div>
-</div>
-`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
deleted file mode 100644
index 0d849a036c..0000000000
--- a/test/unit/specs/components/common/__snapshots__/NiToolBar.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NiToolBar has the expected html structure 1`] = `"<div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"></div><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap b/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
index 5b8ffe29d5..aa6baa7f67 100644
--- a/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`Page404 has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             404 - Page Not Found
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,68 +29,68 @@ exports[`Page404 has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div />
       </menu>
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Try another page...
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <a
-            class="ni-li ni-li-link router-link-exact-active router-link-active"
+            class="tm-li tm-li-link router-link-exact-active router-link-active"
             href="#/"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Balances
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-icon"
+                class="tm-li-icon"
               >
                 <i
                   class="material-icons inactive"
@@ -106,33 +106,33 @@ exports[`Page404 has the expected html structure 1`] = `
             </div>
           </a>
           <a
-            class="ni-li ni-li-link"
+            class="tm-li tm-li-link"
             href="#/staking"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Staking
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-icon"
+                class="tm-li-icon"
               >
                 <i
                   class="material-icons inactive"
diff --git a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
index be7413a75b..dda453c7a2 100644
--- a/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/PagePreferences.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PagePreferences has the expected html structure if connected 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Preferences
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,46 +29,47 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -77,67 +78,67 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Settings
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Select network to connect to
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <div
                   class="ni-select"
                   id="select-network"
                 >
                   <select
-                    class="ni-field ni-field-select"
+                    class="tm-field tm-field-select"
                   >
                     <option
                       disabled="disabled"
@@ -159,7 +160,7 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                     </option>
                   </select>
                   <div
-                    class="ni-field-select-addon"
+                    class="tm-field-select-addon"
                   >
                     <i
                       class="material-icons"
@@ -172,39 +173,39 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             </div>
           </div>
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Select theme
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <div
                   class="ni-select"
                   id="select-theme"
                 >
                   <select
-                    class="ni-field ni-field-select"
+                    class="tm-field tm-field-select"
                   >
                     <option
                       disabled="disabled"
@@ -226,7 +227,7 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
                     </option>
                   </select>
                   <div
-                    class="ni-field-select-addon"
+                    class="tm-field-select-addon"
                   >
                     <i
                       class="material-icons"
@@ -239,49 +240,49 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             </div>
           </div>
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   View tutorial for Voyager
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <button
-                  class="ni-btn"
+                  class="tm-btn"
                   id="toggle-onboarding"
                 >
                   <span
-                    class="ni-btn__container"
+                    class="tm-btn__container"
                   >
                     <i
                       aria-hidden="true"
-                      class="ni-btn__icon material-icons"
+                      class="tm-btn__icon material-icons"
                     >
                       open_in_new
                     </i>
                     <!---->
                     <span
-                      class="ni-btn__value"
+                      class="tm-btn__value"
                     >
                       Launch Tutorial
                     </span>
@@ -291,32 +292,32 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
             </div>
           </div>
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Automatically send usage statistics and crash reports
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   to the Voyager development team
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <label
                   class="ni-toggle unchecked"
@@ -357,74 +358,74 @@ exports[`PagePreferences has the expected html structure if connected 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Account
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-field"
+            class="tm-li tm-li-field"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   Switch account
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <div
-                class="ni-li-input"
+                class="tm-li-input"
               >
                 <button
-                  class="ni-btn"
+                  class="tm-btn"
                   type="button"
                 >
                   <span
-                    class="ni-btn__container"
+                    class="tm-btn__container"
                   >
                     <i
                       aria-hidden="true"
-                      class="ni-btn__icon material-icons"
+                      class="tm-btn__icon material-icons"
                     >
                       exit_to_app
                     </i>
                     <!---->
                     <span
-                      class="ni-btn__value"
+                      class="tm-btn__value"
                     >
                       Sign Out
                     </span>
diff --git a/test/unit/specs/components/common/__snapshots__/TmBtnCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmBtnCopy.spec.js.snap
new file mode 100644
index 0000000000..248e2da84e
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmBtnCopy.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmBtnCopy has the expected html structure 1`] = `"<button class=\\"tm-btn btn-copy\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">content_copy</i><!----><span class=\\"tm-btn__value\\">Copy</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmBtnReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmBtnReceive.spec.js.snap
new file mode 100644
index 0000000000..81b2ea7d6d
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmBtnReceive.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmBtnReceive has the expected html structure 1`] = `"<button class=\\"tm-btn btn-receive\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">file_download</i><!----><span class=\\"tm-btn__value\\">Receive</span></span></button>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmConnectedNetwork.spec.js.snap
similarity index 56%
rename from test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmConnectedNetwork.spec.js.snap
index 0404b72927..f035edd184 100644
--- a/test/unit/specs/components/common/__snapshots__/NiConnectedNetwork.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmConnectedNetwork.spec.js.snap
@@ -1,32 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiConnectedNetwork has the expected html structure 1`] = `
-"<div id=\\"ni-connected-network\\" class=\\"ni-connected-network ni-connected-network--mocked\\">
-   <div class=\\"ni-connected-network__connection\\">
-      <div id=\\"ni-connected-network__icon\\" class=\\"ni-connected-network__icon\\">
+exports[`TmConnectedNetwork has the expected html structure 1`] = `
+"<div id=\\"tm-connected-network\\" class=\\"tm-connected-network tm-connected-network--mocked\\">
+   <div class=\\"tm-connected-network__connection\\">
+      <div id=\\"tm-connected-network__icon\\" class=\\"tm-connected-network__icon\\">
          <i class=\\"material-icons\\">wifi</i>
       </div>
-<div id=\\"ni-connected-network__string\\" class=\\"ni-connected-network__string\\">
-   <span class=\\"desktop-only\\">Connected to</span><span class=\\"chain-id\\"> test-net</span> via <span>127.0.0.1</span><a href=\\"#/preferences\\" class=\\"desktop-only\\" id=\\"ni-connected-network_preferences-link\\"> (change network)</a>
+<div id=\\"tm-connected-network__string\\" class=\\"tm-connected-network__string\\">
+   <span class=\\"desktop-only\\">Connected to</span><span class=\\"chain-id\\"> test-net</span> via <span>127.0.0.1</span><a href=\\"#/preferences\\" class=\\"desktop-only\\" id=\\"tm-connected-network_preferences-link\\"> (change network)</a>
 </div>
 </div>
-<div class=\\"ni-connected-network__string\\" id=\\"ni-connected-network__block\\">
+<div class=\\"tm-connected-network__string\\" id=\\"tm-connected-network__block\\">
    <span class=\\"desktop-only\\">Current Block:</span><a href=\\"#/blocks\\" class=\\"\\"> #42</a>
 </div>
 </div>"
 `;
 
-exports[`NiConnectedNetwork shows the connected node 1`] = `
+exports[`TmConnectedNetwork shows the connected node 1`] = `
 <div
-  class="ni-connected-network"
-  id="ni-connected-network"
+  class="tm-connected-network"
+  id="tm-connected-network"
 >
   <div
-    class="ni-connected-network__connection"
+    class="tm-connected-network__connection"
   >
     <div
-      class="ni-connected-network__icon"
-      id="ni-connected-network__icon"
+      class="tm-connected-network__icon"
+      id="tm-connected-network__icon"
     >
       <i
         class="material-icons"
@@ -35,8 +35,8 @@ exports[`NiConnectedNetwork shows the connected node 1`] = `
       </i>
     </div>
     <div
-      class="ni-connected-network__string"
-      id="ni-connected-network__string"
+      class="tm-connected-network__string"
+      id="tm-connected-network__string"
     >
       <span
         class="desktop-only"
@@ -55,15 +55,15 @@ exports[`NiConnectedNetwork shows the connected node 1`] = `
       <a
         class="desktop-only router-link-exact-active router-link-active"
         href="#/preferences"
-        id="ni-connected-network_preferences-link"
+        id="tm-connected-network_preferences-link"
       >
          (change network)
       </a>
     </div>
   </div>
   <div
-    class="ni-connected-network__string"
-    id="ni-connected-network__block"
+    class="tm-connected-network__string"
+    id="tm-connected-network__block"
   >
     <span
       class="desktop-only"
diff --git a/test/unit/specs/components/common/__snapshots__/TmDataEmpty.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataEmpty.spec.js.snap
new file mode 100644
index 0000000000..d6000728f2
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmDataEmpty.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmDataEmpty has the expected html structure 1`] = `
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
+      <i class=\\"material-icons\\">info_outline</i>
+   </div>
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
+      <h4>
+         N/A
+      </h4>
+</div>
+<div class=\\"tm-data-msg__subtitle\\">
+   <h5>
+      No data available yet.
+   </h5>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataEmptySearch.spec.js.snap
similarity index 50%
rename from test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataEmptySearch.spec.js.snap
index 91e4b5d0ae..9e3291d6c1 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmptySearch.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataEmptySearch.spec.js.snap
@@ -1,17 +1,17 @@
 // 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\\">
+exports[`TmDataEmptySearch has the expected html structure 1`] = `
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">search</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          No Results
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <div>
       Your search did not match any available data.
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataEmptyTx.spec.js.snap
similarity index 62%
rename from test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataEmptyTx.spec.js.snap
index af8dc51242..09f71f07f5 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataEmptyTx.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataEmptyTx.spec.js.snap
@@ -1,17 +1,17 @@
 // 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\\">
+exports[`TmDataEmptyTx has the expected html structure 1`] = `
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
       <i class=\\"material-icons\\">info_outline</i>
    </div>
-<div class=\\"ni-data-msg__text\\">
-   <div class=\\"ni-data-msg__title\\">
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          No Transaction History
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-data-msg__subtitle\\">
    <div>
       Looks like you haven't sent or received any transactions yet. Head over to 
       <router-link to=\\"[object Object]\\">
diff --git a/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataError.spec.js.snap
similarity index 63%
rename from test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmDataError.spec.js.snap
index 9c3d0dfd0e..e85e1998ae 100644
--- a/test/unit/specs/components/common/__snapshots__/NiDataError.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmDataError.spec.js.snap
@@ -1,17 +1,17 @@
 // 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\\">
+exports[`TmDataError has the expected html structure 1`] = `
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-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 class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
       <div>
          Aw shucks!
       </div>
 </div>
-<div class=\\"ni-data-msg__subtitle\\">
+<div class=\\"tm-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/voyager/issues\\">file a bug report</a>. Apologies!
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/TmDataLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmDataLoading.spec.js.snap
new file mode 100644
index 0000000000..f046ce4acd
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmDataLoading.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmDataLoading has the expected html structure 1`] = `
+"<div class=\\"tm-data-msg\\">
+   <div class=\\"tm-data-msg__icon\\">
+      <i class=\\"material-icons fa-spin\\">rotate_right</i>
+   </div>
+<div class=\\"tm-data-msg__text\\">
+   <div class=\\"tm-data-msg__title\\">
+      <div>
+         Data is loading…
+      </div>
+</div>
+<div class=\\"tm-data-msg__subtitle\\">
+   <div>
+      Please wait a moment.
+   </div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmFieldAddon.spec.js.snap
similarity index 52%
rename from test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmFieldAddon.spec.js.snap
index 96a47a55bf..3f623bd596 100644
--- a/test/unit/specs/components/common/__snapshots__/NiFieldAddon.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmFieldAddon.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiFieldAddon has the expected html structure 1`] = `
-"<div class=\\"ni-field-addon\\">
+exports[`TmFieldAddon has the expected html structure 1`] = `
+"<div class=\\"tm-field-addon\\">
    <div class=\\"fake-addon\\">
       ATOM
    </div>
diff --git a/test/unit/specs/components/common/__snapshots__/TmFieldSeed.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmFieldSeed.spec.js.snap
new file mode 100644
index 0000000000..9e53f003f4
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmFieldSeed.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmFieldSeed has the expected html structure 1`] = `"<textarea class=\\"tm-field-seed tm-field\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmFieldVote.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmFieldVote.spec.js.snap
new file mode 100644
index 0000000000..02bd451827
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmFieldVote.spec.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmFieldVote has the expected html structure 1`] = `
+"<div class=\\"tm-field-vote\\">
+   <div class=\\"tm-field-vote-container\\">
+      <div class=\\"tm-field-vote-input\\">
+         <i class=\\"material-icons\\">radio_button_checked</i>
+      </div>
+<div class=\\"tm-field-vote-label\\">
+   <div class=\\"tm-field-vote-bar-outer\\">
+      <div class=\\"tm-field-vote-bar-inner\\" style=\\"width: 34%;\\"></div>
+</div>
+<div class=\\"tm-field-vote-dl\\">
+   <div class=\\"tm-field-vote-dt\\">
+      No
+   </div>
+<div class=\\"tm-field-vote-dd\\">
+   34%
+</div>
+</div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap
new file mode 100644
index 0000000000..232b6ff506
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmHardwareState has the expected html structure 1`] = `
+"<div class=\\"tm-hardware-state\\">
+   <i class=\\"tm-hardware-state__icon material-icons fa-spin\\">rotate_right</i>
+   <div class=\\"tm-hardware-state__label\\">
+      Detecting your Ledger Wallet
+   </div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmLiCopy.spec.js.snap
similarity index 59%
rename from test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmLiCopy.spec.js.snap
index 34e1adb5bb..2ec3d3db1d 100644
--- a/test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmLiCopy.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiLiCopy has the expected html structure 1`] = `
+exports[`TmLiCopy has the expected html structure 1`] = `
 <div
-  class="ni-li-copy"
+  class="tm-li-copy"
 >
   <div
     class="value"
@@ -11,20 +11,20 @@ exports[`NiLiCopy has the expected html structure 1`] = `
   </div>
   <menu>
     <button
-      class="ni-btn btn-copy"
+      class="tm-btn btn-copy"
     >
       <span
-        class="ni-btn__container"
+        class="tm-btn__container"
       >
         <i
           aria-hidden="true"
-          class="ni-btn__icon material-icons"
+          class="tm-btn__icon material-icons"
         >
           content_copy
         </i>
         <!---->
         <span
-          class="ni-btn__value"
+          class="tm-btn__value"
         >
           Copy
         </span>
@@ -34,9 +34,9 @@ exports[`NiLiCopy has the expected html structure 1`] = `
 </div>
 `;
 
-exports[`NiLiCopy should show the receive button 1`] = `
+exports[`TmLiCopy should show the receive button 1`] = `
 <div
-  class="ni-li-copy"
+  class="tm-li-copy"
 >
   <div
     class="value"
@@ -45,20 +45,20 @@ exports[`NiLiCopy should show the receive button 1`] = `
   </div>
   <menu>
     <button
-      class="ni-btn btn-copy"
+      class="tm-btn btn-copy"
     >
       <span
-        class="ni-btn__container"
+        class="tm-btn__container"
       >
         <i
           aria-hidden="true"
-          class="ni-btn__icon material-icons"
+          class="tm-btn__icon material-icons"
         >
           content_copy
         </i>
         <!---->
         <span
-          class="ni-btn__value"
+          class="tm-btn__value"
         >
           Copy
         </span>
diff --git a/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmLiSession.spec.js.snap
similarity index 54%
rename from test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmLiSession.spec.js.snap
index 03e928246c..60c16a857e 100644
--- a/test/unit/specs/components/common/__snapshots__/NiLiSession.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmLiSession.spec.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiLiSession has the expected html structure 1`] = `
+exports[`TmLiSession has the expected html structure 1`] = `
 <div
-  class="ni-li-session"
+  class="tm-li-session"
 >
   <div
-    class="ni-li-session-icon"
+    class="tm-li-session-icon"
   >
     <i
       class="material-icons"
@@ -14,15 +14,15 @@ exports[`NiLiSession has the expected html structure 1`] = `
     </i>
   </div>
   <div
-    class="ni-li-session-text"
+    class="tm-li-session-text"
   >
     <div
-      class="ni-li-session-title"
+      class="tm-li-session-title"
     >
       useful title
     </div>
     <div
-      class="ni-li-session-subtitle"
+      class="tm-li-session-subtitle"
     >
       useful subtitle
     </div>
diff --git a/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModal.spec.js.snap
similarity index 52%
rename from test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModal.spec.js.snap
index 5117af0d55..93bcd355f5 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModal.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModal.spec.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModal has the expected html structure 1`] = `
+exports[`TmModal has the expected html structure 1`] = `
 <div
-  class="ni-modal"
+  class="tm-modal"
 >
   <div
-    class="ni-modal-container"
+    class="tm-modal-container"
   >
     <header
-      class="ni-modal-header"
+      class="tm-modal-header"
     >
       <!---->
       <div
-        class="ni-modal-title"
+        class="tm-modal-title"
       />
       <div
-        class="ni-modal-icon ni-modal-close"
+        class="tm-modal-icon tm-modal-close"
       >
         <i
           class="material-icons"
@@ -25,10 +25,10 @@ exports[`NiModal has the expected html structure 1`] = `
       </div>
     </header>
     <main
-      class="ni-modal-main"
+      class="tm-modal-main"
     />
     <footer
-      class="ni-modal-footer"
+      class="tm-modal-footer"
     />
   </div>
 </div>
diff --git a/test/unit/specs/components/common/__snapshots__/TmModalError.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalError.spec.js.snap
new file mode 100644
index 0000000000..6f8080de41
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmModalError.spec.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmModalError has the expected html structure 1`] = `
+"<div class=\\"tm-modal-error__wrapper\\">
+   <div class=\\"tm-modal-error\\">
+      <div class=\\"tm-modal-error__icon\\">
+         <i class=\\"material-icons\\">error_outline</i>
+      </div>
+<div class=\\"tm-modal-error__title\\">
+   Voyager ran into an error
+</div>
+<div class=\\"tm-modal-error__body\\">
+   Voyager has encountered a critical error that blocks the app from running. Please create an issue and include a copy of the app logs.
+</div>
+<div class=\\"tm-modal-error__footer\\">
+   <a class=\\"tm-btn\\" id=\\"tm-modal-error__btn-issue\\" href=\\"https://github.com/cosmos/voyager/issues\\"><span class=\\"tm-btn__container tm-btn--size-lg tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">bug_report</i><span class=\\"tm-btn__value\\">Create an issue</span></span></a><button class=\\"tm-btn\\" id=\\"tm-modal-error__btn-logs\\"><span class=\\"tm-btn__container tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">info_outline</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">View app logs</span></span></button>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalHelp.spec.js.snap
similarity index 68%
rename from test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalHelp.spec.js.snap
index 90a2045bda..9c6ecc0985 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalHelp.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalHelp.spec.js.snap
@@ -1,25 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalHelp has the expected html structure 1`] = `
+exports[`TmModalHelp has the expected html structure 1`] = `
 <div
-  class="ni-modal-help ni-modal"
+  class="tm-modal-help tm-modal"
 >
   <div
-    class="ni-modal-container"
+    class="tm-modal-container"
   >
     <header
-      class="ni-modal-header"
+      class="tm-modal-header"
     >
       <!---->
       <div
-        class="ni-modal-title"
+        class="tm-modal-title"
       >
         <div>
           Need Help?
         </div>
       </div>
       <div
-        class="ni-modal-icon ni-modal-close"
+        class="tm-modal-icon tm-modal-close"
       >
         <i
           class="material-icons"
@@ -29,39 +29,39 @@ exports[`NiModalHelp has the expected html structure 1`] = `
       </div>
     </header>
     <main
-      class="ni-modal-main"
+      class="tm-modal-main"
     >
       <p>
         Something in the app not working correctly? Tell us what went wrong in developer chat or create an issue on our GitHub. Thanks for improving Cosmos Voyager!
       </p>
       <a
-        class="ni-li ni-li-link proposal-enter proposal-enter-active"
+        class="tm-li tm-li-link proposal-enter proposal-enter-active"
         href="https://riot.im/app/#/room/#cosmos:matrix.org"
       >
         <div
-          class="ni-li-container"
+          class="tm-li-container"
         >
           <div
-            class="ni-li-thumb"
+            class="tm-li-thumb"
           >
             <!---->
           </div>
           <div
-            class="ni-li-label"
+            class="tm-li-label"
           >
             <div
-              class="ni-li-title"
+              class="tm-li-title"
             >
               Developer Chat
             </div>
             <div
-              class="ni-li-subtitle"
+              class="tm-li-subtitle"
             >
               
             </div>
           </div>
           <div
-            class="ni-li-icon"
+            class="tm-li-icon"
           >
             <i
               class="material-icons inactive"
@@ -77,33 +77,33 @@ exports[`NiModalHelp has the expected html structure 1`] = `
         </div>
       </a>
       <a
-        class="ni-li ni-li-link proposal-enter proposal-enter-active"
+        class="tm-li tm-li-link proposal-enter proposal-enter-active"
         href="https://github.com/cosmos/voyager/issues"
       >
         <div
-          class="ni-li-container"
+          class="tm-li-container"
         >
           <div
-            class="ni-li-thumb"
+            class="tm-li-thumb"
           >
             <!---->
           </div>
           <div
-            class="ni-li-label"
+            class="tm-li-label"
           >
             <div
-              class="ni-li-title"
+              class="tm-li-title"
             >
               GitHub Issues
             </div>
             <div
-              class="ni-li-subtitle"
+              class="tm-li-subtitle"
             >
               
             </div>
           </div>
           <div
-            class="ni-li-icon"
+            class="tm-li-icon"
           >
             <i
               class="material-icons inactive"
@@ -120,10 +120,10 @@ exports[`NiModalHelp has the expected html structure 1`] = `
       </a>
     </main>
     <footer
-      class="ni-modal-footer"
+      class="tm-modal-footer"
     />
   </div>
 </div>
 `;
 
-exports[`NiModalHelp should hide 1`] = `<!---->`;
+exports[`TmModalHelp should hide 1`] = `<!---->`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalLCDApproval.spec.js.snap
similarity index 59%
rename from test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalLCDApproval.spec.js.snap
index 6beb9f6027..882e9fb4fd 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalLCDApproval.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalLCDApproval.spec.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalLCDApproval has the expected html structure 1`] = `
+exports[`TmModalLCDApproval has the expected html structure 1`] = `
 <div
-  class="ni-modal-lcd-approval__wrapper"
+  class="tm-modal-lcd-approval__wrapper"
 >
   <div
-    class="ni-modal-lcd-approval"
+    class="tm-modal-lcd-approval"
   >
     <div
-      class="ni-modal-lcd-approval__icon"
+      class="tm-modal-lcd-approval__icon"
     >
       <i
         class="material-icons"
@@ -17,60 +17,60 @@ exports[`NiModalLCDApproval has the expected html structure 1`] = `
       </i>
     </div>
     <div
-      class="ni-modal-lcd-approval__title"
+      class="tm-modal-lcd-approval__title"
     >
       Node approval required
     </div>
     <div
-      class="ni-modal-lcd-approval__body"
+      class="tm-modal-lcd-approval__body"
     >
       Voyager needs to approve the node you're trying to connect to. Please compare the hash below against the hash from a trusted source. If you are 100% sure that the hashes match, click approve to proceed.
       <textarea
-        class="ni-field"
+        class="tm-field"
         disabled="disabled"
         id="node-hash"
       />
     </div>
     <div
-      class="ni-modal-lcd-approval__footer"
+      class="tm-modal-lcd-approval__footer"
     >
       <button
-        class="ni-btn"
-        id="ni-modal-lcd-approval__btn-approve"
+        class="tm-btn"
+        id="tm-modal-lcd-approval__btn-approve"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg ni-btn--primary"
+          class="tm-btn__container tm-btn--size-lg tm-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             check
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Approve Node
           </span>
         </span>
       </button>
       <button
-        class="ni-btn"
-        id="ni-modal-lcd-approval__btn-disapprove"
+        class="tm-btn"
+        id="tm-modal-lcd-approval__btn-disapprove"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg"
+          class="tm-btn__container tm-btn--size-lg"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             skip_next
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Switch Node
           </span>
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalNoNodes.spec.js.snap
similarity index 75%
rename from test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalNoNodes.spec.js.snap
index b39572c0e9..f5458c0a44 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalNoNodes.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalNoNodes.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalNoNodes has the expected html structure 1`] = `
+exports[`TmModalNoNodes has the expected html structure 1`] = `
 <div
   class="ni-modal-error__wrapper"
 >
@@ -30,42 +30,42 @@ exports[`NiModalNoNodes has the expected html structure 1`] = `
       class="ni-modal-error__footer"
     >
       <button
-        class="ni-btn"
+        class="tm-btn"
         id="ni-modal-error__btn-retry"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg ni-btn--primary"
+          class="tm-btn__container tm-btn--size-lg tm-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             autorenew
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Retry Connection
           </span>
         </span>
       </button>
       <button
-        class="ni-btn"
+        class="tm-btn"
         id="ni-modal-error__btn-mock"
       >
         <span
-          class="ni-btn__container ni-btn--size-lg"
+          class="tm-btn__container tm-btn--size-lg"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             pageview
           </i>
           <!---->
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Try Demo
           </span>
diff --git a/test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap
new file mode 100644
index 0000000000..0da9ab40d6
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmModalReceive.spec.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmModalReceive has the expected html structure 1`] = `<!---->`;
+
+exports[`TmModalReceive should hide 1`] = `<!---->`;
diff --git a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmModalSearch.spec.js.snap
similarity index 59%
rename from test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmModalSearch.spec.js.snap
index dd1d5184f7..a34389db46 100644
--- a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmModalSearch.spec.js.snap
@@ -1,38 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiModalSearch has the expected html structure 1`] = `
+exports[`TmModalSearch has the expected html structure 1`] = `
 <div
-  class="ni-modal-search"
+  class="tm-modal-search"
 >
   <div
-    class="ni-modal-search-container"
+    class="tm-modal-search-container"
   >
     <div
-      class="ni-form-group"
+      class="tm-form-group"
     >
       <!---->
       <!---->
       <div
-        class="ni-form-group__field"
+        class="tm-form-group__field"
       >
         <div
-          class="ni-modal-search-field"
+          class="tm-modal-search-field"
         >
           <input
-            class="mousetrap ni-field"
+            class="mousetrap tm-field"
             id="search-input"
             placeholder="Search..."
             type="text"
           />
           <button
-            class="ni-btn"
+            class="tm-btn"
           >
             <span
-              class="ni-btn__container"
+              class="tm-btn__container"
             >
               <i
                 aria-hidden="true"
-                class="ni-btn__icon material-icons"
+                class="tm-btn__icon material-icons"
               >
                 close
               </i>
diff --git a/test/unit/specs/components/common/__snapshots__/TmOnboarding.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmOnboarding.spec.js.snap
new file mode 100644
index 0000000000..6dafdbc4f4
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmOnboarding.spec.js.snap
@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmOnboarding has the expected html structure 0 1`] = `
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
+               Welcome to Voyager
+            </div>
+</div>
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
+      This is a quick tour of the primary features of Cosmos Voyager.
+   </div>
+<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node tm-bar-discrete__node--active\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+</div>
+</div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
+</div>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
+</div>
+</div>
+</div>
+</div>"
+`;
+
+exports[`TmOnboarding has the expected html structure 1 1`] = `
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
+               Welcome to Voyager
+            </div>
+</div>
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
+      You can send and receive Cosmos tokens from anyone around the world.
+   </div>
+<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+</div>
+</div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
+</div>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
+</div>
+</div>
+</div>
+</div>"
+`;
+
+exports[`TmOnboarding has the expected html structure 2 1`] = `
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
+               Welcome to Voyager
+            </div>
+</div>
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
+      You can stake your Atoms to Cosmos Validators to earn even more Atoms.
+   </div>
+<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+</div>
+</div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
+</div>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
+</div>
+</div>
+</div>
+</div>"
+`;
+
+exports[`TmOnboarding has the expected html structure 3 1`] = `
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
+               Welcome to Voyager
+            </div>
+</div>
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
+      Through governance, you can vote on the future of the Cosmos Network.
+   </div>
+<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+</div>
+</div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
+</div>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
+</div>
+</div>
+</div>
+</div>"
+`;
+
+exports[`TmOnboarding has the expected html structure 4 1`] = `
+"<div id=\\"onboarding\\" class=\\"tm-session-wrapper\\">
+   <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"tm-session-backdrop\\">
+   <div class=\\"tm-session\\">
+      <div class=\\"tm-session-container\\">
+         <div class=\\"tm-session-header\\">
+            <div class=\\"tm-session-title\\">
+               Welcome to Voyager
+            </div>
+</div>
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-session-label\\">
+      Start using Voyager to explore the Cosmos Network!
+   </div>
+<img src=\\"function () {        return fn.apply(this, arguments);      }\\">
+<div class=\\"tm-bar-discrete\\">
+   <div class=\\"tm-bar-discrete__container\\">
+      <div class=\\"tm-bar-discrete__edge\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+<div class=\\"tm-bar-discrete__node\\"></div>
+</div>
+</div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
+</div>
+<div class=\\"tm-session-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">close</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Skip</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i>
+   <!---->
+   <span class=\\"tm-btn__value\\">Next</span></span></button>
+</div>
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmSessionAccountDelete.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionAccountDelete.spec.js.snap
new file mode 100644
index 0000000000..ad1bcf9252
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionAccountDelete.spec.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmSessionAccountDelete has the expected html structure 1`] = `
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
+         <!---->
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
+               <a><i class=\\"material-icons\\">arrow_back</i></a>
+               <div class=\\"tm-session-title\\">
+                  Remove Account
+               </div>
+      <a><i class=\\"material-icons\\">help_outline</i></a>
+   </div>
+      <div class=\\"tm-session-main\\">
+         <div class=\\"tm-form-group\\">
+            <!---->
+            <label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label>
+            <div class=\\"tm-form-group__field\\">
+               <input type=\\"password\\" placeholder=\\"Enter your password\\" class=\\"tm-field\\" id=\\"sign-in-password\\">
+               <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+                  Password is required
+               </div>
+                  <!---->
+   </div>
+</div>
+      <div class=\\"tm-form-group\\">
+         <!---->
+         <label for=\\"sign-up-warning\\" class=\\"tm-form-group__label\\"></label>
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
+                  <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
+               </div>
+      <label for=\\"sign-up-warning\\" class=\\"tm-field-checkbox-label\\">I understand that Cosmos cannot recover deleted accounts without the passphrase.</label>
+   </div>
+      <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+         Deletion confirmation is required
+      </div>
+</div>
+</div>
+</div>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">exit_to_app</i>
+         <!---->
+         <span class=\\"tm-btn__value\\">Sign Out and Remove Account</span></span></button>
+      </div>
+</main>
+      <!---->
+</div>
+</form>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
new file mode 100644
index 0000000000..4ff5f10128
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NISessionHardware has the expected html structure 1`] = `
+"<div class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
+         <a><i class=\\"material-icons\\">arrow_back</i></a>
+         <div class=\\"tm-session-title\\">
+            Sign In
+         </div>
+<a><i class=\\"material-icons\\">help_outline</i></a>
+</div>
+<div class=\\"tm-session-main\\">
+   <div class=\\"tm-hardware-state\\">
+      <i class=\\"tm-hardware-state__icon material-icons\\">usb</i>
+      <div class=\\"tm-hardware-state__label\\">
+         Please plug in your Ledger Wallet
+      </div>
+</div>
+<!---->
+<!---->
+</div>
+<div class=\\"tm-session-footer\\"></div>
+</div>
+</div>"
+`;
+
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 1`] = `"<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-hardware-state\\"><i class=\\"tm-hardware-state__icon material-icons\\">usb</i><div class=\\"tm-hardware-state__label\\">Please plug in your Ledger Wallet</div></div><!----><!----></div><div class=\\"tm-session-footer\\"></div></div></div>"`;
+
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 2`] = `"<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><!----><div class=\\"tm-hardware-state\\"><i class=\\"tm-hardware-state__icon material-icons fa-spin\\">rotate_right</i><div class=\\"tm-hardware-state__label\\">Detecting your Ledger Wallet</div></div><!----></div><div class=\\"tm-session-footer\\"></div></div></div>"`;
+
+exports[`NISessionHardware should show a state indicator for different states of the hardware connection 3`] = `"<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><!----><!----><div class=\\"tm-hardware-state\\"><i class=\\"tm-hardware-state__icon material-icons\\">check_circle</i><div class=\\"tm-hardware-state__label\\">Ledger Wallet successfully loaded</div></div></div><div class=\\"tm-session-footer\\"></div></div></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmSessionImport.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionImport.spec.js.snap
new file mode 100644
index 0000000000..bf1c2249ee
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionImport.spec.js.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmSessionImport has the expected html structure 1`] = `
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
+         <!---->
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
+               <a><i class=\\"material-icons\\">arrow_back</i></a>
+               <div class=\\"tm-session-title\\">
+                  Import with Seed
+               </div>
+      <a><i class=\\"material-icons\\">help_outline</i></a>
+   </div>
+      <div class=\\"tm-session-main ps\\">
+         <div class=\\"tm-form-group\\">
+            <!---->
+            <label for=\\"import-name\\" class=\\"tm-form-group__label\\">Account Name</label>
+            <div class=\\"tm-form-group__field\\">
+               <input type=\\"text\\" placeholder=\\"Must have at least 5 characters\\" class=\\"tm-field\\" id=\\"import-name\\">
+               <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+                  Name is required
+               </div>
+                  <!---->
+   </div>
+</div>
+      <div class=\\"tm-form-group\\">
+         <!---->
+         <label for=\\"import-password\\" class=\\"tm-form-group__label\\">Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"tm-field\\" id=\\"import-password\\">
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+               Password is required
+            </div>
+               <!---->
+   </div>
+</div>
+      <div class=\\"tm-form-group\\">
+         <!---->
+         <label for=\\"import-password-confirmation\\" class=\\"tm-form-group__label\\">Confirm Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"tm-field\\" id=\\"import-password-confirmation\\">
+            <!---->
+         </div>
+</div>
+      <div class=\\"tm-form-group\\">
+         <!---->
+         <label for=\\"import-seed\\" class=\\"tm-form-group__label\\">Seed Phrase</label>
+         <div class=\\"tm-form-group__field\\">
+            <textarea class=\\"tm-field-seed tm-field\\" id=\\"import-seed\\" placeholder=\\"Must be exactly 16 words\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+               Seed is required
+            </div>
+</div>
+</div>
+      <div class=\\"tm-form-group\\">
+         <!---->
+         <!---->
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
+                  <input id=\\"error-collection\\" type=\\"checkbox\\">
+               </div>
+      <label for=\\"error-collection\\" class=\\"tm-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
+   </div>
+</div>
+</div>
+      <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+         <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+      <div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+         <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
+</div>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i>
+         <!---->
+         <span class=\\"tm-btn__value\\">Next</span></span></button>
+      </div>
+</main>
+      <!---->
+</div>
+</form>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmSessionLoading.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionLoading.spec.js.snap
new file mode 100644
index 0000000000..9b48c9e4e8
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionLoading.spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmSessionLoading has the expected html structure 1`] = `
+"<div class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
+         <div class=\\"tm-session-title\\">
+            Loading…
+         </div>
+</div>
+<div class=\\"tm-session-main\\">
+   &nbsp;
+</div>
+<div class=\\"tm-session-footer\\">
+   &nbsp;
+</div>
+</div>
+</div>"
+`;
diff --git a/test/unit/specs/components/common/__snapshots__/TmSessionSignIn.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionSignIn.spec.js.snap
new file mode 100644
index 0000000000..566aca30b8
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionSignIn.spec.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TmSessionSignIn has the expected html structure 1`] = `
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
+         <!---->
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
+               <a><i class=\\"material-icons\\">arrow_back</i></a>
+               <div class=\\"tm-session-title\\">
+                  Sign In
+               </div>
+      <a><i class=\\"material-icons\\">help_outline</i></a>
+   </div>
+      <div class=\\"tm-session-main\\">
+         <div class=\\"tm-form-group\\">
+            <!---->
+            <label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label>
+            <div class=\\"tm-form-group__field\\">
+               <div class=\\"ni-select\\" id=\\"sign-in-name\\">
+                  <select class=\\"tm-field tm-field-select\\">
+                  <option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">
+                     Select account…
+                  </option>
+                  </select>
+                  <div class=\\"tm-field-select-addon\\">
+                     <i class=\\"material-icons\\">arrow_drop_down</i>
+                  </div>
+</div>
+      <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+         Name is required
+      </div>
+</div>
+</div>
+      <div class=\\"tm-form-group\\">
+         <!---->
+         <label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\">
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
+               Password is required
+            </div>
+               <!---->
+               <!---->
+   </div>
+</div>
+</div>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i>
+         <!---->
+         <span class=\\"tm-btn__value\\">Next</span></span></button>
+      </div>
+</main>
+      <!---->
+</div>
+</form>
+</div>"
+`;
+
+exports[`TmSessionSignIn should set the default password in mocked mode 1`] = `"<div class=\\"tm-session\\"><form class=\\"tm-session-container tm-form\\"><div class=\\"tm-form-container\\"><!----><main class=\\"tm-form-main\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a><div class=\\"tm-session-title\\">Sign In</div><a><i class=\\"material-icons\\">help_outline</i></a></div><div class=\\"tm-session-main\\"><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-name\\" class=\\"tm-form-group__label\\">Select Account</label><div class=\\"tm-form-group__field\\"><div class=\\"ni-select\\" id=\\"sign-in-name\\"><select class=\\"tm-field tm-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select account…</option></select><div class=\\"tm-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"tm-form-msg sm tm-form-msg--error\\">Name is required</div></div></div><div class=\\"tm-form-group\\"><!----><label for=\\"sign-in-password\\" class=\\"tm-form-group__label\\">Password</label><div class=\\"tm-form-group__field\\"><input type=\\"password\\" class=\\"tm-field\\" id=\\"sign-in-password\\"><div class=\\"tm-form-msg sm tm-form-msg--error\\">Password is required</div><!----><div class=\\"tm-form-msg sm tm-form-msg--desc\\">default password is 1234567890</div></div></div></div><div class=\\"tm-session-footer\\"><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i><!----><span class=\\"tm-btn__value\\">Next</span></span></button></div></main><!----></div></form></div>"`;
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionSignUp.spec.js.snap
similarity index 52%
rename from test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionSignUp.spec.js.snap
index da15e149eb..c2c7f8952c 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionSignUp.spec.js.snap
@@ -1,83 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NISessionSignUp has the expected html structure 1`] = `
-"<div class=\\"ni-session\\">
-   <form class=\\"ni-session-container ni-form\\">
-      <div class=\\"ni-form-container\\">
+"<div class=\\"tm-session\\">
+   <form class=\\"tm-session-container tm-form\\">
+      <div class=\\"tm-form-container\\">
          <!---->
-         <main class=\\"ni-form-main\\">
-            <div class=\\"ni-session-header\\">
+         <main class=\\"tm-form-main\\">
+            <div class=\\"tm-session-header\\">
                <a><i class=\\"material-icons\\">arrow_back</i></a>
-               <div class=\\"ni-session-title\\">
+               <div class=\\"tm-session-title\\">
                   Create Account
                </div>
       <a><i class=\\"material-icons\\">help_outline</i></a>
    </div>
-      <div class=\\"ni-session-main ps\\">
-         <div class=\\"ni-form-group\\">
+      <div class=\\"tm-session-main ps\\">
+         <div class=\\"tm-form-group\\">
             <!---->
-            <label for=\\"sign-up-name\\" class=\\"ni-form-group__label\\">Account Name</label>
-            <div class=\\"ni-form-group__field\\">
-               <input type=\\"text\\" placeholder=\\"Must be at least 5 characters\\" class=\\"ni-field\\" id=\\"sign-up-name\\">
-               <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+            <label for=\\"sign-up-name\\" class=\\"tm-form-group__label\\">Account Name</label>
+            <div class=\\"tm-form-group__field\\">
+               <input type=\\"text\\" placeholder=\\"Must be at least 5 characters\\" class=\\"tm-field\\" id=\\"sign-up-name\\">
+               <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                   Name is required
                </div>
                   <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-password\\" class=\\"ni-form-group__label\\">Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"ni-field\\" id=\\"sign-up-password\\">
-            <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+         <label for=\\"sign-up-password\\" class=\\"tm-form-group__label\\">Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Must be at least 10 characters\\" class=\\"tm-field\\" id=\\"sign-up-password\\">
+            <div class=\\"tm-form-msg sm tm-form-msg--error\\">
                Password is required
             </div>
                <!---->
    </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-password-confirm\\" class=\\"ni-form-group__label\\">Confirm Password</label>
-         <div class=\\"ni-form-group__field\\">
-            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"ni-field\\" id=\\"sign-up-password-confirm\\">
+         <label for=\\"sign-up-password-confirm\\" class=\\"tm-form-group__label\\">Confirm Password</label>
+         <div class=\\"tm-form-group__field\\">
+            <input type=\\"password\\" placeholder=\\"Enter password again\\" class=\\"tm-field\\" id=\\"sign-up-password-confirm\\">
             <!---->
          </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
-         <label for=\\"sign-up-seed\\" class=\\"ni-form-group__label\\">Seed Phrase</label>
-         <div class=\\"ni-form-group__field\\">
-            <textarea class=\\"ni-field-seed ni-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
-            <div class=\\"sm ni-form-msg sm ni-form-msg--desc\\">
+         <label for=\\"sign-up-seed\\" class=\\"tm-form-group__label\\">Seed Phrase</label>
+         <div class=\\"tm-form-group__field\\">
+            <textarea class=\\"tm-field-seed tm-field\\" id=\\"sign-up-seed\\" disabled=\\"disabled\\" style=\\"overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;\\"></textarea>
+            <div class=\\"sm tm-form-msg sm tm-form-msg--desc\\">
                Please back up the seed phrase for this account. This seed phrase cannot be recovered.
             </div>
 </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
          <!---->
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
                   <input id=\\"sign-up-warning\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"sign-up-warning\\" class=\\"ni-field-checkbox-label\\">I have securely written down my seed. I understand that lost seeds cannot be recovered.</label>
+      <label for=\\"sign-up-warning\\" class=\\"tm-field-checkbox-label\\">I have securely written down my seed. I understand that lost seeds cannot be recovered.</label>
    </div>
-      <div class=\\"ni-form-msg sm ni-form-msg--error\\">
+      <div class=\\"tm-form-msg sm tm-form-msg--error\\">
          Recovery confirmation is required
       </div>
 </div>
 </div>
-      <div class=\\"ni-form-group\\">
+      <div class=\\"tm-form-group\\">
          <!---->
          <!---->
-         <div class=\\"ni-form-group__field\\">
-            <div class=\\"ni-field-checkbox\\">
-               <div class=\\"ni-field-checkbox-input\\">
+         <div class=\\"tm-form-group__field\\">
+            <div class=\\"tm-field-checkbox\\">
+               <div class=\\"tm-field-checkbox-input\\">
                   <input id=\\"error-collection\\" type=\\"checkbox\\">
                </div>
-      <label for=\\"error-collection\\" class=\\"ni-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
+      <label for=\\"error-collection\\" class=\\"tm-field-checkbox-label\\">I'd like to opt in for remote error tracking to help improve Voyager.</label>
    </div>
 </div>
 </div>
@@ -88,10 +88,10 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
          <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-      <div class=\\"ni-session-footer\\">
-         <button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
+      <div class=\\"tm-session-footer\\">
+         <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">arrow_forward</i>
          <!---->
-         <span class=\\"ni-btn__value\\">Next</span></span></button>
+         <span class=\\"tm-btn__value\\">Next</span></span></button>
       </div>
 </main>
       <!---->
diff --git a/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap
similarity index 65%
rename from test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap
index 5efebe50ff..6c8ba76f5e 100644
--- a/test/unit/specs/components/common/__snapshots__/NISessionWelcome.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap
@@ -1,64 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NISessionWelcome with accounts has the expected html structure 1`] = `
-"<div id=\\"session-welcome\\" class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
+"<div id=\\"session-welcome\\" class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
          <a>&nbsp;</a>
-         <div class=\\"ni-session-title\\">
+         <div class=\\"tm-session-title\\">
             Sign in to Cosmos Voyager
          </div>
 <a><i class=\\"material-icons\\">help_outline</i></a>
 </div>
-<div class=\\"ni-session-main ps\\">
-   <div class=\\"ni-li-session\\">
-      <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-session-main ps\\">
+   <div class=\\"tm-li-session\\">
+      <div class=\\"tm-li-session-icon\\">
          <i class=\\"material-icons\\">lock</i>
       </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Sign in with password
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    If you have an account, choose this option.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">person_add</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Create new account
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Generate a brand new seed and create a new account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">settings_backup_restore</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Import with seed
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Use an existing seed phrase to create an account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">usb</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Sign in with hardware
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    If you have a Ledger Wallet, choose this option.
 </div>
 </div>
@@ -78,58 +78,58 @@ exports[`NISessionWelcome with accounts has the expected html structure 1`] = `
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\"></div>
+<div class=\\"tm-session-footer\\"></div>
 </div>
 </div>"
 `;
 
 exports[`NISessionWelcome without accounts has the expected html structure 1`] = `
-"<div id=\\"session-welcome\\" class=\\"ni-session\\">
-   <div class=\\"ni-session-container\\">
-      <div class=\\"ni-session-header\\">
+"<div id=\\"session-welcome\\" class=\\"tm-session\\">
+   <div class=\\"tm-session-container\\">
+      <div class=\\"tm-session-header\\">
          <a>&nbsp;</a>
-         <div class=\\"ni-session-title\\">
+         <div class=\\"tm-session-title\\">
             Sign in to Cosmos Voyager
          </div>
 <a><i class=\\"material-icons\\">help_outline</i></a>
 </div>
-<div class=\\"ni-session-main ps\\">
+<div class=\\"tm-session-main ps\\">
    <!---->
-   <div class=\\"ni-li-session\\">
-      <div class=\\"ni-li-session-icon\\">
+   <div class=\\"tm-li-session\\">
+      <div class=\\"tm-li-session-icon\\">
          <i class=\\"material-icons\\">person_add</i>
       </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Create new account
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Generate a brand new seed and create a new account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">settings_backup_restore</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Import with seed
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    Use an existing seed phrase to create an account.
 </div>
 </div>
 </div>
-<div class=\\"ni-li-session\\">
-   <div class=\\"ni-li-session-icon\\">
+<div class=\\"tm-li-session\\">
+   <div class=\\"tm-li-session-icon\\">
       <i class=\\"material-icons\\">usb</i>
    </div>
-<div class=\\"ni-li-session-text\\">
-   <div class=\\"ni-li-session-title\\">
+<div class=\\"tm-li-session-text\\">
+   <div class=\\"tm-li-session-title\\">
       Sign in with hardware
    </div>
-<div class=\\"ni-li-session-subtitle\\">
+<div class=\\"tm-li-session-subtitle\\">
    If you have a Ledger Wallet, choose this option.
 </div>
 </div>
@@ -149,7 +149,7 @@ exports[`NISessionWelcome without accounts has the expected html structure 1`] =
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </div>
-<div class=\\"ni-session-footer\\"></div>
+<div class=\\"tm-session-footer\\"></div>
 </div>
 </div>"
 `;
diff --git a/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
new file mode 100644
index 0000000000..6e108f66bb
--- /dev/null
+++ b/test/unit/specs/components/common/__snapshots__/TmToolBar.spec.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[
+  `TmToolBar has the expected html structure 1`
+] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`
diff --git a/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmUserPane.spec.js.snap
similarity index 62%
rename from test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
rename to test/unit/specs/components/common/__snapshots__/TmUserPane.spec.js.snap
index 5029ead2a5..67d50e46e2 100644
--- a/test/unit/specs/components/common/__snapshots__/NiUserPane.spec.js.snap
+++ b/test/unit/specs/components/common/__snapshots__/TmUserPane.spec.js.snap
@@ -1,34 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NiUserPane has the expected html structure 1`] = `
+exports[`TmUserPane has the expected html structure 1`] = `
 <a
-  class="ni-li ni-li-link ni-li-user proposal-enter proposal-enter-active"
+  class="tm-li tm-li-link tm-li-user proposal-enter proposal-enter-active"
   href="#/preferences"
 >
   <div
-    class="ni-li-container"
+    class="tm-li-container"
   >
     <div
-      class="ni-li-thumb"
+      class="tm-li-thumb"
     >
       <!---->
     </div>
     <div
-      class="ni-li-label"
+      class="tm-li-label"
     >
       <div
-        class="ni-li-title"
+        class="tm-li-title"
       >
         Preferences
       </div>
       <div
-        class="ni-li-subtitle"
+        class="tm-li-subtitle"
       >
         default
       </div>
     </div>
     <div
-      class="ni-li-icon"
+      class="tm-li-icon"
     >
       <i
         class="material-icons inactive"
diff --git a/test/unit/specs/components/monitor/PageBlock.spec.js b/test/unit/specs/components/monitor/PageBlock.spec.js
index 16eb9b5be2..15b5eb60b0 100644
--- a/test/unit/specs/components/monitor/PageBlock.spec.js
+++ b/test/unit/specs/components/monitor/PageBlock.spec.js
@@ -40,7 +40,9 @@ describe("PageBlock", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/monitor/PageBlocks.spec.js b/test/unit/specs/components/monitor/PageBlocks.spec.js
index aaef4497d5..fae0eb7998 100644
--- a/test/unit/specs/components/monitor/PageBlocks.spec.js
+++ b/test/unit/specs/components/monitor/PageBlocks.spec.js
@@ -46,7 +46,13 @@ describe("PageBlocks", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
index a967acfe59..e4d7b15b2d 100644
--- a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
+++ b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
@@ -1,50 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageBlock 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 class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Block #10
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div>
          <div>
-            <div class=\\"ni-tool-bar\\">
-               <div class=\\"ni-tool-bar-container\\">
+            <div class=\\"tm-tool-bar\\">
+               <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
-                     <a href=\\"#/blocks/9\\" class=\\"\\"><i class=\\"material-icons\\">chevron_left</i></a><a href=\\"#/blocks/11\\" class=\\"\\"><i class=\\"material-icons\\">chevron_right</i></a>
+                     <a href=\\"#/blocks/9\\" class=\\"\\"><i class=\\"material-icons\\">chevron_left</i></a><a href=\\"#/blocks/11\\" class=\\"\\"><i class=\\"material-icons\\">chevron_right</i></a><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
                   </div>
-      <a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-   </div>
+</div>
 </div>
 </div>
 </div>
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main ps\\">
-   <section class=\\"ni-part\\">
-      <div class=\\"ni-part-container\\">
+<main class=\\"tm-page-main ps\\">
+   <section class=\\"tm-part\\">
+      <div class=\\"tm-part-container\\">
          <!---->
-         <main class=\\"ni-part-main\\">
-            <div class=\\"ni-li\\">
-               <div class=\\"ni-li-container\\">
-                  <div class=\\"ni-li-thumb\\">
+         <main class=\\"tm-part-main\\">
+            <div class=\\"tm-li\\">
+               <div class=\\"tm-li-container\\">
+                  <div class=\\"tm-li-thumb\\">
                      <!---->
                   </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Hash
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             hash
          </div>
 </div>
@@ -53,181 +52,181 @@ exports[`PageBlock has the expected html structure 1`] = `
 </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\\">
+<section class=\\"tm-part\\">
+   <div class=\\"tm-part-container\\">
+      <header class=\\"tm-part-header\\">
+         <div class=\\"tm-part-header-container\\">
+            <div class=\\"tm-part-title h5\\">
                Header
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Chain ID
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Time
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          January 1st 1970 — 02:00:01
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Transactions
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          0
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Last Commit Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Validators Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             App Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </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\\">
+<section class=\\"tm-part\\">
+   <div class=\\"tm-part-container\\">
+      <header class=\\"tm-part-header\\">
+         <div class=\\"tm-part-header-container\\">
+            <div class=\\"tm-part-title h5\\">
                Last Block
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Hash
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          last-hash
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Parts Total
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          0
       </div>
 </div>
 </div>
 </div>
-      <div class=\\"ni-li\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <div class=\\"tm-li\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Parts Hash
          </div>
-      <div class=\\"ni-li-dd\\"></div>
+      <div class=\\"tm-li-dd\\"></div>
 </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\\">
+<section class=\\"tm-part\\">
+   <div class=\\"tm-part-container\\">
+      <header class=\\"tm-part-header\\">
+         <div class=\\"tm-part-header-container\\">
+            <div class=\\"tm-part-title h5\\">
                Transactions
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-data-msg\\">
-         <div class=\\"ni-data-msg__icon\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-data-msg\\">
+         <div class=\\"tm-data-msg__icon\\">
             <i class=\\"material-icons\\">info_outline</i>
          </div>
-      <div class=\\"ni-data-msg__text\\">
-         <div class=\\"ni-data-msg__title\\">
+      <div class=\\"tm-data-msg__text\\">
+         <div class=\\"tm-data-msg__title\\">
             <h4>
                Empty Block
             </h4>
 </div>
-      <div class=\\"ni-data-msg__subtitle\\">
+      <div class=\\"tm-data-msg__subtitle\\">
          <h5>
             There were no transactions in this block.
          </h5>
@@ -247,28 +246,28 @@ exports[`PageBlock has the expected html structure 1`] = `
 </div>"
 `;
 
-exports[`PageBlock should disable the next block button if last block 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\\"><h2>Block #10</h2></div><div class=\\"ni-page-header-subtitle\\"><h3></h3></div></div><menu class=\\"ni-page-header-menu\\"><div></div></menu></div></header><main class=\\"ni-page-main\\"><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></main></div>"`;
+exports[`PageBlock should disable the next block button if last block 1`] = `"<div class=\\"tm-page\\"><header class=\\"tm-page-header\\"><div class=\\"tm-page-header-container\\"><div class=\\"tm-page-header-text\\"><div class=\\"tm-page-header-title\\"><h2>Block #10</h2></div><div class=\\"tm-page-header-subtitle\\"><h3></h3></div></div><menu class=\\"tm-page-header-menu\\"><div></div></menu></div></header><main class=\\"tm-page-main\\"><div class=\\"tm-data-msg\\"><div class=\\"tm-data-msg__icon\\"><i class=\\"material-icons fa-spin\\">rotate_right</i></div><div class=\\"tm-data-msg__text\\"><div class=\\"tm-data-msg__title\\"><div>Data is loading…</div></div><div class=\\"tm-data-msg__subtitle\\"><div>Please wait a moment.</div></div></div></div></main></div>"`;
 
 exports[`PageBlock should show a loading state if loading 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 class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Loading...
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div></div>
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main\\">
+<main class=\\"tm-page-main\\">
    <data-loading></data-loading>
 </main>
 </div>"
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
index 8a29775641..59b44622a1 100644
--- a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
+++ b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
@@ -1,93 +1,92 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageBlocks 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 class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Block Explorer
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div>
          <div>
-            <div class=\\"ni-tool-bar\\">
-               <div class=\\"ni-tool-bar-container\\">
+            <div class=\\"tm-tool-bar\\">
+               <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
-                     <a><i class=\\"material-icons\\">search</i></a>
+                     <a><i class=\\"material-icons\\">search</i></a><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
                   </div>
-      <a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-   </div>
+</div>
 </div>
 </div>
 </div>
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main ps\\">
+<main class=\\"tm-page-main ps\\">
    <modal-search type=\\"blocks\\"></modal-search>
       <!---->
       <!---->
-   <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\\">
+   <section class=\\"tm-part\\">
+      <div class=\\"tm-part-container\\">
+         <header class=\\"tm-part-header\\">
+            <div class=\\"tm-part-header-container\\">
+               <div class=\\"tm-part-title h5\\">
                   Current Block
                </div>
-         <menu class=\\"ni-part-menu\\"></menu>
+         <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-      <main class=\\"ni-part-main\\">
-         <a href=\\"#/blocks/12345\\" class=\\"ni-li ni-li-link\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+      <main class=\\"tm-part-main\\">
+         <a href=\\"#/blocks/12345\\" class=\\"tm-li tm-li-link\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Height
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             12,345
          </div>
 </div>
-         <div class=\\"ni-li-icon\\">
+         <div class=\\"tm-li-icon\\">
             <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
          </div>
 </div>
          </a>
-         <div class=\\"ni-li\\">
-            <div class=\\"ni-li-container\\">
-               <div class=\\"ni-li-thumb\\">
+         <div class=\\"tm-li\\">
+            <div class=\\"tm-li-container\\">
+               <div class=\\"tm-li-thumb\\">
                   <!---->
                </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Time
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             January 1st 1970 — 02:00:01
          </div>
 </div>
 </div>
 </div>
-         <div class=\\"ni-li\\">
-            <div class=\\"ni-li-container\\">
-               <div class=\\"ni-li-thumb\\">
+         <div class=\\"tm-li\\">
+            <div class=\\"tm-li-container\\">
+               <div class=\\"tm-li-thumb\\">
                   <!---->
                </div>
-         <div class=\\"ni-li-dl\\">
-            <div class=\\"ni-li-dt\\">
+         <div class=\\"tm-li-dl\\">
+            <div class=\\"tm-li-dt\\">
                Block Hash
             </div>
-         <div class=\\"ni-li-dd\\">
+         <div class=\\"tm-li-dd\\">
             123
          </div>
 </div>
@@ -96,46 +95,46 @@ exports[`PageBlocks has the expected html structure 1`] = `
 </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\\">
+<section class=\\"tm-part\\">
+   <div class=\\"tm-part-container\\">
+      <header class=\\"tm-part-header\\">
+         <div class=\\"tm-part-header-container\\">
+            <div class=\\"tm-part-title h5\\">
                Latest Blocks
             </div>
-      <menu class=\\"ni-part-menu\\"></menu>
+      <menu class=\\"tm-part-menu\\"></menu>
 </div>
 </header>
-   <main class=\\"ni-part-main\\">
-      <div class=\\"ni-li column-header\\">
-         <div class=\\"ni-li-container\\">
-            <div class=\\"ni-li-thumb\\">
+   <main class=\\"tm-part-main\\">
+      <div class=\\"tm-li column-header\\">
+         <div class=\\"tm-li-container\\">
+            <div class=\\"tm-li-thumb\\">
                <!---->
             </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             Block Height
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          # of Transactions
       </div>
 </div>
 </div>
 </div>
-      <a href=\\"#/blocks/10\\" class=\\"ni-li ni-li-link\\">
-      <div class=\\"ni-li-container\\">
-         <div class=\\"ni-li-thumb\\">
+      <a href=\\"#/blocks/10\\" class=\\"tm-li tm-li-link\\">
+      <div class=\\"tm-li-container\\">
+         <div class=\\"tm-li-thumb\\">
             <!---->
          </div>
-      <div class=\\"ni-li-dl\\">
-         <div class=\\"ni-li-dt\\">
+      <div class=\\"tm-li-dl\\">
+         <div class=\\"tm-li-dt\\">
             10
          </div>
-      <div class=\\"ni-li-dd\\">
+      <div class=\\"tm-li-dd\\">
          0
       </div>
 </div>
-      <div class=\\"ni-li-icon\\">
+      <div class=\\"tm-li-icon\\">
          <i class=\\"material-icons inactive\\">chevron_right</i><i class=\\"material-icons active\\">my_location</i>
       </div>
 </div>
diff --git a/test/unit/specs/components/staking/PageBond.spec.js b/test/unit/specs/components/staking/PageBond.spec.js
index b796cb3443..4881b18c7e 100644
--- a/test/unit/specs/components/staking/PageBond.spec.js
+++ b/test/unit/specs/components/staking/PageBond.spec.js
@@ -45,7 +45,13 @@ describe("PageBond", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
@@ -119,7 +125,7 @@ describe("PageBond", () => {
   })
 
   it("returns to the candidates if desired", () => {
-    wrapper.find(".ni-tool-bar a").trigger("click")
+    wrapper.find(".tm-tool-bar a").trigger("click")
     expect(router.currentRoute.fullPath).toBe("/staking")
   })
 
@@ -171,7 +177,7 @@ describe("PageBond", () => {
     })
     wrapper.findAll("#btn-bond").trigger("click")
     expect(store.dispatch.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("shows an appropriate amount of unbonded atoms", () => {
@@ -246,7 +252,7 @@ describe("PageBond", () => {
     })
     wrapper.findAll("#btn-bond").trigger("click")
     expect(store.dispatch.mock.calls[0]).toBeUndefined()
-    expect(wrapper.find(".ni-form-msg-error")).toBeDefined()
+    expect(wrapper.find(".tm-form-msg-error")).toBeDefined()
   })
 
   it("bonds atoms on submit", () => {
diff --git a/test/unit/specs/components/staking/PageDelegate.spec.js b/test/unit/specs/components/staking/PageDelegate.spec.js
index 801e241221..385329b649 100644
--- a/test/unit/specs/components/staking/PageDelegate.spec.js
+++ b/test/unit/specs/components/staking/PageDelegate.spec.js
@@ -30,7 +30,13 @@ describe("PageDelegate", () => {
     router.push("/staking/delegates/1a2b3c")
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/staking/PageStaking.spec.js b/test/unit/specs/components/staking/PageStaking.spec.js
index e6bfea76d4..a8487e3607 100644
--- a/test/unit/specs/components/staking/PageStaking.spec.js
+++ b/test/unit/specs/components/staking/PageStaking.spec.js
@@ -17,18 +17,24 @@ describe("PageStaking", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
   it("should show the search on click", () => {
-    wrapper.find(".ni-tool-bar i.search").trigger("click")
-    expect(wrapper.contains(".ni-modal-search")).toBe(true)
+    wrapper.find(".tm-tool-bar i.search").trigger("click")
+    expect(wrapper.contains(".tm-modal-search")).toBe(true)
   })
 
   it("should refresh candidates on click", () => {
     wrapper
-      .findAll(".ni-tool-bar i")
+      .findAll(".tm-tool-bar i")
       .at(1)
       .trigger("click")
     expect(store.dispatch).toHaveBeenCalledWith("updateDelegates")
diff --git a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
index 31ac1b54fd..4f0a922c45 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageBond has the expected html structure 1`] = `
 <div
-  class="ni-page page-bond"
+  class="tm-page page-bond"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Bond STEAK
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,46 +29,47 @@ exports[`PageBond has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -77,42 +78,42 @@ exports[`PageBond has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Start bonding your 101 STEAK
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <form
-            class="ni-form"
+            class="tm-form"
           >
             <div
-              class="ni-form-container"
+              class="tm-form-container"
             >
               <!---->
               <main
-                class="ni-form-main"
+                class="tm-form-main"
               >
                 <div
                   class="bond-group bond-group--neutral"
@@ -158,7 +159,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-percent__input ni-field"
+                        class="bond-percent__input tm-field"
                         disabled="disabled"
                         placeholder="0%"
                       />
@@ -172,7 +173,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-value__input ni-field"
+                        class="bond-value__input tm-field"
                         disabled="disabled"
                         id="new-unbonded-atoms"
                         placeholder="Atoms"
@@ -226,7 +227,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-percent__input ni-field"
+                        class="bond-percent__input tm-field"
                         disabled="disabled"
                         placeholder="0%"
                       />
@@ -240,7 +241,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-value__input ni-field"
+                        class="bond-value__input tm-field"
                         max="101"
                         min="0"
                         placeholder="Atoms"
@@ -298,7 +299,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-percent__input ni-field"
+                        class="bond-percent__input tm-field"
                         disabled="disabled"
                         placeholder="0%"
                       />
@@ -312,7 +313,7 @@ exports[`PageBond has the expected html structure 1`] = `
                         <!---->
                       </label>
                       <input
-                        class="bond-value__input ni-field"
+                        class="bond-value__input tm-field"
                         max="101"
                         min="0"
                         placeholder="Atoms"
@@ -327,18 +328,18 @@ exports[`PageBond has the expected html structure 1`] = `
                 </div>
                 <!---->
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <!---->
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-checkbox"
+                      class="tm-field-checkbox"
                     >
                       <div
-                        class="ni-field-checkbox-input"
+                        class="tm-field-checkbox-input"
                       >
                         <input
                           id="bond-confirm"
@@ -346,14 +347,14 @@ exports[`PageBond has the expected html structure 1`] = `
                         />
                       </div>
                       <label
-                        class="ni-field-checkbox-label"
+                        class="tm-field-checkbox-label"
                         for="bond-confirm"
                       >
                         Yes, update my bonds. I understand unbonding will take 30 days.
                       </label>
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Bonding Confirmation is required
                     </div>
@@ -361,37 +362,37 @@ exports[`PageBond has the expected html structure 1`] = `
                 </div>
               </main>
               <footer
-                class="ni-form-footer"
+                class="tm-form-footer"
               >
                 <div>
                   <button
-                    class="ni-btn"
+                    class="tm-btn"
                     id="btn-reset"
                     type="button"
                   >
                     <span
-                      class="ni-btn__container ni-btn--danger"
+                      class="tm-btn__container tm-btn--danger"
                     >
                       <!---->
                       <!---->
                       <span
-                        class="ni-btn__value"
+                        class="tm-btn__value"
                       >
                         Reset
                       </span>
                     </span>
                   </button>
                   <button
-                    class="ni-btn"
+                    class="tm-btn"
                     id="btn-bond"
                   >
                     <span
-                      class="ni-btn__container ni-btn--primary"
+                      class="tm-btn__container tm-btn--primary"
                     >
                       <!---->
                       <!---->
                       <span
-                        class="ni-btn__value"
+                        class="tm-btn__value"
                       >
                         Submit
                       </span>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
index 9c3945ca50..b7d3aeca26 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageDelegate has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Validator Profile
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,46 +29,47 @@ exports[`PageDelegate has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -77,54 +78,54 @@ exports[`PageDelegate has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Validator Info
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Moniker
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   JB
                 </div>
@@ -132,26 +133,26 @@ exports[`PageDelegate has the expected html structure 1`] = `
             </div>
           </div>
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Website
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   https://the.zone
                 </div>
@@ -159,26 +160,26 @@ exports[`PageDelegate has the expected html structure 1`] = `
             </div>
           </div>
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Address
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   helloaddr
                 </div>
@@ -186,26 +187,26 @@ exports[`PageDelegate has the expected html structure 1`] = `
             </div>
           </div>
           <div
-            class="ni-li"
+            class="tm-li"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Public Key
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123pubkeyforme
                 </div>
@@ -216,29 +217,29 @@ exports[`PageDelegate has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Validator Description
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
             class="text-block"
@@ -251,51 +252,51 @@ exports[`PageDelegate has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Validator Details
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li proposal-enter proposal-enter-active"
+            class="tm-li proposal-enter proposal-enter-active"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   Total Vote Power
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   1000
                 </div>
diff --git a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
index e3942ca5f6..3a925ff0b5 100644
--- a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
+++ b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -1,36 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageStaking 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 class=\\"tm-page\\">
+   <header class=\\"tm-page-header\\">
+      <div class=\\"tm-page-header-container\\">
+         <div class=\\"tm-page-header-text\\">
+            <div class=\\"tm-page-header-title\\">
                <h2>
                   Staking
                </h2>
 </div>
-   <div class=\\"ni-page-header-subtitle\\">
+   <div class=\\"tm-page-header-subtitle\\">
       <h3></h3>
 </div>
 </div>
-   <menu class=\\"ni-page-header-menu\\">
+   <menu class=\\"tm-page-header-menu\\">
       <div>
          <div>
-            <div class=\\"ni-tool-bar\\">
-               <div class=\\"ni-tool-bar-container\\">
+            <div class=\\"tm-tool-bar\\">
+               <div class=\\"tm-tool-bar-container\\">
                   <div class=\\"main\\">
-                     <a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a>
+                     <a><i class=\\"material-icons\\">refresh</i></a><a><i class=\\"search material-icons\\">search</i></a><a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
                   </div>
-      <a class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a class=\\"sign-out\\"><i class=\\"material-icons\\">exit_to_app</i></a>
-   </div>
+</div>
 </div>
 </div>
 </div>
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main ps\\">
+<main class=\\"tm-page-main ps\\">
    <!---->
    <div class=\\"delegates-container\\">
       <div class=\\"panel-sort\\">
@@ -139,7 +138,7 @@ exports[`PageStaking has the expected html structure 1`] = `
       <div class=\\"label\\">
          <strong>0</strong> delegates selected
       </div>
-   <a href=\\"#/staking/bond\\" class=\\"ni-btn\\" disabled=\\"disabled\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i><span class=\\"ni-btn__value\\">Next</span></span></a>
+   <a href=\\"#/staking/bond\\" class=\\"tm-btn\\" disabled=\\"disabled\\"><span class=\\"tm-btn__container tm-btn__icon-right tm-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"tm-btn__icon material-icons\\">chevron_right</i><span class=\\"tm-btn__value\\">Next</span></span></a>
 </div>
    <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
       <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
@@ -153,26 +152,26 @@ exports[`PageStaking has the expected html structure 1`] = `
 
 exports[`PageStaking should filter the delegates 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Staking
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -180,15 +179,15 @@ exports[`PageStaking should filter the delegates 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -207,34 +206,34 @@ exports[`PageStaking should filter the delegates 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -243,40 +242,40 @@ exports[`PageStaking should filter the delegates 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <div
-      class="ni-modal-search"
+      class="tm-modal-search"
     >
       <div
-        class="ni-modal-search-container"
+        class="tm-modal-search-container"
       >
         <div
-          class="ni-form-group"
+          class="tm-form-group"
         >
           <!---->
           <!---->
           <div
-            class="ni-form-group__field"
+            class="tm-form-group__field"
           >
             <div
-              class="ni-modal-search-field"
+              class="tm-modal-search-field"
             >
               <input
-                class="mousetrap ni-field"
+                class="mousetrap tm-field"
                 id="search-input"
                 placeholder="Search..."
                 type="text"
               />
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container"
+                  class="tm-btn__container"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     close
                   </i>
@@ -427,21 +426,21 @@ exports[`PageStaking should filter the delegates 1`] = `
          delegates selected
       </div>
       <a
-        class="ni-btn"
+        class="tm-btn"
         disabled="disabled"
         href="#/staking/bond"
       >
         <span
-          class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+          class="tm-btn__container tm-btn__icon-right tm-btn--primary"
         >
           <i
             aria-hidden="true"
-            class="ni-btn__icon material-icons"
+            class="tm-btn__icon material-icons"
           >
             chevron_right
           </i>
           <span
-            class="ni-btn__value"
+            class="tm-btn__value"
           >
             Next
           </span>
diff --git a/test/unit/specs/components/wallet/LiTransaction.spec.js b/test/unit/specs/components/wallet/LiTransaction.spec.js
index 681dc7ba48..dab79636b8 100644
--- a/test/unit/specs/components/wallet/LiTransaction.spec.js
+++ b/test/unit/specs/components/wallet/LiTransaction.spec.js
@@ -19,7 +19,7 @@ describe("LiTransaction", () => {
   })
 
   it("should show incoming transactions", () => {
-    expect(wrapper.find(".ni-li-tx").classes()).toContain("ni-li-tx-received")
+    expect(wrapper.find(".tm-li-tx").classes()).toContain("tm-li-tx-received")
   })
 
   it("should show outgoing transactions", () => {
@@ -27,7 +27,7 @@ describe("LiTransaction", () => {
       transaction: transactions[1],
       address: "tb1d4u5zerywfjhxuc9nudvw"
     })
-    expect(wrapper.find(".ni-li-tx").classes()).toContain("ni-li-tx-sent")
+    expect(wrapper.find(".tm-li-tx").classes()).toContain("tm-li-tx-sent")
   })
 
   it("should show all coins of the transaction", () => {
diff --git a/test/unit/specs/components/wallet/PageSend.spec.js b/test/unit/specs/components/wallet/PageSend.spec.js
index 132ef50073..6191fcb148 100644
--- a/test/unit/specs/components/wallet/PageSend.spec.js
+++ b/test/unit/specs/components/wallet/PageSend.spec.js
@@ -46,11 +46,18 @@ describe("PageSend", () => {
     store.commit("setNonce", 1)
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it("should populate the select options with denoms", () => {
+    wrapper.update()
     expect(
       wrapper
         .findAll("option")
@@ -72,6 +79,8 @@ describe("PageSend", () => {
   })
 
   it("should populate the select options with networks", () => {
+    wrapper.update()
+
     expect(
       wrapper
         .findAll("option")
@@ -102,6 +111,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
   it("should show bech32 error when address length is too short", async () => {
@@ -115,6 +125,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
@@ -129,6 +140,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
   it("should show bech32 error when alphanumeric is wrong", async () => {
@@ -142,6 +154,7 @@ describe("PageSend", () => {
       }
     })
     await wrapper.vm.onSubmit()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
diff --git a/test/unit/specs/components/wallet/PageTransactions.spec.js b/test/unit/specs/components/wallet/PageTransactions.spec.js
index 718ac940a5..76d737302e 100644
--- a/test/unit/specs/components/wallet/PageTransactions.spec.js
+++ b/test/unit/specs/components/wallet/PageTransactions.spec.js
@@ -24,13 +24,19 @@ describe("PageTransactions", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it("should show the search on click", () => {
-    wrapper.find(".ni-tool-bar i").trigger("click")
-    expect(wrapper.contains(".ni-modal-search")).toBe(true)
+    wrapper.find(".tm-tool-bar i").trigger("click")
+    expect(wrapper.contains(".tm-modal-search")).toBe(true)
   })
 
   it("should show transactions", () => {
diff --git a/test/unit/specs/components/wallet/PageWallet.spec.js b/test/unit/specs/components/wallet/PageWallet.spec.js
index b1de6a5513..540793cc24 100644
--- a/test/unit/specs/components/wallet/PageWallet.spec.js
+++ b/test/unit/specs/components/wallet/PageWallet.spec.js
@@ -31,7 +31,13 @@ describe("PageWallet", () => {
     wrapper.update()
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
@@ -43,9 +49,14 @@ describe("PageWallet", () => {
     ])
   })
 
-  it("should filter the balances", () => {
+  it("should filter the balances", async () => {
     store.commit("setSearchVisible", ["balances", true])
     store.commit("setSearchQuery", ["balances", "atom"])
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
     wrapper.update()
     expect(wrapper.vm.filteredBalances.map(x => x.denom)).toEqual(["ATOM"])
     expect(wrapper.vm.$el).toMatchSnapshot()
@@ -65,7 +76,7 @@ describe("PageWallet", () => {
   })
 
   it("should list the denoms that are available", () => {
-    expect(wrapper.findAll(".ni-li-balance").length).toBe(2)
+    expect(wrapper.findAll(".tm-li-balance").length).toBe(2)
   })
 
   it("should show the n/a message if there are no denoms", () => {
@@ -86,7 +97,7 @@ describe("PageWallet", () => {
   it("has a title for available balances", () => {
     expect(
       wrapper
-        .find("#part-available-balances .ni-part-title")
+        .find("#part-available-balances .tm-part-title")
         .text()
         .trim()
     ).toBe("Available Balances")
@@ -95,16 +106,22 @@ describe("PageWallet", () => {
   it("has a title for staked balances", () => {
     expect(
       wrapper
-        .find("#part-staked-balances .ni-part-title")
+        .find("#part-staked-balances .tm-part-title")
         .text()
         .trim()
     ).toBe("Staked Balances")
   })
 
-  it("has shows the correct number of staked tokens", () => {
+  it("has shows the correct number of staked tokens", async () => {
+    // after importing the @tendermint/ui components from modules
+    // the perfect scroll plugin needs a $nextTick and a wrapper.update
+    // to work properly in the tests (snapshots weren't matching)
+    // this has occured across multiple tests
+    await wrapper.vm.$nextTick()
+    wrapper.update()
     expect(
       wrapper
-        .find("#part-staked-balances .ni-li-dd")
+        .find("#part-staked-balances .tm-li-dd")
         .text()
         .trim()
     ).toBe("123")
diff --git a/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap
index 765643567c..486f1e0003 100644
--- a/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/LiTransaction.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`LiTransaction has the expected html structure 1`] = `
 <div
-  class="ni-li-tx ni-li-tx-received"
+  class="tm-li-tx tm-li-tx-received"
 >
   <div
     class="tx-icon"
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
index 8bed3d9c2b..24d8521147 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageSend has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,46 +29,47 @@ exports[`PageSend has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -77,62 +78,62 @@ exports[`PageSend has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -154,7 +155,7 @@ exports[`PageSend has the expected html structure 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -170,49 +171,49 @@ exports[`PageSend has the expected html structure 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -234,7 +235,7 @@ exports[`PageSend has the expected html structure 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -247,60 +248,60 @@ exports[`PageSend has the expected html structure 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is required
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount is required
                     </div>
@@ -312,20 +313,20 @@ exports[`PageSend has the expected html structure 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -361,26 +362,26 @@ exports[`PageSend has the expected html structure 1`] = `
 
 exports[`PageSend should show address required error 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -388,46 +389,47 @@ exports[`PageSend should show address required error 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -436,62 +438,62 @@ exports[`PageSend should show address required error 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -503,7 +505,7 @@ exports[`PageSend should show address required error 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -519,49 +521,49 @@ exports[`PageSend should show address required error 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -583,7 +585,7 @@ exports[`PageSend should show address required error 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -596,53 +598,53 @@ exports[`PageSend should show address required error 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is required
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -650,7 +652,7 @@ exports[`PageSend should show address required error 1`] = `
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -661,20 +663,20 @@ exports[`PageSend should show address required error 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -690,26 +692,26 @@ exports[`PageSend should show address required error 1`] = `
 
 exports[`PageSend should show bech32 error when address length is too long 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -717,46 +719,47 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -765,62 +768,62 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -832,7 +835,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -848,49 +851,49 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -912,7 +915,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -925,53 +928,53 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is invalid (No separator character for asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf)
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -979,7 +982,7 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -990,20 +993,20 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -1019,26 +1022,26 @@ exports[`PageSend should show bech32 error when address length is too long 1`] =
 
 exports[`PageSend should show bech32 error when address length is too short 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -1046,46 +1049,47 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -1094,62 +1098,62 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1161,7 +1165,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1177,49 +1181,49 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1241,7 +1245,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1254,53 +1258,53 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is invalid (asdf too short)
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -1308,7 +1312,7 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -1319,20 +1323,20 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -1348,26 +1352,26 @@ exports[`PageSend should show bech32 error when address length is too short 1`]
 
 exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -1375,46 +1379,47 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
                 >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -1423,62 +1428,62 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1490,7 +1495,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1506,49 +1511,49 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1570,7 +1575,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1583,53 +1588,53 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is invalid (No separator character for !@#$!@#$!@#$!@#$!@#$!@#$!@#$!@#$!@#$!@#$)
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group ni-form-group--error"
+                  class="tm-form-group tm-form-group--error"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
@@ -1637,7 +1642,7 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
                     </div>
                     <!---->
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount must be between 0 and 0
                     </div>
@@ -1648,20 +1653,20 @@ exports[`PageSend should show bech32 error when alphanumeric is wrong 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
@@ -1688,26 +1693,26 @@ Object {
 
 exports[`PageSend should work without providing a default denom 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Send
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -1715,46 +1720,47 @@ exports[`PageSend should work without providing a default denom 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
-                />
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
-                  >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
                 >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
+                  >
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -1763,62 +1769,62 @@ exports[`PageSend should work without providing a default denom 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <form
-      class="ni-form"
+      class="tm-form"
     >
       <div
-        class="ni-form-container"
+        class="tm-form-container"
       >
         <!---->
         <main
-          class="ni-form-main"
+          class="tm-form-main"
         >
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Denomination Options
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-denomination"
                   >
                     Denomination
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-denomination"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1830,7 +1836,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1840,7 +1846,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                       </div>
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Denomination is required
                     </div>
@@ -1850,49 +1856,49 @@ exports[`PageSend should work without providing a default denom 1`] = `
             </div>
           </section>
           <section
-            class="ni-part"
+            class="tm-part"
           >
             <div
-              class="ni-part-container"
+              class="tm-part-container"
             >
               <header
-                class="ni-part-header"
+                class="tm-part-header"
               >
                 <div
-                  class="ni-part-header-container"
+                  class="tm-part-header-container"
                 >
                   <div
-                    class="ni-part-title h5"
+                    class="tm-part-title h5"
                   >
                     Transaction Details
                   </div>
                   <menu
-                    class="ni-part-menu"
+                    class="tm-part-menu"
                   />
                 </div>
               </header>
               <main
-                class="ni-part-main"
+                class="tm-part-main"
               >
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-zone-id"
                   >
                     Zone ID
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
                       class="ni-select"
                       id="send-zone-id"
                     >
                       <select
-                        class="ni-field ni-field-select"
+                        class="tm-field tm-field-select"
                       >
                         <option
                           disabled="disabled"
@@ -1914,7 +1920,7 @@ exports[`PageSend should work without providing a default denom 1`] = `
                         </option>
                       </select>
                       <div
-                        class="ni-field-select-addon"
+                        class="tm-field-select-addon"
                       >
                         <i
                           class="material-icons"
@@ -1927,60 +1933,60 @@ exports[`PageSend should work without providing a default denom 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-address"
                   >
                     Send To
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-address"
                         placeholder="Address"
                         type="text"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Address is required
                     </div>
                   </div>
                 </div>
                 <div
-                  class="ni-form-group"
+                  class="tm-form-group"
                 >
                   <!---->
                   <label
-                    class="ni-form-group__label"
+                    class="tm-form-group__label"
                     for="send-amount"
                   >
                     Amount
                   </label>
                   <div
-                    class="ni-form-group__field"
+                    class="tm-form-group__field"
                   >
                     <div
-                      class="ni-field-group"
+                      class="tm-field-group"
                     >
                       <input
-                        class="ni-field"
+                        class="tm-field"
                         id="send-amount"
                         placeholder="Amount"
                         type="number"
                       />
                     </div>
                     <div
-                      class="ni-form-msg sm ni-form-msg--error"
+                      class="tm-form-msg sm tm-form-msg--error"
                     >
                       Amount is required
                     </div>
@@ -1992,20 +1998,20 @@ exports[`PageSend should work without providing a default denom 1`] = `
           </section>
         </main>
         <footer
-          class="ni-form-footer"
+          class="tm-form-footer"
         >
           <div>
             <div />
             <button
-              class="ni-btn"
+              class="tm-btn"
             >
               <span
-                class="ni-btn__container ni-btn--primary"
+                class="tm-btn__container tm-btn--primary"
               >
                 <!---->
                 <!---->
                 <span
-                  class="ni-btn__value"
+                  class="tm-btn__value"
                 >
                   Send Tokens
                 </span>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
index 226e602782..97833690fc 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageTransactions.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageTransactions has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Transactions
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageTransactions has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -49,34 +49,34 @@ exports[`PageTransactions has the expected html structure 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -85,7 +85,7 @@ exports[`PageTransactions has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <!---->
     <li-transaction
@@ -129,26 +129,26 @@ exports[`PageTransactions has the expected html structure 1`] = `
 
 exports[`PageTransactions should filter the transactions 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Transactions
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -156,15 +156,15 @@ exports[`PageTransactions should filter the transactions 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -176,34 +176,34 @@ exports[`PageTransactions should filter the transactions 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -212,40 +212,40 @@ exports[`PageTransactions should filter the transactions 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="tm-page-main"
   >
     <div
-      class="ni-modal-search"
+      class="tm-modal-search"
     >
       <div
-        class="ni-modal-search-container"
+        class="tm-modal-search-container"
       >
         <div
-          class="ni-form-group"
+          class="tm-form-group"
         >
           <!---->
           <!---->
           <div
-            class="ni-form-group__field"
+            class="tm-form-group__field"
           >
             <div
-              class="ni-modal-search-field"
+              class="tm-modal-search-field"
             >
               <input
-                class="mousetrap ni-field"
+                class="mousetrap tm-field"
                 id="search-input"
                 placeholder="Search..."
                 type="text"
               />
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container"
+                  class="tm-btn__container"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     close
                   </i>
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
index a747fcc005..94653ea25f 100644
--- a/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
+++ b/test/unit/specs/components/wallet/__snapshots__/PageWallet.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`PageWallet has the expected html structure 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Wallet
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -29,15 +29,15 @@ exports[`PageWallet has the expected html structure 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -56,34 +56,34 @@ exports[`PageWallet has the expected html structure 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -92,76 +92,76 @@ exports[`PageWallet has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <modal-search
       type="balances"
     />
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Your Address
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-receive proposal-enter proposal-enter-active"
+            class="tm-li tm-li-receive proposal-enter proposal-enter-active"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   tb1zgatc3tdauv2m0uf
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <button
-                class="ni-btn btn-receive"
+                class="tm-btn btn-receive"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     file_download
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Receive
                   </span>
@@ -173,73 +173,73 @@ exports[`PageWallet has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-available-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Available Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <!---->
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-enter proposal-enter-active"
+            class="tm-li tm-li-link tm-li-balance proposal-enter proposal-enter-active"
             href="#/wallet/send/FERMION"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   FERMION
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   456
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -248,46 +248,46 @@ exports[`PageWallet has the expected html structure 1`] = `
             </div>
           </a>
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-enter proposal-enter-active"
+            class="tm-li tm-li-link tm-li-balance proposal-enter proposal-enter-active"
             href="#/wallet/send/ATOM"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   ATOM
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -300,72 +300,72 @@ exports[`PageWallet has the expected html structure 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-staked-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Staked Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <a
-            class="ni-li ni-li-link"
+            class="tm-li tm-li-link"
             href="#/staking"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   STEAK
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Stake
                   </span>
@@ -402,26 +402,26 @@ exports[`PageWallet has the expected html structure 1`] = `
 
 exports[`PageWallet should filter the balances 1`] = `
 <div
-  class="ni-page"
+  class="tm-page"
 >
   <header
-    class="ni-page-header"
+    class="tm-page-header"
   >
     <div
-      class="ni-page-header-container"
+      class="tm-page-header-container"
     >
       <div
-        class="ni-page-header-text"
+        class="tm-page-header-text"
       >
         <div
-          class="ni-page-header-title"
+          class="tm-page-header-title"
         >
           <h2>
             Wallet
           </h2>
         </div>
         <div
-          class="ni-page-header-subtitle"
+          class="tm-page-header-subtitle"
         >
           <h3>
             
@@ -429,15 +429,15 @@ exports[`PageWallet should filter the balances 1`] = `
         </div>
       </div>
       <menu
-        class="ni-page-header-menu"
+        class="tm-page-header-menu"
       >
         <div>
           <div>
             <div
-              class="ni-tool-bar"
+              class="tm-tool-bar"
             >
               <div
-                class="ni-tool-bar-container"
+                class="tm-tool-bar-container"
               >
                 <div
                   class="main"
@@ -456,34 +456,34 @@ exports[`PageWallet should filter the balances 1`] = `
                       search
                     </i>
                   </a>
-                </div>
-                <a
-                  class="back"
-                >
-                  <i
-                    class="material-icons"
+                  <a
+                    class="back"
                   >
-                    arrow_back
-                  </i>
-                </a>
-                <a
-                  class="help"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      arrow_back
+                    </i>
+                  </a>
+                  <a
+                    class="help"
                   >
-                    help_outline
-                  </i>
-                </a>
-                <a
-                  class="sign-out"
-                >
-                  <i
-                    class="material-icons"
+                    <i
+                      class="material-icons"
+                    >
+                      help_outline
+                    </i>
+                  </a>
+                  <a
+                    class="sign-out"
                   >
-                    exit_to_app
-                  </i>
-                </a>
+                    <i
+                      class="material-icons"
+                    >
+                      exit_to_app
+                    </i>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -492,76 +492,76 @@ exports[`PageWallet should filter the balances 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="tm-page-main ps"
   >
     <modal-search
       type="balances"
     />
     <section
-      class="ni-part"
+      class="tm-part"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Your Address
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <div
-            class="ni-li ni-li-receive proposal-enter proposal-enter-active"
+            class="tm-li tm-li-receive proposal-enter proposal-enter-active"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-label"
+                class="tm-li-label"
               >
                 <div
-                  class="ni-li-title"
+                  class="tm-li-title"
                 >
                   tb1zgatc3tdauv2m0uf
                 </div>
                 <div
-                  class="ni-li-subtitle"
+                  class="tm-li-subtitle"
                 >
                   
                 </div>
               </div>
               <button
-                class="ni-btn btn-receive"
+                class="tm-btn btn-receive"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     file_download
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Receive
                   </span>
@@ -573,73 +573,73 @@ exports[`PageWallet should filter the balances 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-available-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Available Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <!---->
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-enter proposal-enter-active"
+            class="tm-li tm-li-link tm-li-balance proposal-enter proposal-enter-active"
             href="#/wallet/send/ATOM"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   ATOM
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -648,46 +648,46 @@ exports[`PageWallet should filter the balances 1`] = `
             </div>
           </a>
           <a
-            class="ni-li ni-li-link ni-li-balance proposal-leave proposal-leave-active"
+            class="tm-li tm-li-link tm-li-balance proposal-leave proposal-leave-active"
             href="#/wallet/send/FERMION"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   FERMION
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   456
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Send
                   </span>
@@ -699,72 +699,72 @@ exports[`PageWallet should filter the balances 1`] = `
       </div>
     </section>
     <section
-      class="ni-part"
+      class="tm-part"
       id="part-staked-balances"
     >
       <div
-        class="ni-part-container"
+        class="tm-part-container"
       >
         <header
-          class="ni-part-header"
+          class="tm-part-header"
         >
           <div
-            class="ni-part-header-container"
+            class="tm-part-header-container"
           >
             <div
-              class="ni-part-title h5"
+              class="tm-part-title h5"
             >
               Staked Balances
             </div>
             <menu
-              class="ni-part-menu"
+              class="tm-part-menu"
             />
           </div>
         </header>
         <main
-          class="ni-part-main"
+          class="tm-part-main"
         >
           <a
-            class="ni-li ni-li-link"
+            class="tm-li tm-li-link"
             href="#/staking"
           >
             <div
-              class="ni-li-container"
+              class="tm-li-container"
             >
               <div
-                class="ni-li-thumb"
+                class="tm-li-thumb"
               >
                 <!---->
               </div>
               <div
-                class="ni-li-dl"
+                class="tm-li-dl"
               >
                 <div
-                  class="ni-li-dt"
+                  class="tm-li-dt"
                 >
                   STEAK
                 </div>
                 <div
-                  class="ni-li-dd"
+                  class="tm-li-dd"
                 >
                   123
                 </div>
               </div>
               <button
-                class="ni-btn"
+                class="tm-btn"
               >
                 <span
-                  class="ni-btn__container ni-btn__icon-right ni-btn--primary"
+                  class="tm-btn__container tm-btn__icon-right tm-btn--primary"
                 >
                   <i
                     aria-hidden="true"
-                    class="ni-btn__icon material-icons"
+                    class="tm-btn__icon material-icons"
                   >
                     chevron_right
                   </i>
                   <!---->
                   <span
-                    class="ni-btn__value"
+                    class="tm-btn__value"
                   >
                     Stake
                   </span>
diff --git a/yarn.lock b/yarn.lock
index e7db2a4e38..7721033e95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,17 +12,18 @@
   dependencies:
     ramda "0.25.0"
 
-"@nylira/vue-button@4.4.3":
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/@nylira/vue-button/-/vue-button-4.4.3.tgz#068252a7e39beff9e35589bc1071a8a94379e212"
-
-"@nylira/vue-field@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@nylira/vue-field/-/vue-field-1.5.0.tgz#09a04f2555e63a92eb31dd40cad524ea8558a8f4"
+"@sindresorhus/is@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@nylira/vue-notifications@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@nylira/vue-notifications/-/vue-notifications-1.5.0.tgz#a6f027c4ecd8ca99ed7dbbcc04d5b67288d8d0f6"
+"@tendermint/ui@0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@tendermint/ui/-/ui-0.2.7.tgz#417a5946124f4c6df40dec38d0858c9e6684877c"
+  dependencies:
+    cookieconsent "^3.0.6"
+    moment "^2.22.2"
+    perfect-scrollbar "^1.4.0"
+    vue "^2.5.16"
 
 "@types/babel-types@*", "@types/babel-types@^7.0.0":
   version "7.0.1"
@@ -1922,6 +1923,10 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
+cookieconsent@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/cookieconsent/-/cookieconsent-3.0.6.tgz#147afa3e594e7b1a7826e49cb322aa0beee7b987"
+
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
@@ -5503,6 +5508,10 @@ moment@2.22.1, moment@^2.10.2:
   version "2.22.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
 
+moment@^2.22.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 mousetrap@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
@@ -6152,6 +6161,10 @@ perfect-scrollbar@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
 
+perfect-scrollbar@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
@@ -8721,7 +8734,7 @@ vue-template-es2015-compiler@1.6.0, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@2.5.16:
+vue@2.5.16, vue@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"