diff --git a/src/app/core-ui/core-ui.module.ts b/src/app/core-ui/core-ui.module.ts
index 224f7f091..b7dff1c91 100644
--- a/src/app/core-ui/core-ui.module.ts
+++ b/src/app/core-ui/core-ui.module.ts
@@ -4,11 +4,15 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from './material/material.module';
 import { MainViewModule } from './main/main-view.module';
 
-import { MatDialogModule, MatDialogRef } from '@angular/material';
-import { MatDialog } from '@angular/material'; // TODO: move to material
+import { MatDialogModule } from '@angular/material';
+import { MatDialog } from '@angular/material';
+import { PaginatorComponent } from './paginator/paginator.component';
+// TODO: move to material
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    PaginatorComponent
+  ],
   imports: [
     CommonModule,
     MaterialModule,
@@ -17,7 +21,8 @@ import { MatDialog } from '@angular/material'; // TODO: move to material
   ],
   exports: [
     MaterialModule,
-    MainViewModule
+    MainViewModule,
+    PaginatorComponent
   ]
 })
 export class CoreUiModule {
diff --git a/src/app/core-ui/main/main-view.component.html b/src/app/core-ui/main/main-view.component.html
index 4997d12ed..44017a280 100644
--- a/src/app/core-ui/main/main-view.component.html
+++ b/src/app/core-ui/main/main-view.component.html
@@ -131,7 +131,7 @@
       <!-- Sync progress -->
       <mat-content class="sync-progress cursor-pointer" (click)="syncScreen()">
         <!-- reused from syncing dialog -->
-        <app-percentage-bar #progress [sidebar]="true"></app-percentage-bar>
+        <app-percentage-bar #progress></app-percentage-bar>
       </mat-content>
 
     </footer><!-- .pin-to-bottom -->
diff --git a/src/app/core-ui/main/main-view.module.ts b/src/app/core-ui/main/main-view.module.ts
index 9c5d10a51..6e47fd8d8 100644
--- a/src/app/core-ui/main/main-view.module.ts
+++ b/src/app/core-ui/main/main-view.module.ts
@@ -8,6 +8,8 @@ import { CoreModule } from '../../core/core.module';
 
 import { MainViewComponent } from './main-view.component';
 import { StatusComponent } from './status/status.component';
+import { PercentageBarComponent } from '../../modals/shared/percentage-bar/percentage-bar.component';
+
 import { TransactionService } from '../../wallet/wallet/shared/transaction.service';
 
 @NgModule({
@@ -18,10 +20,12 @@ import { TransactionService } from '../../wallet/wallet/shared/transaction.servi
   ],
   exports: [
     MainViewComponent,
+    PercentageBarComponent
   ],
   declarations: [
     MainViewComponent,
     StatusComponent,
+    PercentageBarComponent
   ],
   providers: [
     TransactionService
diff --git a/src/app/core-ui/paginator/page-event-model.ts b/src/app/core-ui/paginator/page-event-model.ts
new file mode 100644
index 000000000..290fd5428
--- /dev/null
+++ b/src/app/core-ui/paginator/page-event-model.ts
@@ -0,0 +1,8 @@
+export class PageEvent {
+  /** The current page index. */
+  pageIndex: number;
+  /** The current page size */
+  pageSize: number;
+  /** The current total number of items being paged */
+  length: number;
+}
diff --git a/src/app/core-ui/paginator/paginator.component.html b/src/app/core-ui/paginator/paginator.component.html
new file mode 100644
index 000000000..49a9e6e8f
--- /dev/null
+++ b/src/app/core-ui/paginator/paginator.component.html
@@ -0,0 +1,34 @@
+<div class="mat-paginator-page-size">
+  <div class="mat-paginator-page-size-label">{{_intl.itemsPerPageLabel}}</div>
+  <mat-form-field *ngIf="pageSizeOptions.length> 1" class="mat-paginator-page-size-select">
+    <mat-select [value]="pageSize" [aria-label]="_intl.itemsPerPageLabel"
+                (change)="_changePageSize($event.value)">
+      <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
+        {{pageSizeOption}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div *ngIf="pageSizeOptions.length <= 1">{{pageSize}}</div>
+</div>
+<div class="mat-paginator-range-label">{{getRangeLabel(pageIndex, pageSize, length)}}</div>
+<button mat-icon-button type="button" class="mat-paginator-navigation-previous" (click)="firstPage()"
+        [matTooltip]="_intl.firstPageLable"
+        [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-previous-double"></mat-icon>
+</button>
+<button mat-icon-button type="button" class="mat-paginator-navigation-previous" (click)="previousPage()"
+        [matTooltip]="_intl.previousPageLabel"
+        [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-previous-single"></mat-icon>
+</button>
+
+<button mat-icon-button type="button" class="mat-paginator-navigation-next" (click)="nextPage()"
+        [matTooltip]="_intl.nextPageLabel" [matTooltipPosition]="'above'"
+        [disabled]="!hasNextPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-next-single"></mat-icon>
+</button>
+<button mat-icon-button type="button" class="mat-paginator-navigation-next" (click)="lastPage()"
+        [matTooltip]="_intl.lastPageLable" [matTooltipPosition]="'above'"
+        [disabled]="!hasNextPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-next-double"></mat-icon>
+</button>
diff --git a/src/app/core-ui/paginator/paginator.component.scss b/src/app/core-ui/paginator/paginator.component.scss
new file mode 100644
index 000000000..244fec036
--- /dev/null
+++ b/src/app/core-ui/paginator/paginator.component.scss
@@ -0,0 +1,62 @@
+@import "./src/assets/_config"; // import shared colors etc.
+
+.mat-paginator-page-size {
+  display: flex;
+  align-items: center
+}
+
+.mat-paginator-page-size-label {
+  margin: 0 4px
+}
+
+.mat-paginator-page-size-select {
+  margin: 0 0 -1.25em 8px;
+  width: 56px
+}
+
+.mat-paginator-range-label {
+  margin: 0 32px
+}
+
+.mat-paginator-increment-button + .mat-paginator-increment-button {
+  margin: 0 0 0 8px
+}
+
+[dir=rtl] .mat-paginator-increment-button + .mat-paginator-increment-button {
+  margin: 0 8px 0 0
+}
+
+.mat-paginator-decrement, .mat-paginator-increment {
+  width: 8px;
+  height: 8px
+}
+
+.mat-paginator-decrement, [dir=rtl] .mat-paginator-increment {
+  transform: rotate(45deg)
+}
+
+.mat-paginator-increment, [dir=rtl] .mat-paginator-decrement {
+  transform: rotate(225deg)
+}
+
+.mat-paginator-decrement {
+  margin-left: 12px
+}
+
+[dir=rtl] .mat-paginator-decrement {
+  margin-right: 12px
+}
+
+.mat-paginator-increment {
+  margin-left: 16px
+}
+
+[dir=rtl] .mat-paginator-increment {
+  margin-right: 16px
+}
+
+button {
+  .mat-icon {
+    margin: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/app/core-ui/paginator/paginator.component.spec.ts b/src/app/core-ui/paginator/paginator.component.spec.ts
new file mode 100644
index 000000000..378207559
--- /dev/null
+++ b/src/app/core-ui/paginator/paginator.component.spec.ts
@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginatorComponent } from './paginator.component';
+import { MaterialModule } from '../material/material.module';
+
+describe('PaginatorComponent', () => {
+  let component: PaginatorComponent;
+  let fixture: ComponentFixture<PaginatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PaginatorComponent ],
+      imports: [
+        MaterialModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core-ui/paginator/paginator.component.ts b/src/app/core-ui/paginator/paginator.component.ts
new file mode 100644
index 000000000..2cf7610db
--- /dev/null
+++ b/src/app/core-ui/paginator/paginator.component.ts
@@ -0,0 +1,125 @@
+import { PageEvent } from './page-event-model';
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss']
+})
+
+export class PaginatorComponent implements OnInit {
+
+  pageIndex: number = 0;
+  @Input() length: number = 0;
+  @Input() pageSize: number = 0;
+  @Input() pageSizeOptions: number[] = [];
+  @Output() page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
+
+  @HostBinding('class.mat-paginator')
+
+  public _intl: Object = {
+    itemsPerPageLabel: 'Items per page:',
+    nextPageLabel: 'Next page',
+    previousPageLabel: 'Previous page',
+    firstPageLable: 'Fist Page',
+    lastPageLable: 'Last Page'
+  };
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  /** Advances to the next page if it exists. */
+  nextPage(): void {
+    if (!this.hasNextPage()) {
+      return;
+    }
+    this.pageIndex++;
+    this._emitPageEvent();
+  }
+
+  /** Move back to the previous page if it exists. */
+  previousPage(): void {
+    if (!this.hasPreviousPage()) {
+      return;
+    }
+    this.pageIndex--;
+    this._emitPageEvent();
+  }
+
+  /** Move back to the first page. */
+  firstPage(): void {
+    this.pageIndex = 0;
+    this._emitPageEvent();
+  }
+
+  /** go to the last page if it exists. */
+  lastPage(): void {
+    this.pageIndex = Math.ceil(this.length / this.pageSize) - 1;
+    this._emitPageEvent();
+  }
+
+  /**
+   * Whether there is a previous page.
+   * @return {?}
+   */
+  hasPreviousPage() {
+    return this.pageIndex >= 1 && this.pageSize !== 0;
+  };
+
+  /**
+   * Whether there is a next page.
+   * @return {?}
+   */
+  hasNextPage() {
+    const numberOfPages = Math.ceil(this.length / this.pageSize) - 1;
+    return this.pageIndex < numberOfPages && this.pageSize !== 0;
+  };
+
+  getRangeLabel(page: number, pageSize: number, length: number) {
+    if (length === 0 || pageSize === 0) {
+      return '0 of ' + length;
+    }
+    length = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    // If the start index exceeds the list length, do not try and fix the end index to the end.
+    const endIndex = startIndex < length
+      ? Math.min(startIndex + pageSize, length)
+      : startIndex + pageSize;
+    return startIndex + 1 + ' - ' + endIndex + ' of ' + length;
+  }
+
+  /**
+   * Changes the page size so that the first item displayed on the page will still be
+   * displayed using the new page size.
+   *
+   * For example, if the page size is 10 and on the second page (items indexed 10-19) then
+   * switching so that the page size is 5 will set the third page as the current page so
+   * that the 10th item will still be displayed.
+   * @param {?} pageSize
+   * @return {?}
+   */
+  _changePageSize(pageSize: number): void {
+    // Current page needs to be updated to reflect the new page size. Navigate to the page
+    // containing the previous page's first item.
+    const startIndex = this.pageIndex * this.pageSize;
+    this.pageIndex = Math.floor(startIndex / pageSize) || 0;
+    this.pageSize = pageSize;
+    this._emitPageEvent();
+  }
+
+  _emitPageEvent(): void {
+    this.page.next({
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      length: this.length
+    });
+  }
+}
diff --git a/src/app/modals/encryptwallet/encryptwallet.component.spec.ts b/src/app/modals/encryptwallet/encryptwallet.component.spec.ts
index b4b1090d8..f2690b91b 100644
--- a/src/app/modals/encryptwallet/encryptwallet.component.spec.ts
+++ b/src/app/modals/encryptwallet/encryptwallet.component.spec.ts
@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogRef } from '@angular/material';
 
 import { CoreModule } from '../../core/core.module';
 import { ModalsModule } from '../modals.module';
@@ -19,6 +20,9 @@ describe('EncryptwalletComponent', () => {
         ModalsModule,
         CoreModule.forRoot(),
         CoreUiModule.forRoot()
+      ],
+      providers: [
+        { provide: MatDialogRef }
       ]
     })
     .compileComponents();
diff --git a/src/app/modals/encryptwallet/encryptwallet.component.ts b/src/app/modals/encryptwallet/encryptwallet.component.ts
index 59eb70dff..a66d00973 100644
--- a/src/app/modals/encryptwallet/encryptwallet.component.ts
+++ b/src/app/modals/encryptwallet/encryptwallet.component.ts
@@ -1,5 +1,6 @@
 import {Component, forwardRef, Inject, ViewChild} from '@angular/core';
 import { Log } from 'ng2-logger';
+import { MatDialogRef } from '@angular/material';
 
 import { PasswordComponent } from '../shared/password/password.component';
 import { IPassword } from '../shared/password/password.interface';
@@ -21,11 +22,13 @@ export class EncryptwalletComponent {
   @ViewChild('passwordElement')
   passwordElement: PasswordComponent;
 
-  constructor(private _rpc: RpcService,
-              private flashNotification: SnackbarService,
-              @Inject(forwardRef(() => ModalsService))
-              private _modalsService: ModalsService) {
-  }
+  constructor(
+    @Inject(forwardRef(() => ModalsService))
+    private _modalsService: ModalsService,
+    private _rpc: RpcService,
+    private flashNotification: SnackbarService,
+    public _dialogRef: MatDialogRef<EncryptwalletComponent>
+  ) { }
 
   encryptwallet(password: IPassword) {
     if (this.password) {
@@ -47,10 +50,12 @@ export class EncryptwalletComponent {
                   .subscribe(() => {
                     if (!this._modalsService.initializedWallet) {
                       this._modalsService.open('createWallet', {forceOpen: true});
-                      this._rpc.toggleState(true);
                     } else {
                       this._modalsService.close();
+                      // force-close encrypt modal
+                      this._dialogRef.close();
                     }
+                    this._rpc.toggleState(true);
                   });
               }
             },
diff --git a/src/app/modals/modals.component.html b/src/app/modals/modals.component.html
index ad398c3c2..8a747fbf4 100644
--- a/src/app/modals/modals.component.html
+++ b/src/app/modals/modals.component.html
@@ -6,8 +6,4 @@
   <mat-spinner mode="indeterminate" *ngIf="loadSpinner"></mat-spinner>
 
   <ng-template #modalContainer></ng-template>
-</div>
-
-<div class="modal-footer-info">
-  <app-percentage-bar></app-percentage-bar>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modals/modals.component.scss b/src/app/modals/modals.component.scss
index acad5270d..58f137ced 100644
--- a/src/app/modals/modals.component.scss
+++ b/src/app/modals/modals.component.scss
@@ -10,16 +10,6 @@
     Modal header
 \* ------------------------------- */
 
-.modal-footer-info {
-  position: fixed;
-  bottom: 0;
-  left: calc((100% - 800px) / 2);
-  width: 800px;
-  height: 20px;
-  text-align: center;
-}
-
-
 .modal-content {
   border-radius: 0;
   background: none;
diff --git a/src/app/modals/modals.module.ts b/src/app/modals/modals.module.ts
index 89b97ec34..caf7919c1 100644
--- a/src/app/modals/modals.module.ts
+++ b/src/app/modals/modals.module.ts
@@ -23,7 +23,6 @@ import { AlertComponent } from './shared/alert/alert.component';
 import { PassphraseComponent } from './createwallet/passphrase/passphrase.component';
 import { PassphraseService } from './createwallet/passphrase/passphrase.service';
 import { PasswordComponent } from './shared/password/password.component';
-import { PercentageBarComponent } from './shared/percentage-bar/percentage-bar.component';
 import { MultiwalletComponent } from './multiwallet/multiwallet.component';
 
 import { SnackbarService } from '../core/snackbar/snackbar.service';
@@ -51,12 +50,10 @@ import { SnackbarService } from '../core/snackbar/snackbar.service';
     EncryptwalletComponent,
     AlertComponent,
     ColdstakeComponent,
-    PercentageBarComponent,
     MultiwalletComponent
   ],
   exports: [
     ModalsComponent,
-    PercentageBarComponent,
     ClipboardModule
   ],
   providers: [
diff --git a/src/app/modals/modals.service.spec.ts b/src/app/modals/modals.service.spec.ts
index b52b43373..aa4ebba56 100644
--- a/src/app/modals/modals.service.spec.ts
+++ b/src/app/modals/modals.service.spec.ts
@@ -2,18 +2,21 @@ import { TestBed, inject } from '@angular/core/testing';
 
 import { ModalsModule } from './modals.module';
 import { CoreModule } from '../core/core.module';
-import { SharedModule } from '../wallet/shared/shared.module';
 
 import { ModalsService } from './modals.service';
+import { MatDialogModule, MatDialogRef } from '@angular/material';
 
 
-describe('ModalsService', () => {
+  describe('ModalsService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        SharedModule,
+        MatDialogModule,
         ModalsModule,
         CoreModule.forRoot()
+      ],
+      providers: [
+        { provide: MatDialogRef},
       ]
     });
   });
diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.html b/src/app/modals/shared/percentage-bar/percentage-bar.component.html
index 3feee907c..8b53bdaad 100644
--- a/src/app/modals/shared/percentage-bar/percentage-bar.component.html
+++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.html
@@ -1,18 +1,6 @@
-<!-- dialog -->
-<div class="dialog-percentage-bar" *ngIf="initialized && !sidebar">
-  <span class="percentage-bar-text">{{syncString }}</span>
-  <mat-progress-bar
-    class="dialog-percentage-bar"
-    [color]="'primary'"
-    [bufferValue]="syncPercentage"
-    [mode]="'determinate'"
-    [value]="syncPercentage">
-  </mat-progress-bar>
-</div>
-
 
-<!-- side bar -->
-<div class="sync-progress-wrapper" *ngIf="initialized && sidebar && !(syncPercentage === 100)" matTooltip="{{ syncString }}" matTooltipPosition="above">
+<!-- Sidebar sync progress -->
+<div class="sync-progress-wrapper" *ngIf="initialized && !(syncPercentage === 100)" matTooltip="{{ syncString }}" matTooltipPosition="above">
 
   <p class="sync-info">
     <mat-spinner class="sync-spinner" color="accent"></mat-spinner>Syncing with the network
diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.scss b/src/app/modals/shared/percentage-bar/percentage-bar.component.scss
index cc60b88e5..80f6c13fd 100644
--- a/src/app/modals/shared/percentage-bar/percentage-bar.component.scss
+++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.scss
@@ -1,21 +1,6 @@
 @import "./src/assets/_config"; // import shared colors etc.
 
 
-// Dialog
-.dialog-percentage-bar {
-  .percentage-bar-text {
-    position: absolute;
-    top: 2px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 99999;
-    font-size: 11px;
-    font-weight: normal;
-    text-transform: uppercase;
-  }
-}
-
-
 // Sidebar
 .sync-progress-wrapper {
   padding: 15px 24px 0;
diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts b/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts
index b6e9de05a..0ec9b6043 100644
--- a/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts
+++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CoreModule } from '../../../core/core.module';
-import { ModalsModule } from '../../modals.module';
+import { CoreUiModule } from '../../../core-ui/core-ui.module';
 import { SharedModule } from '../../../wallet/shared/shared.module';
 
 import { PercentageBarComponent } from './percentage-bar.component';
@@ -15,7 +15,7 @@ describe('PercentageBarComponent', () => {
       imports: [
         SharedModule,
         CoreModule.forRoot(),
-        ModalsModule
+        CoreUiModule.forRoot()
       ]
     })
     .compileComponents();
diff --git a/src/app/modals/syncing/syncing.component.html b/src/app/modals/syncing/syncing.component.html
index e086de476..4ba735c86 100644
--- a/src/app/modals/syncing/syncing.component.html
+++ b/src/app/modals/syncing/syncing.component.html
@@ -21,31 +21,30 @@
     <!-- @TODO: resize and align spinner  -->
     <div class="section sync-stats" fxLayout="row" fxLayoutWrap>
       <div fxFlex="30" class="big item">
-          <span class="value">
-            {{ remainder }}
-            <div fxLayoutAlign="center center" *ngIf="!syncPercentage">
-                <mat-spinner class="sync-spinner"></mat-spinner>
-            </div>
-          </span>
-
+        <span class="value">
+          {{ remainder }}
+          <div fxLayoutAlign="center center" *ngIf="!syncPercentage">
+            <mat-spinner class="sync-spinner"></mat-spinner>
+          </div>
+        </span>
         <div class="description">Blocks to sync</div>
       </div>
       <div fxFlex="70" class="big item">
-          <span class="value">
-            {{ estimatedTimeLeft }}
-            <div fxLayoutAlign="center center" *ngIf="!syncPercentage">
-                <mat-spinner class="sync-spinner"></mat-spinner>
-            </div>
-          </span>
+        <span class="value">
+          {{ estimatedTimeLeft }}
+          <div fxLayoutAlign="center center" *ngIf="!syncPercentage">
+            <mat-spinner class="sync-spinner"></mat-spinner>
+          </div>
+        </span>
         <div class="description">Estimated time left</div>
       </div>
       <div fxFlex="100" class="small item">
-          <span class="value">
-            {{ lastBlockTime }}
-            <div fxLayoutAlign="center center" *ngIf="!syncPercentage">
-                <mat-spinner class="sync-spinner"></mat-spinner>
-            </div>
-          </span>
+        <span class="value">
+          {{ lastBlockTime }}
+          <div fxLayoutAlign="center center" *ngIf="!syncPercentage">
+            <mat-spinner class="sync-spinner"></mat-spinner>
+          </div>
+        </span>
         <div class="description">Last Block time</div>
       </div>
     </div><!-- .sync-stats -->
diff --git a/src/app/wallet/shared/shared.module.ts b/src/app/wallet/shared/shared.module.ts
index cced0b582..b24063649 100644
--- a/src/app/wallet/shared/shared.module.ts
+++ b/src/app/wallet/shared/shared.module.ts
@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ClipboardModule } from 'ngx-clipboard';
+import { MaterialModule } from '../../core-ui/material/material.module';
 import { AccordionModule } from './accordion/accordion.module';
 
 import { HeaderComponent } from './header/header.component';
@@ -12,24 +13,11 @@ import { TableComponent } from './table/table.component';
 import { GridComponent } from './grid/grid.component';
 import { DeleteConfirmationModalComponent } from './delete-confirmation-modal/delete-confirmation-modal.component';
 
-import {
-  MatButtonModule,
-  MatDialogModule,
-  MatExpansionModule,
-  MatIconModule,
-  MatInputModule
-} from '@angular/material';
-
 @NgModule({
   imports: [
     CommonModule,
     AccordionModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatIconModule,
-    MatInputModule,
-    FlexLayoutModule
+    MaterialModule
   ],
   declarations: [
     HeaderComponent,
diff --git a/src/app/wallet/wallet/addresslookup/addresslookup.component.html b/src/app/wallet/wallet/addresslookup/addresslookup.component.html
index 981c8438a..a386aa836 100644
--- a/src/app/wallet/wallet/addresslookup/addresslookup.component.html
+++ b/src/app/wallet/wallet/addresslookup/addresslookup.component.html
@@ -41,10 +41,9 @@
 
   </mat-list>
 
-  <mat-paginator
+  <app-paginator
     [length]="getTotalCountForPagination()"
     [pageSize]="MAX_ADDRESSES_PER_PAGE"
-    [pageSizeOptions]="PAGE_SIZE_OPTIONS"
     (page)="pageChanged($event)">
-  </mat-paginator>
+  </app-paginator>
 </div>
diff --git a/src/app/wallet/wallet/addresslookup/addresslookup.component.ts b/src/app/wallet/wallet/addresslookup/addresslookup.component.ts
index 53ad16a55..a9de86125 100644
--- a/src/app/wallet/wallet/addresslookup/addresslookup.component.ts
+++ b/src/app/wallet/wallet/addresslookup/addresslookup.component.ts
@@ -29,7 +29,7 @@ export class AddressLookupComponent implements OnInit {
 
   // @TODO: Move static pagination prams into global variable
   MAX_ADDRESSES_PER_PAGE: number = 5;
-  PAGE_SIZE_OPTIONS: Array<number> = [5, 10, 20];
+  // PAGE_SIZE_OPTIONS: Array<number> = [5, 10, 20];
   current_page: number = 1;
   constructor(private _rpc: RpcService) {
   }
diff --git a/src/app/wallet/wallet/receive/receive.component.html b/src/app/wallet/wallet/receive/receive.component.html
index f3a157343..f8d321b27 100644
--- a/src/app/wallet/wallet/receive/receive.component.html
+++ b/src/app/wallet/wallet/receive/receive.component.html
@@ -154,21 +154,21 @@
 
     <!-- use two paginator for reset pagination after tab change. -->
     <div class="receive-pagination">
-      <mat-paginator
+      <app-paginator
         *ngIf="type == 'private' && getSinglePage().length > 0"
         [length]="getTotalCountForPagination()"
         [pageSize]="MAX_ADDRESSES_PER_PAGE"
         [pageSizeOptions]="PAGE_SIZE_OPTIONS"
         (page)="pageChanged($event)">
-      </mat-paginator>
+      </app-paginator>
 
-      <mat-paginator
+      <app-paginator
         *ngIf="type == 'public' && getSinglePage().length > 0"
         [length]="getTotalCountForPagination()"
         [pageSize]="MAX_ADDRESSES_PER_PAGE"
         [pageSizeOptions]="PAGE_SIZE_OPTIONS"
         (page)="pageChanged($event)">
-      </mat-paginator>
+      </app-paginator>
     </div>
   </div>
 
diff --git a/src/app/wallet/wallet/send/send.component.html b/src/app/wallet/wallet/send/send.component.html
index effb4421e..61b301c0c 100644
--- a/src/app/wallet/wallet/send/send.component.html
+++ b/src/app/wallet/wallet/send/send.component.html
@@ -1,213 +1,176 @@
 <app-header class="disable-select">
   <div class="container-fluid">
-    <div fxLayout.lg="row">
-      <div fxFlex="77">
-        <mat-tab-group (selectChange)="selectTab($event.index)">
-          <mat-tab>
-            <ng-template mat-tab-label>
-              Send payment
-            </ng-template>
-          </mat-tab>
-          <mat-tab>
-            <ng-template mat-tab-label>
-              Balance transfer
-            </ng-template>
-          </mat-tab>
-        </mat-tab-group>
-      </div>
-      <div fxFlex="23" disableTouchRipple="true" class="bottom-line" fxLayoutAlign="left center">
-        <button mat-button (click)="toggleAdvanced()" class="advanced-options"><!-- *ngIf="type === 'balanceTransfer'" -->
-          <mat-icon fontSet="partIcon" fontIcon="{{ (advanced) ? 'part-circle-minus': 'part-circle-plus' }}"></mat-icon>
-          <span>{{ advancedText }}</span>
-        </button>
-      </div>
-    </div>
+    <mat-tab-group (selectChange)="selectTab($event.index)">
+      <mat-tab>
+        <ng-template mat-tab-label>
+          Send payment
+        </ng-template>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label>
+          Balance transfer
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
   </div>
 </app-header>
 
-<div class="container-fluid container-block disable-select">
-  <div>
-    <form name="walletSendForm">
-
-      <mat-card>
-        <mat-list-item>
-          <div class="mat-line mat-expansion-panel" fxLayout="row" fxLayoutGap="20">
-            <!-- send payment tab -->
-            <mat-radio-group class="mat-send-card" *ngIf="type === 'sendPayment'" name="sendInput"
-                            [(ngModel)]="send.input" fxFlex="100" fxLayoutAlign="center center">
-              <h5 fxFlex="16.6">From Account</h5>
-              <mat-radio-button value="balance" checked="checked" fxFlex="16.6">Public</mat-radio-button>
-              <mat-radio-button value="blind_balance" fxFlex="16.6">Blind</mat-radio-button>
-              <mat-radio-button value="anon_balance" fxFlex="16.6">Private</mat-radio-button>
-              <div fxFlex="50">
-                <span class="balance-label">Balance: </span>
-                <span class="balance-amount enable-select">{{ getBalance(send.input) }}</span>
-                <span class="currency">PART</span>
-              </div>
-            </mat-radio-group>
-
-            <!-- balance transfer tab -->
-            <mat-radio-group class="mat-send-card" *ngIf="type === 'balanceTransfer'" name="sendInput"
-                            [(ngModel)]="send.input" fxFlex="100" fxLayoutAlign="center center">
-              <h5 fxFlex="16.6">From Account</h5>
-              <mat-radio-button value="balance" (click)="send.output = 'blind_balance'" checked="checked" fxFlex="16.6">Public
-              </mat-radio-button>
-              <mat-radio-button value="blind_balance" (click)="send.output = 'balance'" fxFlex="16.6">
-                Blind
-              </mat-radio-button>
-              <!-- fix inconsistency here -->
-              <mat-radio-button value="anon_balance" disabled="{{ send.output === 'anon_balance' }}" fxFlex="16.6">
-                Private
-              </mat-radio-button>
-              <div fxFlex="50">
-                <span class="balance-label">Balance: </span>
-                <span class="balance-amount enable-select">{{ getBalance(send.input )}}</span>
-                <span class="currency">PART</span>
-              </div>
-            </mat-radio-group>
-          </div>
-        </mat-list-item>
-      </mat-card>
 
-      <p class="widget-help" *ngIf="type === 'balanceTransfer'">
-        Balance transfer helps you move PART between your Public and Private addresses.
+<div class="container-block disable-select" fxLayout="row" fxLayoutGap="35px">
+
+  <div class="from-box" fxFlex="0 0 320px">
+    <mat-card>
+      <div class="title">Pay from</div>
+
+      <!-- Select "FROM" balance/account -->
+      <mat-radio-group class="from-balance-type block-radio" name="sendInput" [(ngModel)]="send.input" fxLayout="column" fxLayoutGap="10px">
+        <mat-radio-button class="balance" value="balance" checked="checked" fxFlex>
+          <div class="name">Public</div>
+          <div class="desc">Balance:<span class="amount">{{ getBalance('balance') }}</span></div>
+        </mat-radio-button>
+        <mat-radio-button class="balance" value="blind_balance" fxFlex>
+          <div class="name">Blind</div>
+          <div class="desc">Balance:<span class="amount">{{ getBalance('blind_balance') }}</span></div>
+        </mat-radio-button>
+        <mat-radio-button class="balance" value="anon_balance" fxFlex>
+          <div class="name">Anon</div>
+          <div class="desc">Balance:<span class="amount">{{ getBalance('anon_balance') }}</span></div>
+        </mat-radio-button>
+      </mat-radio-group><!-- .from-balance-type -->
+
+      <!-- Show privacy slider if anonymous TX -->
+      <div *ngIf="send.input === 'anon_balance'">
+        <div class="subtitle">Select privacy level</div>
+        <div class="privacy-level">
+          <div class="privacy-labels" fxLayout="row" fxLayoutAlign="space-between center">
+            <span fxFlex="0 0 50px" class="privacy-label low" (click)="setPrivacy(4,10)" matTooltip="Low privacy" matTooltipPosition="below">Low</span>
+            <span fxFlex="0 0 50px" class="privacy-label medium" (click)="setPrivacy(8,50)" matTooltip="Standard privacy" matTooltipPosition="below">Normal</span>
+            <span fxFlex="0 0 50px" class="privacy-label high" (click)="setPrivacy(16,100)" matTooltip="High privacy" matTooltipPosition="below">High</span>
+          </div><!-- .privacy-labels -->
+          <mat-progress-bar [color]="'primary'" [bufferValue]="send.privacy" [mode]="'determinate'" [value]="progress"></mat-progress-bar>
+        </div><!-- .privacy-level -->
+      </div><!-- /if Anon -->
+
+      <!-- TX info help -->
+      <p class="widget-help" *ngIf="send.input === 'balance'">
+        In public transactions, everything is visible on the blockchain &ndash; transaction amount, sender and receiver addresses.
+      </p>
+      <p class="widget-help" *ngIf="send.input === 'blind_balance'">
+        Blinded transactions hide transaction amounts, but the sender and receiver addresses are still visible.
       </p>
-
-      <mat-card *ngIf="type === 'balanceTransfer'">
-        <mat-list-item>
-          <div class="mat-line mat-expansion-panel" fxLayout="row" fxLayoutGap="20">
-            <mat-radio-group class="mat-send-card" name="sendOutput" [(ngModel)]="send.output" fxFlex="100"
-                            fxLayoutAlign="center center">
-              <h5 fxFlex="16.6">To Account</h5>
-              <mat-radio-button value="balance" (click)="send.input = 'blind_balance'" fxFlex="16.6">Public
-              </mat-radio-button>
-              <mat-radio-button value="blind_balance" (click)="send.input = 'balance'" fxFlex="16.6">
-                Blind
-              </mat-radio-button>
-              <mat-radio-button value="anon_balance" disabled="{{ send.input === 'anon_balance' }}" fxFlex="16.6">
-                Private
-              </mat-radio-button>
-              <div fxFlex="50">
-                <span class="balance-label">Balance: </span>
-                <span class="balance-amount enable-select">{{ getBalance(send.output) }}</span>
-                <span class="currency">PART</span>
-              </div>
-            </mat-radio-group>
-          </div>
-        </mat-list-item>
-      </mat-card>
-
-
-      <mat-card class="mat-send-list" *ngIf="type === 'sendPayment' || advanced">
-        <mat-list-item>
-          <div class="mat-send-card mat-line mat-expansion-panel" fxFlex="100" fxLayout="row" fxLayoutGap="20px"
-               fxLayoutAlign="center center">
-            <h5 fxFlex="15">Pay to</h5>
-            <mat-form-field fxFlex="100">
-              <!-- fix success input -->
-              <input #address name="toAddress"
-                     matInput [ngClass]="{'verify-sucess': checkAddress() === true, 'verify-error': checkAddress() === false }"
-                     type="text" placeholder="Recipient's address"
-                     [(ngModel)]="send.toAddress" (ngModelChange)="verifyAddress()" />
-            </mat-form-field>
-            <div fxFlex="100" fxLayoutGap="20px">
-              <mat-form-field fxFlex="100">
-                <input class="mat-bg-transparent" name="toLabel" matInput type="text" placeholder="Enter a label"
-                       [(ngModel)]="send.toLabel">
-              </mat-form-field>
-              <div fxFlex="0 0 100px" fxFlex.lt-md="100" fxLayoutAlign="center center" fxLayoutGap="20px">
-                <span fxFlex="16.6">
-                  <mat-icon class="cursor-pointer zindex" flex="100" matTooltip="Address Lookup" (click)="openLookup()"
-                           fontSet="partIcon" fontIcon="part-people"></mat-icon>
-                </span>
-                <span fxFlex="16.6">
-                  <mat-icon flex="100" class="cursor-pointer" matTooltip="Paste" fontSet="partIcon" fontIcon="part-copy" (click)="pasteAddress()"></mat-icon>
-                </span>
-                <span fxFlex="16.6">
-                  <mat-icon flex="100" matTooltip="Clear" (click)="clearReceiver()" color="warn" fontSet="partIcon"
-                           fontIcon="part-circle-remove"></mat-icon>
-                </span>
-              </div>
-            </div>
-          </div>
-        </mat-list-item>
-      </mat-card>
-
-
-      <mat-card class="mat-send-list" *ngIf="advanced">
-        <mat-list-item>
-          <div class="mat-line mat-send-card mat-expansion-panel" fxFlex="100" fxLayout="row" fxLayoutGap="20px"
-               fxLayoutAlign="center center">
-            <h5 fxFlex="15">Narration</h5>
-            <mat-form-field fxFlex="100">
-            <input #narration type="text" matInput name="sendNote"
-             placeholder="Optional: enter a short note to send with a payment"
-             maxlength="24"
-            [(ngModel)]="send.note" >
-            <mat-hint align="end">{{narration.value.length}} / 24</mat-hint>
-            </mat-form-field>
-          </div>
-        </mat-list-item>
-      </mat-card>
-
-
-      <mat-card class="mat-send-list">
-        <mat-list-item>
-          <div class="mat-line mat-send-card mat-expansion-panel" fxFlex="100" fxLayout="row" fxLayoutGap="20px"
-               fxLayoutAlign="start center">
-            <h5 fxFlex="15">Amount</h5>
-            <mat-form-field fxFlex="70%">
-              <input matInput type="text" name="sendAmount"
-                     placeholder="Amount to send"
-                     [(ngModel)]="send.amount" (input)="verifyAmount()"
-                     [ngClass]="{'verify-sucess': checkAmount() === true, 'verify-error': checkAmount() === false }"
-                     oninput="validity.valid||(value='');" step="any">
-            </mat-form-field>
-            <mat-select class="underliningSelect" fxFlex="30%" name="currency" [(ngModel)]="send.currency" placeholder="Currency">
-              <mat-option value="part">PART</mat-option>
-            </mat-select>
-          </div>
-        </mat-list-item>
-      </mat-card>
-
-
-      <mat-card *ngIf="send.input === 'anon_balance'">
-        <mat-list-item>
-          <div class="mat-line mat-send-card mat-expansion-panel" fxFlex="100" fxLayout="row" fxLayoutGap="20px"
-               fxLayoutAlign="center center">
-            <h5 fxFlex="15">Privacy level</h5>
-            <div fxFlex="'column'" fxLayoutWrap>
-              <div class="privacy-labels" fxFlex="100" fxLayoutAlign="start center">
-                <span fxFlex class="privacy-label low" (click)="setPrivacy(4,10)" matTooltip="Set Low" matTooltipPosition="below">Low</span>
-                <span fxFlex class="privacy-label medium" (click)="setPrivacy(8,50)" matTooltip="Set Medium" matTooltipPosition="below">Medium</span>
-                <span fxFlex class="privacy-label high" (click)="setPrivacy(16,100)" matTooltip="Set High" matTooltipPosition="below">High</span>
-              </div>
-              <mat-progress-bar class="example-margin" [color]="'primary'" [bufferValue]="send.privacy"
-                               [mode]="'determinate'" [value]="progress"></mat-progress-bar>
-            </div>
-          </div>
-        </mat-list-item>
-      </mat-card>
       <p class="widget-help" *ngIf="send.input === 'anon_balance'">
-        Choose your privacy level. Higher privacy levels have higher fees, but offers increased privacy.
+        Anon transaction offer the highest privacy &ndash; transaction amounts and not even sender and receiver addresses are publicly visible. You can further adjust the privacy level to your needs ("Normal" privacy level is fine for most users). The higher privacy level is, the larger fee needs to be paid.
       </p>
 
+      <!--button mat-button (click)="toggleAdvanced()" class="small advanced-options">
+        <mat-icon fontSet="partIcon" fontIcon="{{ (advanced) ? 'part-circle-minus': 'part-circle-plus' }}"></mat-icon>
+        <span>{{ advancedText }}</span>
+      </button-->
+    </mat-card>
+  </div><!-- .from-box -->
 
-      <div class="actions">
-        <div class="send" fxFlex="100" fxLayout="row" fxLayoutAlign="end end" fxLayoutGap="10px">
-          <button mat-raised-button color="primary" (click)="clear()">
-            <mat-icon fontSet="partIcon" fontIcon="part-clear-all"></mat-icon>
+
+  <div class="to-box" fxFlex="1 1 100%">
+    <form name="walletSendForm">
+
+      <!-- Select "TO" balance/account (ONLY for Balance transfer) -->
+      <mat-card class="section to-balance-type" *ngIf="type === 'balanceTransfer'">
+        <div class="title">
+          Convert to
+          <button mat-button (click)="toggleAdvanced()" class="small advanced-options">
+            <mat-icon fontSet="partIcon" fontIcon="{{ (advanced) ? 'part-circle-minus': 'part-circle-plus' }}"></mat-icon>
+            <span>{{ advancedText }}</span>
+          </button>
+        </div>
+        <mat-radio-group class="to-balance-type block-radio" name="sendOutput" [(ngModel)]="send.output" fxLayout="column" fxLayoutGap="10px">
+          <mat-radio-button class="balance" value="balance" checked="checked" fxFlex>
+            <div class="name">Public</div>
+            <div class="desc">Balance:<span class="amount">{{ getBalance('balance') }}</span></div>
+          </mat-radio-button>
+          <mat-radio-button class="balance" value="blind_balance" fxFlex>
+            <div class="name">Blind</div>
+            <div class="desc">Balance:<span class="amount">{{ getBalance('blind_balance') }}</span></div>
+          </mat-radio-button>
+          <mat-radio-button class="balance" value="anon_balance" disabled fxFlex>
+            <div class="name">Anon</div>
+            <div class="desc">Balance:<span class="amount">{{ getBalance('anon_balance') }}</span></div>
+          </mat-radio-button>
+        </mat-radio-group><!-- .from-balance-type -->
+        <p class="widget-help">
+          Balance transfer helps you convert your PART between Public and Private balances.
+        </p>
+      </mat-card><!-- .to-balance-type.section -->
+
+      <mat-card class="pay-to" *ngIf="type === 'sendPayment' || advanced">
+        <div class="title">
+          Pay to
+          <button mat-button (click)="toggleAdvanced()" *ngIf="type === 'sendPayment'" class="small advanced-options">
+            <mat-icon fontSet="partIcon" fontIcon="{{ (advanced) ? 'part-circle-minus': 'part-circle-plus' }}"></mat-icon>
+            <span>{{ advancedText }}</span>
+          </button>
+        </div>
+
+        <!-- Receiver's address/label -->
+        <div class="section receiver-address">
+          <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="15px">
+            <mat-form-field fxFlex="1 1 100%" class="full-width larger">
+              <input #address name="toAddress" matInput [ngClass]="{'verify-sucess': checkAddress() === true, 'verify-error': checkAddress() === false }" type="text" placeholder="Recipient's address" [(ngModel)]="send.toAddress" (ngModelChange)="verifyAddress()" />
+            </mat-form-field>
+            <span fxFlex="0 0 20px">
+              <mat-icon class="cursor-pointer zindex" matTooltip="Address Lookup" (click)="openLookup()" fontSet="partIcon" fontIcon="part-people"></mat-icon>
+            </span>
+            <span fxFlex="0 0 20px">
+              <mat-icon class="cursor-pointer" matTooltip="Paste" fontSet="partIcon" fontIcon="part-copy" (click)="pasteAddress()"></mat-icon>
+            </span>
+            <span fxFlex="0 0 20px">
+              <mat-icon matTooltip="Clear" (click)="clearReceiver()" color="warn" fontSet="partIcon" fontIcon="part-circle-remove"></mat-icon>
+            </span>
+          </div>
+          <mat-form-field class="full-width larger" floatPlaceholder="never">
+            <input name="toLabel" matInput type="text" placeholder="Receiver's name (optional)" [(ngModel)]="send.toLabel">
+          </mat-form-field>
+          <p class="widget-help">
+            You can save Receiver's address to your Address book by labeling it here.
+          </p>
+        </div><!-- .receiver-address.section -->
+
+        <!-- Narrations -->
+        <div class="section narration advanced" *ngIf="advanced">
+          <mat-form-field class="full-width larger" floatPlaceholder="never">
+            <input #narration type="text" matInput name="sendNote" placeholder="Narration (optional)" maxlength="24" [(ngModel)]="send.note">
+            <mat-hint align="end">{{narration.value.length}} / 24</mat-hint>
+          </mat-form-field>
+          <p class="widget-help">
+            Send a short note with your payment. Keep in mind that when sending to Public addresses, the narrations will be recorded and publicly visible on the blockchain. Blind & Anon transactions make narrations visible only for Sender and Receiver.
+          </p>
+        </div><!-- .narration.section -->
+      </mat-card><!-- .pay-to -->
+
+      <!-- Send amount % buttons -->
+      <mat-card class="send-amount" fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="start center">
+        <mat-form-field fxFlex="0 0 150px">
+          <!-- Send amount -->
+          <input matInput type="text" name="sendAmount" placeholder="Amount to send" [(ngModel)]="send.amount" (input)="verifyAmount()" [ngClass]="{'verify-sucess': checkAmount() === true, 'verify-error': checkAmount() === false }" oninput="validity.valid||(value='');" step="any">
+        </mat-form-field>
+        <!-- Choose currency -->
+        <mat-select class="underliningSelect" fxFlex="0 0 70px" name="currency" [(ngModel)]="send.currency" placeholder="Currency">
+          <mat-option value="part">PART</mat-option>
+        </mat-select>
+        <!-- Send buttons -->
+        <div class="actions" fxFlex="1 1 100%">
+          <button mat-button (click)="clear()">
+            <mat-icon fontSet="partIcon" fontIcon="part-cross"></mat-icon>
             Clear all
           </button>
-          <button mat-raised-button color="disabled" class="validate" (click)="onSubmit()"
-                  [disabled]="!checkAddress() || !checkAmount()">
-            <mat-icon fontSet="partIcon" fontIcon="part-next-single-right"></mat-icon>
+          <button mat-raised-button color="primary" class="validate" (click)="onSubmit()" [disabled]="!checkAddress() || !checkAmount()">
+            <mat-icon fontSet="partIcon" fontIcon="part-check"></mat-icon>
             Make payment
           </button>
-        </div>
-      </div><!-- .actions -->
+        </div><!-- .actions -->
+      </mat-card><!-- .send-amount -->
 
 
-    </form>
-  </div>
-</div>
+    </form><!-- walletSendForm -->
+  </div><!-- .to-box -->
+
+</div><!-- .container -->
\ No newline at end of file
diff --git a/src/app/wallet/wallet/send/send.component.scss b/src/app/wallet/wallet/send/send.component.scss
index 9a24ff31b..1e9ec7043 100644
--- a/src/app/wallet/wallet/send/send.component.scss
+++ b/src/app/wallet/wallet/send/send.component.scss
@@ -1,134 +1,122 @@
 @import "./src/assets/_config"; // import shared colors etc.
 
-/* ------------------------------- *\
-    Layout
-\* ------------------------------- */ 
 
-.formTableFullWidth {
-  width: 100%;
+// ------ UI ------ //
+
+.section {
+  &.advanced { // "advanced options" fields
+    background: mix(white, $bg);
+    border-top: 1px dashed darken($bg, 7%);
+    margin: 0 -24px 0 !important;
+    padding: 8px 24px;
+  }
 }
 
-input[type="text"] {
-  border: none !important;
+.mat-card {
+  margin-bottom: 20px;
 }
 
-.mat-list {
-  .mat-divider {
-    margin: 0px 0;
-    border-color: transparent;
+.title { // box titles
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 13px;
+  margin: -4px 0 16px !important;
+  .advanced-options {
+    float: right;
+    position: relative;
+    top: -5px;
+    right: -9px;
   }
 }
 
-.mat-expansion-panel {
-  box-shadow: none;
+.subtitle { // subtitles (eg. "privacy level" in anon
+  text-transform: uppercase;
+  margin: 20px 0 10px;
+  color: grey;
 }
 
-.mat-card {
-  padding: 0;
-  margin-bottom: 12px;
-  border-bottom: 0px solid $bg-shadow;
-  .send {
-    padding: 0 0 20px 0;
+.balance { // balance selection radio buttons
+  @extend %tfx;
+  padding: 8px 24px;
+  margin: 0 -24px !important;
+  font-family: $font;
+  &:hover {
+    background: $bg-hover;
   }
-  h5 {
-    text-transform: uppercase;
+  .name { // balance type
     font-weight: bold;
-    font-size: 12px;
+    font-size: 14px;
+  }
+  .desc { // available balance
+    color: $text-muted;
+    font-size: 11px;
+    .amount {
+      color: $color;
+      font-weight: 600;
+      margin-left: 5px;
+    }
   }
 }
 
-.mat-input-element {
-  width: calc(100% - 8px);
+.mat-icon {
+  width: auto;
+  height: auto;
+  font-size: 16px;
 }
 
-.mat-list-radio h5 {
-  margin-top: 15px;
-}
 
-.mat-radio-group {
-  background: #fff;
-}
+// ------ LAYOUT ------ //
 
-.mat-send-card {
-  padding: 10px 30px 10px 30px;
-  min-height: 100px;
-  height: auto;
-  font-family: $font;
+app-header {
+  .bottom-line { // line under tabs
+    border-bottom: 1px solid $bg-shadow;
+  }
 }
 
-.balance-label {
-  font-weight: bold;
-  text-transform: uppercase;
-  font-size: 12px;
+.privacy-level { // slider in Anon TXs
+  margin: 0 0 20px;
+  .privacy-label {
+    font-weight: bold;
+    padding-bottom: 10px;
+    cursor: pointer;
+    &.medium {
+      text-align: center;
+    }
+    &.high {
+      text-align: right;
+    }
+  }
 }
 
-.mat-list-radio .mat-radio-button {
-  margin-bottom: 0px;
-}
+.pay-to { // whole "pay to" card
+  padding-bottom: 1px;
 
-.privacy-label {
-  font-weight:bold;
-  padding-bottom: 10px;
-  cursor: pointer;
-  &.medium {
-    text-align: center;
+  .receiver-address { // recipient's addy & label
+    margin-bottom: 30px !important;
   }
-  &.high {
-    text-align: right;
+  .widget-help {
+    margin-top: 0;
   }
-}
 
-.actions {
-  margin: 25px 0 15px 0;
 }
 
-/* ------------------------------- *\
-    Buttons
-\* ------------------------------- */ 
-
-app-header {
+.actions {
+  text-align: right;
+  margin: 0;
   button {
-    background-color: $bg;
-    border: none;
-    padding: 3px 15px;
-    margin: 0 10px 0 0;
-    border-bottom: 0px solid $bg-shadow;
-    float: right;
-    font-weight: 500;
-    color: $text;
-  }
-  .bottom-line {
-    border-bottom: 1px solid $bg-shadow;
-  } 
-  button.advanced-options { // show/hide advanced options
-    color: $text-muted;
-    &:hover {
-      color: $text;
-    }
-    mat-icon {
-      font-size: 16px;
-      width: auto;
-      height: auto;
-      margin-right: 5px;
-      line-height: 1.5;
-      background: transparent;
-      top: 0;
-    }
-    span {
-      text-transform: uppercase;
-      font-size: 13px;
-      font-weight: normal;
-    }
+    margin: 0 0 0 12px;
   }
 }
 
 
+// ------ FORMS ------ //
 
-.mat-icon {
-  margin-right: 5px;
-  width: auto;
-  height: auto;
-  font-size: 16px;
+mat-form-field {
+  &.full-width {
+    width: 100%;
+  }
+}
+
+.underliningSelect {
   position: relative;
-  top: -1px;
 }
\ No newline at end of file
diff --git a/src/app/wallet/wallet/send/send.component.ts b/src/app/wallet/wallet/send/send.component.ts
index 1c7af766c..4016235a4 100644
--- a/src/app/wallet/wallet/send/send.component.ts
+++ b/src/app/wallet/wallet/send/send.component.ts
@@ -32,7 +32,7 @@ export class SendComponent {
   type: string = 'sendPayment';
   advanced: boolean = false;
   progress: number = 10;
-  advancedText: string = 'Show Advanced options'
+  advancedText: string = 'Advanced options'
   // TODO: Create proper Interface / type
   send: any = {
     input: 'balance',
@@ -74,7 +74,7 @@ export class SendComponent {
 
   /** Toggle advanced controls and settings */
   toggleAdvanced() {
-    this.advancedText = (this.advanced ? 'show' : 'hide') + ' Advanced options';
+    this.advancedText = ' Advanced options';
     this.advanced = !this.advanced;
   }
 
diff --git a/src/app/wallet/wallet/shared/address-table/address-table.component.html b/src/app/wallet/wallet/shared/address-table/address-table.component.html
index 41151d64a..a088fcc82 100644
--- a/src/app/wallet/wallet/shared/address-table/address-table.component.html
+++ b/src/app/wallet/wallet/shared/address-table/address-table.component.html
@@ -82,10 +82,10 @@
   </div>
 </div>
 
-<mat-paginator
+<app-paginator
   *ngIf="displayPagination && getSinglePage().length>0"
   [length]="getTotalAddressCount()"
   [pageSize]="getMaxAddressesPerPage()"
   [pageSizeOptions]="PAGE_SIZE_OPTIONS"
   (page)="pageChanged($event)">
-</mat-paginator>
+</app-paginator>
diff --git a/src/app/wallet/wallet/shared/address-table/address-table.component.ts b/src/app/wallet/wallet/shared/address-table/address-table.component.ts
index 166cb0a86..42ce898df 100644
--- a/src/app/wallet/wallet/shared/address-table/address-table.component.ts
+++ b/src/app/wallet/wallet/shared/address-table/address-table.component.ts
@@ -54,7 +54,6 @@ export class AddressTableComponent implements OnInit {
   currentPage: number = 1;
   @Input() addressDisplayAmount: number = 5;
   PAGE_SIZE_OPTIONS: Array<number> = [5, 10, 20];
-  MAX_ADDRESSES_PER_PAGE: number = 5;
 
   log: any = Log.create('address-table.component');
 
@@ -170,7 +169,7 @@ export class AddressTableComponent implements OnInit {
 
   pageChanged(event: any) {
     if (event.pageIndex !== undefined) {
-      this.MAX_ADDRESSES_PER_PAGE = event.pageSize;
+      this.addressDisplayAmount = event.pageSize;
       this.currentPage = event.pageIndex + 1;
       this.log.d(event.pageIndex);
     }
diff --git a/src/app/wallet/wallet/shared/transaction-table/transaction-table.component.html b/src/app/wallet/wallet/shared/transaction-table/transaction-table.component.html
index 5991c6e02..0e8a1f0ec 100644
--- a/src/app/wallet/wallet/shared/transaction-table/transaction-table.component.html
+++ b/src/app/wallet/wallet/shared/transaction-table/transaction-table.component.html
@@ -25,7 +25,8 @@
         </mat-panel-title>
 
         <!-- Confirmations -->
-        <mat-panel-title fxFlex="1 0 50px" fxFlex.lt-md="100" *ngIf="display.confirmations" class="history_confirmation" [ngClass]="styleConfimations(tx.getConfirmationCount())">
+        <mat-panel-title fxFlex="1 0 50px" fxFlex.lt-md="100" *ngIf="display.confirmations" class="history_confirmation"
+                         [ngClass]="styleConfimations(tx.getConfirmationCount())">
           <span mat-line matTooltip="Confirmations" matTooltipPosition="before">
             <mat-icon fontSet="partIcon" fontIcon="part-circle-check" class="confirmations"></mat-icon>
             {{ tx.getConfirmationCount() }}
@@ -34,7 +35,7 @@
 
         <!-- Category icon -->
         <mat-panel-title fxFlex="1 0 165px" fxFlex.lt-md="100" *ngIf="display.category" class="history_cat_icon"
-                        [ngSwitch]="tx.category">
+                         [ngSwitch]="tx.category">
           <span *ngSwitchCase="'stake'" class="tx-type staked">
             <mat-icon fontSet="partIcon" fontIcon="part-stake"></mat-icon>Staked
           </span>
@@ -44,12 +45,12 @@
           <span *ngSwitchCase="'send'" class="tx-type sent">
             <mat-icon fontSet="partIcon" fontIcon="part-send" color="warn"></mat-icon>Sent
             <mat-icon class="narration" *ngIf="tx.getNarration()" fontSet="partIcon" fontIcon="part-pen-1"
-                     matTooltip="Narration included" matTooltipPosition="after"></mat-icon>
+                     matTooltip="{{tx.getNarration()}}" matTooltipPosition="after"></mat-icon>
           </span>
           <span *ngSwitchCase="'receive'" class="tx-type received">
             <mat-icon fontSet="partIcon" fontIcon="part-receive" color="primary"></mat-icon>Received
             <mat-icon class="narration" *ngIf="tx.getNarration()" fontSet="partIcon" fontIcon="part-pen-1"
-                     matTooltip="Narration included" matTooltipPosition="after"></mat-icon>
+                     matTooltip="{{tx.getNarration()}}" matTooltipPosition="after"></mat-icon>
           </span>
           <span *ngSwitchCase="'internal_transfer'" class="tx-type received">
             <mat-icon fontSet="partIcon" fontIcon="part-transfer" color="primary"></mat-icon>Balance transfer
@@ -129,13 +130,12 @@
     </mat-expansion-panel>
   </ng-container>
 
-  <mat-paginator
+  <app-paginator
     *ngIf="display.pagination && txService.txs.length > 0"
     [length]="txService.txCount"
     [pageSize]="txService.MAX_TXS_PER_PAGE"
     [pageSizeOptions]="txService.PAGE_SIZE_OPTIONS"
     (page)="pageChanged($event)">
-  </mat-paginator>
-
+  </app-paginator>
 
 </app-grid>
diff --git a/src/app/wallet/wallet/shared/transaction.model.ts b/src/app/wallet/wallet/shared/transaction.model.ts
index 667545beb..d38a33611 100644
--- a/src/app/wallet/wallet/shared/transaction.model.ts
+++ b/src/app/wallet/wallet/shared/transaction.model.ts
@@ -155,13 +155,12 @@ export class Transaction {
 
   /* Narration */
   public getNarration() {
-    if (this.n0) {
-      return this.n0;
-    } else if (this.n1) {
-      return this.n1;
-    } else {
-      return false
+    for (const key in this.outputs) {
+      if (this.outputs[key] && this.outputs[key].narration) {
+        return this.outputs[key].narration;
+      }
     }
+    return false
   }
 
 
diff --git a/src/assets/_config.scss b/src/assets/_config.scss
index 9abc22a6e..7c3beb79b 100644
--- a/src/assets/_config.scss
+++ b/src/assets/_config.scss
@@ -18,6 +18,7 @@ $text-muted: #7E8790; // grey (for section titles, descriptions etc.)
 
 // bg/element colors
 $bg: #fafafa; // light grey bg color
+$bg-hover: darken($bg, 2%);
 $bg-black: #222828; // sidebar
 $bg-shadow: #dcdcdc; // lines, box shadows etc.
 
diff --git a/src/assets/theme.scss b/src/assets/theme.scss
index a363a4e23..660e4c243 100644
--- a/src/assets/theme.scss
+++ b/src/assets/theme.scss
@@ -56,13 +56,24 @@ mat-card.mat-card { // FIXME: remove the !important and solve overwriting
 
 
 // ------ TABS ------ //
-/*
+
 .mat-tab-group {
-  .mat-tab-header {
-    background: white; // needs to fix the search bg first
+  .mat-tab-label {
+    &.mat-tab-label-active { // keep active tabs black (not grey)
+      opacity: 1;
+      .mat-icon { opacity: 0.9; }
+    }
+    .mat-icon {
+      @extend %tfx;
+      font-size: 14px;
+      margin-right: 8px;
+      position: relative;
+      top: 0.02em;
+      opacity: 0.5;
+    }
   }
 }
-*/
+
 
 
 // ------ EXPANSION PANELS ------ //
@@ -95,11 +106,11 @@ mat-card.mat-card { // FIXME: remove the !important and solve overwriting
 input {
   &.verify-sucess {
     color: darken($color, 7%) !important; // #57a800
-    background-color: rgba($color, 0.07) !important; // #edfad7
+    //background-color: rgba($color, 0.07) !important; // #edfad7
   }
   &.verify-error {
     color: darken($color-alert, 5%);
-    background: rgba($color-alert, 0.1) !important;
+    //background: rgba($color-alert, 0.1) !important;
   }
 }
 
@@ -160,6 +171,15 @@ input {
     Forms
 \* ------------------------------- */
 
+.mat-form-field {
+  font-family: $font;
+  &:not(:first-child) {
+    .mat-input-infix {
+      border-top: none; // remove the big gap vertical between 2+ inputs
+    }
+  }
+}
+
 input[type="text"] {
   border: none;
 }
@@ -270,10 +290,15 @@ input[type="text"] {
 
 /* ------------------------------- *\
     Pagination
-\* ------------------------------- */ 
+\* ------------------------------- */
 
 .mat-paginator {
   margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 56px;
+  padding: 0 8px;
   border-bottom: 1px solid $bg-shadow;
   font-family: $font;
   .mat-icon-button {
@@ -387,9 +412,29 @@ input[type="text"] {
   }
 }
 
+.mat-radio-group {
+  // send: full-width clickable radios
+  &.block-radio {
+    .mat-radio-button .mat-radio-label {
+      width: 100%;
+    }
+  }
+}
 
+.mat-form-field {
+  &.larger { // larger inputs
+    font-size: 14px;
+  }
+}
 
-
+.mat-button {
+  &.small { // smaller buttons
+    min-width: auto;
+    line-height: 29px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+}
 
 
 
@@ -402,12 +447,12 @@ input[type="text"] {
 \* ------------------------------- */
 /*
 .mat-right { // still needed for TX details
-  text-align: right; 
-  text-overflow: ellipsis; 
-  white-space: nowrap; 
-  overflow: hidden; 
-  height: 18px; 
-} 
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 18px;
+}
 
 
 .details-address {
@@ -522,4 +567,4 @@ panel-header-title {
 
 @media (max-width: 640px) {
 }
-*/
\ No newline at end of file
+*/