diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
index f74ef7a8ad..c61675799d 100644
--- a/app/src/renderer/App.vue
+++ b/app/src/renderer/App.vue
@@ -1,9 +1,7 @@
 <template lang="pug">
 #app
   app-header
-  #app-content
-    #app-main: router-view
-    app-footer
+  #app-content: router-view
   notifications(:notifications='notifications' theme='cosmos')
   modal-help
   session
@@ -11,7 +9,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import AppFooter from './components/common/AppFooter'
 import AppHeader from './components/common/AppHeader'
 import Notifications from '@nylira/vue-notifications'
 import ModalHelp from './components/common/NiModalHelp'
@@ -21,7 +18,6 @@ export default {
   name: 'app',
   components: {
     AppHeader,
-    AppFooter,
     ModalHelp,
     Notifications,
     Session
diff --git a/app/src/renderer/components/common/AppFooter.vue b/app/src/renderer/components/common/AppFooter.vue
index 6795ded934..25b6e1ee9f 100644
--- a/app/src/renderer/components/common/AppFooter.vue
+++ b/app/src/renderer/components/common/AppFooter.vue
@@ -26,12 +26,6 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.app-footer
-  position fixed
-  bottom 0
-  right 0
-  width 100vw
-
 .app-footer-container
   border-top px solid bc
   height 3rem + px
@@ -41,7 +35,6 @@ export default {
   background app-bg
 
   color dim
-  margin-left width-side
 
   .afi
     display flex
diff --git a/app/src/renderer/components/common/AppHeader.vue b/app/src/renderer/components/common/AppHeader.vue
index 8d0406b45e..7e2d6e18d9 100644
--- a/app/src/renderer/components/common/AppHeader.vue
+++ b/app/src/renderer/components/common/AppHeader.vue
@@ -102,40 +102,4 @@ export default {
 
         img
           height 1rem
-
-@media screen and (min-width: 1024px)
-  #app
-    padding-top 0
-
-  #app-header
-    width width-side
-    border-right px solid bc
-    position initial
-    height 100vh
-    display flex
-    position fixed
-    top 0
-    left 0
-
-    > .container
-      flex 1
-      display flex
-      flex-flow column nowrap
-
-    .header-item-logo
-      border-bottom px solid bc
-      padding 2rem 1rem .75rem
-      line-height: normal
-      img
-        height 1.25rem
-
-  #app-content
-    min-height 100vh
-    margin-left width-side
-
-    display flex
-    flex-flow column nowrap
-
-  #app-main
-    flex 1
 </style>
diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
index bea41a16ae..76fc75cf15 100644
--- a/app/src/renderer/components/common/AppMenu.vue
+++ b/app/src/renderer/components/common/AppMenu.vue
@@ -17,6 +17,7 @@ menu.app-menu
 </template>
 
 <script>
+import PerfectScrollbar from 'perfect-scrollbar'
 import { mapGetters } from 'vuex'
 import Btn from '@nylira/vue-button'
 import noScroll from 'no-scroll'
@@ -44,6 +45,10 @@ export default {
       this.$store.commit('setActiveMenu', '')
       noScroll.off()
     }
+  },
+  mounted () {
+    // eslint-disable-next-line no-unused-vars
+    const ps = new PerfectScrollbar('.app-menu-main')
   }
 }
 </script>
@@ -61,7 +66,7 @@ export default {
 
   .app-menu-main
     flex 1
-    overflow-y auto
+    position relative // for perfect-scrollbar
 
   .ni-user
     border-top 1px solid bc
diff --git a/app/src/renderer/components/common/NiListItem.vue b/app/src/renderer/components/common/NiListItem.vue
index 1ada60eec0..fabce23c1b 100644
--- a/app/src/renderer/components/common/NiListItem.vue
+++ b/app/src/renderer/components/common/NiListItem.vue
@@ -93,7 +93,6 @@ export default {
   display block
   border-bottom 2px solid bc-dim
   height 3rem
-  max-width width-main
   position relative
 
   &:last-child
diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue
index f025db52fd..e3d9d59fa7 100644
--- a/app/src/renderer/components/common/NiPage.vue
+++ b/app/src/renderer/components/common/NiPage.vue
@@ -5,18 +5,31 @@
     div(slot='subtitle') {{ subtitle }}
     div(slot="menu"): slot(name="menu")
   main.ni-page-main: slot
-  page-footer
+  app-footer
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import PerfectScrollbar from 'perfect-scrollbar'
 import PageHeader from 'common/NiPageHeader'
-import PageFooter from 'common/NiPageFooter'
+import AppFooter from 'common/AppFooter'
 export default {
   name: 'ni-page',
   props: ['title', 'subtitle', 'icon'],
   components: {
     PageHeader,
-    PageFooter
+    AppFooter
+  },
+  computed: {
+    ...mapGetters(['config'])
+  },
+  mounted () {
+    let ps
+    if (this.config.desktop) {
+      ps = new PerfectScrollbar('.ni-page-main')
+    } else {
+      ps.destroy()
+    }
   }
 }
 </script>
@@ -25,8 +38,13 @@ export default {
 @require '~variables'
 
 .ni-page
-  max-width aw
-  margin 0 auto
+  flex 1
+  display flex
+  flex-flow column nowrap
+
+.ni-page-main
+  flex 1
+  position relative
 
 .ni-page-title
   color bright
diff --git a/app/src/renderer/components/common/NiPageHeader.vue b/app/src/renderer/components/common/NiPageHeader.vue
index c71847ab68..c9b83f828a 100644
--- a/app/src/renderer/components/common/NiPageHeader.vue
+++ b/app/src/renderer/components/common/NiPageHeader.vue
@@ -21,7 +21,7 @@ export default {
 @require '~variables'
 
 .ni-page-header
-  -webkit-app-region: drag;
+  -webkit-app-region drag
 
 .ni-page-header-title
   font-size xl
diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue
index 7564f3711f..6753206d70 100644
--- a/app/src/renderer/components/common/NiToolBar.vue
+++ b/app/src/renderer/components/common/NiToolBar.vue
@@ -110,6 +110,9 @@ export default {
     height 3rem + px
     border-top px solid bc
 
+  .ni-page
+    padding-bottom 3rem
+
 @media screen and (min-width: 568px)
   .ni-tool-bar-container
     .main
diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
index bdc986f720..8d3d30b3b7 100644
--- a/app/src/renderer/styles/app.styl
+++ b/app/src/renderer/styles/app.styl
@@ -40,25 +40,46 @@ a
 .desktop-only
   display none
 
-@media screen and (min-width: 1024px)
- agu .desktop-only
-    display block
-
 #app
   df()
   color txt
   padding-top 3rem
-  min-height 100vh
-  display flex
-  flex-flow column nowrap
+  height 100vh
+  width 100vw
 
-#app-content
-  flex 1
   display flex
   flex-flow column nowrap
 
-#app-main
-  flex 1
-
 .ni-field
   border-radius 2px!important
+
+@media screen and (min-width: 1024px)
+  #app
+    padding-top 0
+    flex-flow row nowrap
+
+  #app-header, #app-content
+    display flex
+
+  #app-header
+    flex 0 0 width-side
+    border-right px solid bc
+    display flex
+
+    > .container
+      flex 1
+      display flex
+      flex-flow column nowrap
+
+    .header-item-logo
+      border-bottom px solid bc
+      padding 2rem 1rem .75rem
+      line-height: normal
+      img
+        height 1.25rem
+
+  #app-content
+    flex 1
+
+ .desktop-only
+    display block
diff --git a/app/src/renderer/styles/vendor/perfect-scrollbar.styl b/app/src/renderer/styles/vendor/perfect-scrollbar.styl
new file mode 100644
index 0000000000..8afadace22
--- /dev/null
+++ b/app/src/renderer/styles/vendor/perfect-scrollbar.styl
@@ -0,0 +1,80 @@
+.ps
+  overflow hidden !important
+  overflow-anchor none
+  -ms-overflow-style none
+  touch-action auto
+  -ms-touch-action auto
+
+.ps__rail-x
+  display none
+  opacity 0
+  transition background-color .2s linear, opacity .2s linear
+  -webkit-transition background-color .2s linear, opacity .2s linear
+  height 15px
+  bottom 0px
+  position absolute
+
+.ps__rail-y
+  display none
+  opacity 0
+  transition background-color .2s linear, opacity .2s linear
+  -webkit-transition background-color .2s linear, opacity .2s linear
+  width 15px
+  right 0
+  position absolute
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y
+  display block
+  background-color transparent
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y
+  opacity 0.6
+
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus
+  background-color #eee
+  opacity 0.9
+
+.ps__thumb-x
+  background-color input-bc
+  border-radius 6px
+  transition background-color .2s linear, height .2s ease-in-out
+  -webkit-transition background-color .2s linear, height .2s ease-in-out
+  height 6px
+  bottom 2px
+  position absolute
+
+.ps__thumb-y
+  background-color input-bc
+  border-radius 6px
+  transition background-color .2s linear, width .2s ease-in-out
+  -webkit-transition background-color .2s linear, width .2s ease-in-out
+  width 6px
+  right 2px
+  position absolute
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x
+  background-color #999
+  height 11px
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y
+  background-color #999
+  width 11px
+
+@supports (-ms-overflow-style: none)
+  .ps
+    overflow auto !important
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+  .ps
+    overflow auto !important
diff --git a/package.json b/package.json
index 7612a8ec8c..f7b4e7892b 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "mousetrap": "^1.6.1",
     "nib": "^1.1.2",
     "no-scroll": "^2.1.0",
+    "perfect-scrollbar": "^1.3.0",
     "proxyquire": "^1.8.0",
     "request-interval": "^2.0.0",
     "shortid": "^2.2.8",
diff --git a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
index 255c9ebffe..a44b125675 100644
--- a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">N/A</div><div class=\\"ni-li-dd\\">None Available</div></div></div></div></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">N/A</div><div class=\\"ni-li-dd\\">None Available</div></div></div></div></main></div></section></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;
 
-exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;
diff --git a/test/unit/specs/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/__snapshots__/PageBond.spec.js.snap
index 4135ddf2cd..ad21657d88 100644
--- a/test/unit/specs/__snapshots__/PageBond.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageBond.spec.js.snap
@@ -54,8 +54,12 @@ unbonded atoms. Start by bonding some of your atoms to these delegates.
 </div>
 </form>
 </main>
-<footer class=\\"ni-page-footer\\">
-   <div class=\\"container\\"></div>
+<footer class=\\"app-footer\\">
+   <div class=\\"app-footer-container\\">
+      <div class=\\"afi\\">
+         <i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span>
+      </div>
+</div>
 </footer>
 </div>"
 `;
diff --git a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
index c06c4bccec..3f66d64f1d 100644
--- a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
@@ -306,11 +306,24 @@ exports[`PageDelegates has the expected html structure 1`] = `
     </div>
   </main>
   <footer
-    class="ni-page-footer"
+    class="app-footer"
   >
     <div
-      class="container"
-    />
+      class="app-footer-container"
+    >
+      <div
+        class="afi"
+      >
+        <i
+          class="material-icons fa-spin"
+        >
+          rotate_right
+        </i>
+        <span>
+          Connecting…
+        </span>
+      </div>
+    </div>
   </footer>
 </div>
 `;
@@ -648,11 +661,24 @@ exports[`PageDelegates should filter the delegates 1`] = `
     </div>
   </main>
   <footer
-    class="ni-page-footer"
+    class="app-footer"
   >
     <div
-      class="container"
-    />
+      class="app-footer-container"
+    >
+      <div
+        class="afi"
+      >
+        <i
+          class="material-icons fa-spin"
+        >
+          rotate_right
+        </i>
+        <span>
+          Connecting…
+        </span>
+      </div>
+    </div>
   </footer>
 </div>
 `;
diff --git a/test/unit/specs/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/__snapshots__/PageSend.spec.js.snap
index a538e04ac5..8ac21830c3 100644
--- a/test/unit/specs/__snapshots__/PageSend.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageSend.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageSend has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Send</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><form class=\\"ni-form\\"><div class=\\"ni-form-container\\"><!----><main class=\\"ni-form-main\\"><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Options</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-denomination\\" class=\\"ni-form-group__label\\">Denomination</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-select\\" id=\\"send-denomination\\"><select class=\\"ni-field ni-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select token...</option><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><option value=\\"ATOM\\">ATOM</option><option value=\\"FERMION\\">FERMION</option></select><div class=\\"ni-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"ni-form-msg ni-form-msg-error\\">Denomination is required</div></div></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Transaction Details</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-address\\" class=\\"ni-form-group__label\\">Send To</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-field-group\\"><input type=\\"text\\" placeholder=\\"Address\\" class=\\"ni-field\\" id=\\"send-address\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Address is required</div><!----><!----></div></div><div class=\\"ni-form-group\\"><label for=\\"send-amount\\" class=\\"ni-form-group__label\\">Amount</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-field-group\\"><input type=\\"number\\" placeholder=\\"Amount\\" class=\\"ni-field\\" id=\\"send-amount\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Amount is required</div><!----></div></div></main></div></section></main><footer class=\\"ni-form-footer\\"><div><div></div><button class=\\"ni-btn\\"><span class=\\"ni-btn-container\\"><!----><span class=\\"ni-btn-value\\">Send Tokens</span></span></button></div></footer></div></form></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageSend has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Send</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><form class=\\"ni-form\\"><div class=\\"ni-form-container\\"><!----><main class=\\"ni-form-main\\"><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Options</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-denomination\\" class=\\"ni-form-group__label\\">Denomination</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-select\\" id=\\"send-denomination\\"><select class=\\"ni-field ni-field-select\\"><option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">Select token...</option><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><option value=\\"ATOM\\">ATOM</option><option value=\\"FERMION\\">FERMION</option></select><div class=\\"ni-field-select-addon\\"><i class=\\"material-icons\\">arrow_drop_down</i></div></div><div class=\\"ni-form-msg ni-form-msg-error\\">Denomination is required</div></div></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Transaction Details</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-form-group\\"><label for=\\"send-address\\" class=\\"ni-form-group__label\\">Send To</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-field-group\\"><input type=\\"text\\" placeholder=\\"Address\\" class=\\"ni-field\\" id=\\"send-address\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Address is required</div><!----><!----></div></div><div class=\\"ni-form-group\\"><label for=\\"send-amount\\" class=\\"ni-form-group__label\\">Amount</label><div class=\\"ni-form-group__field\\"><div class=\\"ni-field-group\\"><input type=\\"number\\" placeholder=\\"Amount\\" class=\\"ni-field\\" id=\\"send-amount\\"></div><div class=\\"ni-form-msg ni-form-msg-error\\">Amount is required</div><!----></div></div></main></div></section></main><footer class=\\"ni-form-footer\\"><div><div></div><button class=\\"ni-btn\\"><span class=\\"ni-btn-container\\"><!----><span class=\\"ni-btn-value\\">Send Tokens</span></span></button></div></footer></div></form></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;
diff --git a/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap
index 56ddd986fb..4954fb8d6e 100644
--- a/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap
+++ b/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap
@@ -168,11 +168,24 @@ exports[`PageTransactions has the expected html structure 1`] = `
     <!---->
   </main>
   <footer
-    class="ni-page-footer"
+    class="app-footer"
   >
     <div
-      class="container"
-    />
+      class="app-footer-container"
+    >
+      <div
+        class="afi"
+      >
+        <i
+          class="material-icons fa-spin"
+        >
+          rotate_right
+        </i>
+        <span>
+          Connecting…
+        </span>
+      </div>
+    </div>
   </footer>
 </div>
 `;
@@ -372,11 +385,24 @@ exports[`PageTransactions should filter the transactions 1`] = `
     <!---->
   </main>
   <footer
-    class="ni-page-footer"
+    class="app-footer"
   >
     <div
-      class="container"
-    />
+      class="app-footer-container"
+    >
+      <div
+        class="afi"
+      >
+        <i
+          class="material-icons fa-spin"
+        >
+          rotate_right
+        </i>
+        <span>
+          Connecting…
+        </span>
+      </div>
+    </div>
   </footer>
 </div>
 `;
diff --git a/yarn.lock b/yarn.lock
index f8f0821de8..620e298a49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6029,6 +6029,10 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
+perfect-scrollbar@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"