diff --git a/package.json b/package.json
index 8a98e6d..7347239 100644
--- a/package.json
+++ b/package.json
@@ -91,12 +91,14 @@
     "src/**/*.{js,ts,scss,md,html,json}": [
       "prettier --write",
       "git add"
+    ],
+    "*.scss": [
+      "stylelint src/**/*.scss"
     ]
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged && npm run format:lint && lint-staged",
-      "pre-push": "ng build --prod"
+      "pre-commit": "npx pretty-quick --staged && npm run format:lint && lint-staged"
     }
   }
 }
diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html
index 501293c..3e6e5e0 100644
--- a/src/app/auth/auth.component.html
+++ b/src/app/auth/auth.component.html
@@ -8,20 +8,25 @@
             <h1 class="text-white">CICADA</h1>
           </a>
         </mat-card-title>
-        <div  id="one" style="display: block" class="card-body p-4">
-
+        <div id="one" style="display: block" class="card-body p-4">
           <div class="text-center w-75 m-auto">
             <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
           </div>
 
           <form [formGroup]="keyForm" (ngSubmit)="onSubmit()">
-
             <mat-form-field appearance="outline" class="full-width">
               <mat-label>Private Key</mat-label>
-              <textarea matInput style="height: 30rem" formControlName="key" placeholder="Enter your private key..."
-                        [errorStateMatcher]="matcher"></textarea>
+              <textarea
+                matInput
+                style="height: 30rem"
+                formControlName="key"
+                placeholder="Enter your private key..."
+                [errorStateMatcher]="matcher"
+              ></textarea>
               <div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">
-                <mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
+                <mat-error *ngIf="keyFormStub.key.errors.required"
+                  >Private Key is required.</mat-error
+                >
               </div>
             </mat-form-field>
 
@@ -29,20 +34,24 @@
               <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
               Add Key
             </button>
-
           </form>
         </div>
-        <div  id="two" style="display: none" class="card-body p-4 align-items-center">
-
+        <div id="two" style="display: none" class="card-body p-4 align-items-center">
           <div class="text-center w-75 m-auto">
             <h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>
-            <button mat-raised-button matRipple color="primary" type="submit" (click)="login()"> Login </button>
+            <button mat-raised-button matRipple color="primary" type="submit" (click)="login()">
+              Login
+            </button>
           </div>
 
           <div class="row mt-3">
             <div class="col-12 text-center">
-              <p class="text-muted">Change private key? <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a></p>
-            </div> <!-- end col-->
+              <p class="text-muted">
+                Change private key?
+                <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a>
+              </p>
+            </div>
+            <!-- end col-->
           </div>
           <!-- end row -->
         </div>
diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html
index 22d8df3..3f98057 100644
--- a/src/app/pages/accounts/account-details/account-details.component.html
+++ b/src/app/pages/accounts/account-details/account-details.component.html
@@ -14,30 +14,44 @@
         <ol class="breadcrumb">
           <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
           <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
-          <li *ngIf="account" class="breadcrumb-item active" aria-current="page">{{account?.vcard?.fn[0].value}}</li>
+          <li *ngIf="account" class="breadcrumb-item active" aria-current="page">
+            {{ account?.vcard?.fn[0].value }}
+          </li>
         </ol>
       </nav>
       <div *ngIf="!account" class="text-center">
-        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
+        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem">
           <span class="sr-only">Loading...</span>
         </div>
-        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
+        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem">
           <span class="sr-only">Loading...</span>
         </div>
-        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
+        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem">
           <span class="sr-only">Loading...</span>
         </div>
       </div>
       <div *ngIf="account" class="card mb-3">
         <div class="row card-body">
           <h3>
-            <strong> {{account?.vcard?.fn[0].value}} </strong>
+            <strong> {{ account?.vcard?.fn[0].value }} </strong>
           </h3>
-          <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
-          <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | unixDate}}</span>
-          <span class="ml-2"><strong>Address:</strong>
-            <a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a>
-            <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress()" alt="Copy">
+          <span class="ml-auto"
+            ><strong>Balance:</strong> {{ account?.balance | tokenRatio }}
+            {{ tokenSymbol | uppercase }}</span
+          >
+          <span class="ml-2"
+            ><strong>Created:</strong> {{ account?.date_registered | unixDate }}</span
+          >
+          <span class="ml-2"
+            ><strong>Address:</strong>
+            <a href="{{ bloxbergLink }}" target="_blank"> {{ accountAddress }} </a>
+            <img
+              src="assets/images/checklist.svg"
+              class="ml-2"
+              height="20rem"
+              (click)="copyAddress()"
+              alt="Copy"
+            />
           </span>
         </div>
       </div>
@@ -45,85 +59,145 @@
         <div class="card-body">
           <form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()">
             <div class="row form-inline">
-
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label>First Name: *</mat-label>
-                  <input matInput type="text" id="firstName" placeholder="{{account?.vcard?.fn[0].value.split(' ')[0]}}"
-                         value="{{account?.vcard?.fn[0].value.split(' ')[0]}}" formControlName="firstName" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.firstName.errors">First Name is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    id="firstName"
+                    placeholder="{{ account?.vcard?.fn[0].value.split(' ')[0] }}"
+                    value="{{ account?.vcard?.fn[0].value.split(' ')[0] }}"
+                    formControlName="firstName"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.firstName.errors"
+                    >First Name is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label>Last Name(s): *</mat-label>
-                  <input matInput type="text" id="lastName" placeholder="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}"
-                         value="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}" formControlName="lastName" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.lastName.errors">Last Name is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    id="lastName"
+                    placeholder="{{ account?.vcard?.fn[0].value.split(' ').slice(1).join(' ') }}"
+                    value="{{ account?.vcard?.fn[0].value.split(' ').slice(1).join(' ') }}"
+                    formControlName="lastName"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.lastName.errors"
+                    >Last Name is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label>Phone Number: </mat-label>
-                  <input matInput type="text" id="phoneNumber" placeholder="{{account?.vcard?.tel[0].value}}"
-                         value="{{account?.vcard?.tel[0].value}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    id="phoneNumber"
+                    placeholder="{{ account?.vcard?.tel[0].value }}"
+                    value="{{ account?.vcard?.tel[0].value }}"
+                    formControlName="phoneNumber"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors"
+                    >Phone Number is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label>Age: </mat-label>
-                  <input matInput type="text" id="age" placeholder="{{account?.age}}"
-                         value="{{account?.age}}" formControlName="age" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.age.errors">Age is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    id="age"
+                    placeholder="{{ account?.age }}"
+                    value="{{ account?.age }}"
+                    formControlName="age"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.age.errors"
+                    >Age is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> ACCOUNT TYPE: </mat-label>
-                  <mat-select id="accountType" [(value)]="account.type" formControlName="type"
-                              [errorStateMatcher]="matcher">
+                  <mat-select
+                    id="accountType"
+                    [(value)]="account.type"
+                    formControlName="type"
+                    [errorStateMatcher]="matcher"
+                  >
                     <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                      {{accountType | uppercase}}
+                      {{ accountType | uppercase }}
                     </mat-option>
                   </mat-select>
-                  <mat-error *ngIf="submitted && accountInfoFormStub.type.errors">Type is required.</mat-error>
+                  <mat-error *ngIf="submitted && accountInfoFormStub.type.errors"
+                    >Type is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label>Bio: </mat-label>
-                  <input matInput type="text" id="bio" placeholder="{{account?.products}}" value="{{account?.products}}"
-                         formControlName="bio" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    id="bio"
+                    placeholder="{{ account?.products }}"
+                    value="{{ account?.products }}"
+                    formControlName="bio"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors"
+                    >Bio is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> GENDER: </mat-label>
-                  <mat-select id="gender" [(value)]="account.gender" formControlName="gender"
-                              [errorStateMatcher]="matcher">
+                  <mat-select
+                    id="gender"
+                    [(value)]="account.gender"
+                    formControlName="gender"
+                    [errorStateMatcher]="matcher"
+                  >
                     <mat-option *ngFor="let gender of genders" [value]="gender">
-                      {{gender | uppercase}}
+                      {{ gender | uppercase }}
                     </mat-option>
                   </mat-select>
-                  <mat-error *ngIf="submitted && accountInfoFormStub.gender.errors">Gender is required.</mat-error>
+                  <mat-error *ngIf="submitted && accountInfoFormStub.gender.errors"
+                    >Gender is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> BUSINESS CATEGORY: </mat-label>
-                  <mat-select id="businessCategory" [(value)]="account.category" formControlName="businessCategory"
-                              [errorStateMatcher]="matcher">
+                  <mat-select
+                    id="businessCategory"
+                    [(value)]="account.category"
+                    formControlName="businessCategory"
+                    [errorStateMatcher]="matcher"
+                  >
                     <mat-option *ngFor="let category of categories" [value]="category">
-                      {{category | titlecase}}
+                      {{ category | titlecase }}
                     </mat-option>
                   </mat-select>
                   <mat-error *ngIf="submitted && accountInfoFormStub.businessCategory.errors">
@@ -135,9 +209,15 @@
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label>User Location: </mat-label>
-                  <input matInput type="text" id="userLocation" placeholder="{{account?.location.area_name}}"
-                         value="{{account?.location.area_name}}" formControlName="userLocation"
-                         [errorStateMatcher]="matcher">
+                  <input
+                    matInput
+                    type="text"
+                    id="userLocation"
+                    placeholder="{{ account?.location.area_name }}"
+                    value="{{ account?.location.area_name }}"
+                    formControlName="userLocation"
+                    [errorStateMatcher]="matcher"
+                  />
                   <mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors">
                     User Location is required.
                   </mat-error>
@@ -147,50 +227,82 @@
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> LOCATION: </mat-label>
-                  <mat-select id="location" [(value)]="account.location.area" formControlName="location"
-                              [errorStateMatcher]="matcher">
+                  <mat-select
+                    id="location"
+                    [(value)]="account.location.area"
+                    formControlName="location"
+                    [errorStateMatcher]="matcher"
+                  >
                     <mat-option *ngFor="let area of areaNames" [value]="area">
-                      {{area | uppercase}}
+                      {{ area | uppercase }}
                     </mat-option>
                   </mat-select>
-                  <mat-error *ngIf="submitted && accountInfoFormStub.location.errors">Location is required.</mat-error>
+                  <mat-error *ngIf="submitted && accountInfoFormStub.location.errors"
+                    >Location is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> LOCATION TYPE: </mat-label>
-                  <mat-select id="locationType" [(value)]="account.location.area_type" formControlName="locationType"
-                              [errorStateMatcher]="matcher">
+                  <mat-select
+                    id="locationType"
+                    [(value)]="account.location.area_type"
+                    formControlName="locationType"
+                    [errorStateMatcher]="matcher"
+                  >
                     <mat-option *ngFor="let type of areaTypes" [value]="type">
-                      {{type | uppercase}}
+                      {{ type | uppercase }}
                     </mat-option>
                   </mat-select>
-                  <mat-error *ngIf="submitted && accountInfoFormStub.locationType.errors">Location Type is required.</mat-error>
+                  <mat-error *ngIf="submitted && accountInfoFormStub.locationType.errors"
+                    >Location Type is required.</mat-error
+                  >
                 </mat-form-field>
               </div>
 
               <div class="col-md-6 col-lg-4">
-                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary mb-3">
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  class="btn btn-outline-primary mb-3"
+                >
                   Add User KYC
                 </button>
               </div>
 
               <div class="col-md-6 col-lg-4">
-                <button mat-raised-button color="primary" type="button" class="btn btn-outline-success mb-3"
-                        (click)="resetPin()">
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  class="btn btn-outline-success mb-3"
+                  (click)="resetPin()"
+                >
                   Reset Pin
                 </button>
               </div>
 
               <div class="col-md-6 col-lg-4">
-                <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger mb-3">
+                <button
+                  mat-raised-button
+                  color="warn"
+                  type="button"
+                  class="btn btn-outline-danger mb-3"
+                >
                   Delete User
                 </button>
               </div>
 
               <div class="col-md-6 col-lg-4">
-                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary">
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="submit"
+                  class="btn btn-outline-primary"
+                >
                   SAVE DETAILS
                 </button>
               </div>
@@ -200,32 +312,32 @@
       </div>
 
       <div class="card mb-3">
-        <mat-card-title class="card-header">
-          USER
-        </mat-card-title>
+        <mat-card-title class="card-header"> USER </mat-card-title>
         <div class="card-body">
           <div class="table-responsive">
             <table class="table table-striped table-bordered table-hover">
-              <caption> 1 user </caption>
+              <caption>
+                1 user
+              </caption>
               <thead class="thead-dark">
-              <tr>
-                <th scope="col">NAME</th>
-                <th scope="col">BALANCE</th>
-                <th scope="col">CREATED</th>
-                <th scope="col">STATUS</th>
-              </tr>
+                <tr>
+                  <th scope="col">NAME</th>
+                  <th scope="col">BALANCE</th>
+                  <th scope="col">CREATED</th>
+                  <th scope="col">STATUS</th>
+                </tr>
               </thead>
               <tbody>
-              <tr>
-                <td>{{account?.vcard?.fn[0].value}}</td>
-                <td>{{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }}</td>
-                <td>{{account?.date_registered | unixDate}}</td>
-                <td>
-                  <span class="badge badge-success badge-pill">
-                    {{accountStatus}}
-                  </span>
-                </td>
-              </tr>
+                <tr>
+                  <td>{{ account?.vcard?.fn[0].value }}</td>
+                  <td>{{ account?.balance | tokenRatio }} {{ tokenSymbol | uppercase }}</td>
+                  <td>{{ account?.date_registered | unixDate }}</td>
+                  <td>
+                    <span class="badge badge-success badge-pill">
+                      {{ accountStatus }}
+                    </span>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -234,135 +346,216 @@
 
       <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
         <mat-tab label="Transactions">
-          <app-transaction-details [transaction]="transaction" (closeWindow)="transaction = $event"></app-transaction-details>
+          <app-transaction-details
+            [transaction]="transaction"
+            (closeWindow)="transaction = $event"
+          ></app-transaction-details>
           <div class="card mt-1">
             <div class="card-header">
               <div class="row">
                 <mat-form-field appearance="outline">
                   <mat-label> TRANSACTION TYPE </mat-label>
-                  <mat-select id="transferSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
+                  <mat-select
+                    id="transferSelect"
+                    [(value)]="transactionsType"
+                    (selectionChange)="filterTransactions()"
+                  >
                     <mat-option value="all">ALL TRANSFERS</mat-option>
-                    <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
-                      {{transactionType | uppercase}}
+                    <mat-option
+                      *ngFor="let transactionType of transactionsTypes"
+                      [value]="transactionType"
+                    >
+                      {{ transactionType | uppercase }}
                     </mat-option>
                   </mat-select>
                 </mat-form-field>
-                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(transactions, 'transactions')"> EXPORT </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  class="btn btn-outline-primary ml-auto mr-2"
+                  (click)="downloadCsv(transactions, 'transactions')"
+                >
+                  EXPORT
+                </button>
               </div>
             </div>
 
             <div class="card-body">
               <mat-form-field appearance="outline">
                 <mat-label> Filter </mat-label>
-                <input matInput type="text" (keyup)="doTransactionFilter($event.target.value)" placeholder="Filter">
+                <input
+                  matInput
+                  type="text"
+                  (keyup)="doTransactionFilter($event.target.value)"
+                  placeholder="Filter"
+                />
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
 
-              <table mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
-                         #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>
-
+              <table
+                mat-table
+                class="mat-elevation-z10"
+                [dataSource]="transactionsDataSource"
+                matSort
+                matSortActive="created"
+                #TransactionTableSort="matSort"
+                matSortDirection="asc"
+                matSortDisableClear
+              >
                 <ng-container matColumnDef="sender">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
-                  <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value || transaction.from}} </td>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Sender</th>
+                  <td mat-cell *matCellDef="let transaction">
+                    {{ transaction?.sender?.vcard.fn[0].value || transaction.from }}
+                  </td>
                 </ng-container>
 
                 <ng-container matColumnDef="recipient">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
-                  <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value || transaction.to}} </td>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Recipient</th>
+                  <td mat-cell *matCellDef="let transaction">
+                    {{ transaction?.recipient?.vcard.fn[0].value || transaction.to }}
+                  </td>
                 </ng-container>
 
                 <ng-container matColumnDef="value">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
                   <td mat-cell *matCellDef="let transaction">
-                    <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
-                    <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
+                    <span *ngIf="transaction.type == 'transaction'"
+                      >{{ transaction?.value | tokenRatio }} {{ tokenSymbol | uppercase }}</span
+                    >
+                    <span *ngIf="transaction.type == 'conversion'"
+                      >{{ transaction?.toValue | tokenRatio }} {{ tokenSymbol | uppercase }}</span
+                    >
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="created">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
-                  <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | unixDate}} </td>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
+                  <td mat-cell *matCellDef="let transaction">
+                    {{ transaction?.tx.timestamp | unixDate }}
+                  </td>
                 </ng-container>
 
                 <ng-container matColumnDef="type">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>TYPE</th>
                   <td mat-cell *matCellDef="let transaction">
-                    <span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
+                    <span class="badge badge-success badge-pill"> {{ transaction?.type }} </span>
                   </td>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
-                         (click)="viewTransaction(transaction)"></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let transaction; columns: transactionsDisplayedColumns"
+                  matRipple
+                  (click)="viewTransaction(transaction)"
+                ></tr>
               </table>
 
-              <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
-                             [pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>
-
+              <mat-paginator
+                #TransactionTablePaginator="matPaginator"
+                [pageSize]="transactionsDefaultPageSize"
+                [pageSizeOptions]="transactionsPageSizeOptions"
+                showFirstLastButtons
+              ></mat-paginator>
             </div>
           </div>
         </mat-tab>
 
         <mat-tab label="Users">
           <div class="card mt-1">
-            <mat-card-title class="card-header">
-              Accounts
-            </mat-card-title>
+            <mat-card-title class="card-header"> Accounts </mat-card-title>
             <div class="card-body">
               <div class="row card-header">
                 <mat-form-field appearance="outline">
                   <mat-label> ACCOUNT TYPE </mat-label>
-                  <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
+                  <mat-select
+                    id="typeSelect"
+                    [(value)]="accountsType"
+                    (selectionChange)="filterAccounts()"
+                  >
                     <mat-option value="all">ALL</mat-option>
                     <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                      {{accountType | uppercase}}
+                      {{ accountType | uppercase }}
                     </mat-option>
                   </mat-select>
                 </mat-form-field>
-                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(accounts, 'accounts')"> EXPORT </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  class="btn btn-outline-primary ml-auto mr-2"
+                  (click)="downloadCsv(accounts, 'accounts')"
+                >
+                  EXPORT
+                </button>
               </div>
 
               <mat-form-field appearance="outline">
                 <mat-label> Filter </mat-label>
-                <input matInput type="text" (keyup)="doUserFilter($event.target.value)" placeholder="Filter">
+                <input
+                  matInput
+                  type="text"
+                  (keyup)="doUserFilter($event.target.value)"
+                  placeholder="Filter"
+                />
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
 
-              <mat-table class="mat-elevation-z10" [dataSource]="userDataSource" matSort #UserTableSort="matSort"
-                         matSortActive="created" matSortDirection="desc" matSortDisableClear>
-
+              <mat-table
+                class="mat-elevation-z10"
+                [dataSource]="userDataSource"
+                matSort
+                #UserTableSort="matSort"
+                matSortActive="created"
+                matSortDirection="desc"
+                matSortDisableClear
+              >
                 <ng-container matColumnDef="name">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user?.vcard.fn[0].value }} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="phone">
-                  <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value}} </mat-cell>
+                  <mat-header-cell *matHeaderCellDef mat-sort-header>
+                    PHONE NUMBER
+                  </mat-header-cell>
+                  <mat-cell *matCellDef="let user"> {{ user?.vcard.tel[0].value }} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="created">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user?.date_registered | unixDate}} </mat-cell>
+                  <mat-cell *matCellDef="let user">
+                    {{ user?.date_registered | unixDate }}
+                  </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="balance">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user?.balance | tokenRatio}} {{tokenSymbol | uppercase}} </mat-cell>
+                  <mat-cell *matCellDef="let user">
+                    {{ user?.balance | tokenRatio }} {{ tokenSymbol | uppercase }}
+                  </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="location">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user?.location.area_name }} </mat-cell>
                 </ng-container>
 
-                <mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
-                <mat-row *matRowDef="let account; columns: userDisplayedColumns" (click)="viewAccount(account)"
-                         matRipple></mat-row>
+                <mat-header-row *matHeaderRowDef="userDisplayedColumns"></mat-header-row>
+                <mat-row
+                  *matRowDef="let account; columns: userDisplayedColumns"
+                  (click)="viewAccount(account)"
+                  matRipple
+                ></mat-row>
               </mat-table>
 
-              <mat-paginator #UserTablePaginator="matPaginator" [pageSize]="usersDefaultPageSize"
-                             [pageSizeOptions]="usersPageSizeOptions" showFirstLastButtons></mat-paginator>
+              <mat-paginator
+                #UserTablePaginator="matPaginator"
+                [pageSize]="usersDefaultPageSize"
+                [pageSizeOptions]="usersPageSizeOptions"
+                showFirstLastButtons
+              ></mat-paginator>
             </div>
           </div>
         </mat-tab>
diff --git a/src/app/pages/accounts/account-search/account-search.component.html b/src/app/pages/accounts/account-search/account-search.component.html
index 56a17cc..6698305 100644
--- a/src/app/pages/accounts/account-search/account-search.component.html
+++ b/src/app/pages/accounts/account-search/account-search.component.html
@@ -18,33 +18,61 @@
         </ol>
       </nav>
       <div class="card">
-        <mat-card-title class="card-header">
-          Accounts
-        </mat-card-title>
+        <mat-card-title class="card-header"> Accounts </mat-card-title>
         <div class="card-body">
           <mat-tab-group>
             <mat-tab label="Phone Number">
               <form [formGroup]="phoneSearchForm" (ngSubmit)="onPhoneSearch()">
                 <mat-form-field appearance="outline">
                   <mat-label> Search </mat-label>
-                  <input matInput type="text" placeholder="Search by phone number" formControlName="phoneNumber" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    placeholder="Search by phone number"
+                    formControlName="phoneNumber"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors"
+                    >Phone Number is required.</mat-error
+                  >
                   <mat-icon matSuffix>phone</mat-icon>
                   <mat-hint>Phone Number</mat-hint>
                 </mat-form-field>
-                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3"> SEARCH </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="submit"
+                  class="btn btn-outline-primary ml-3"
+                >
+                  SEARCH
+                </button>
               </form>
             </mat-tab>
             <mat-tab label="Account Address">
               <form [formGroup]="addressSearchForm" (ngSubmit)="onAddressSearch()">
                 <mat-form-field appearance="outline">
                   <mat-label> Search </mat-label>
-                  <input matInput type="text" placeholder="Search by account address" formControlName="address" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors">Account Address is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    placeholder="Search by account address"
+                    formControlName="address"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors"
+                    >Account Address is required.</mat-error
+                  >
                   <mat-icon matSuffix>view_in_ar</mat-icon>
                   <mat-hint>Account Address</mat-hint>
                 </mat-form-field>
-                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3"> SEARCH </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="submit"
+                  class="btn btn-outline-primary ml-3"
+                >
+                  SEARCH
+                </button>
               </form>
             </mat-tab>
           </mat-tab-group>
diff --git a/src/app/pages/accounts/accounts.component.html b/src/app/pages/accounts/accounts.component.html
index 43628aa..a52dda5 100644
--- a/src/app/pages/accounts/accounts.component.html
+++ b/src/app/pages/accounts/accounts.component.html
@@ -17,63 +17,99 @@
         </ol>
       </nav>
       <div class="card">
-        <mat-card-title class="card-header">
-          Accounts
-        </mat-card-title>
+        <mat-card-title class="card-header"> Accounts </mat-card-title>
         <div class="card-body">
           <div class="row card-header">
             <mat-form-field appearance="outline">
               <mat-label> ACCOUNT TYPE </mat-label>
-              <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
+              <mat-select
+                id="typeSelect"
+                [(value)]="accountsType"
+                (selectionChange)="filterAccounts()"
+              >
                 <mat-option value="all">ALL</mat-option>
                 <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                  {{accountType | uppercase}}
+                  {{ accountType | uppercase }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" routerLink="/accounts/search"> SEARCH </button>
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary mr-2" (click)="downloadCsv()"> EXPORT </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary ml-auto mr-2"
+              routerLink="/accounts/search"
+            >
+              SEARCH
+            </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary mr-2"
+              (click)="downloadCsv()"
+            >
+              EXPORT
+            </button>
           </div>
 
           <mat-form-field appearance="outline">
             <mat-label> Filter </mat-label>
-            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+            <input
+              matInput
+              type="text"
+              (keyup)="doFilter($event.target.value)"
+              placeholder="Filter"
+            />
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
-          <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="created"
-                     matSortDirection="desc" matSortDisableClear>
-
+          <mat-table
+            class="mat-elevation-z10"
+            [dataSource]="dataSource"
+            matSort
+            matSortActive="created"
+            matSortDirection="desc"
+            matSortDisableClear
+          >
             <ng-container matColumnDef="name">
               <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.vcard.fn[0].value }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="phone">
               <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.vcard.tel[0].value }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="created">
               <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.date_registered | unixDate}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.date_registered | unixDate }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="balance">
               <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.balance | tokenRatio}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.balance | tokenRatio }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="location">
               <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.location.area_name }} </mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-            <mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row>
+            <mat-row
+              *matRowDef="let account; columns: displayedColumns"
+              (click)="viewAccount(account)"
+              matRipple
+            ></mat-row>
           </mat-table>
 
-          <mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
+          <mat-paginator
+            [pageSize]="defaultPageSize"
+            [pageSizeOptions]="pageSizeOptions"
+            showFirstLastButtons
+          ></mat-paginator>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/accounts/create-account/create-account.component.html b/src/app/pages/accounts/create-account/create-account.component.html
index 41a82a9..9d411e7 100644
--- a/src/app/pages/accounts/create-account/create-account.component.html
+++ b/src/app/pages/accounts/create-account/create-account.component.html
@@ -18,61 +18,110 @@
         </ol>
       </nav>
       <div class="card">
-        <mat-card-title class="card-header text-center">
-          CREATE A USER ACCOUNT
-        </mat-card-title>
+        <mat-card-title class="card-header text-center"> CREATE A USER ACCOUNT </mat-card-title>
         <div class="card-body">
           <form class="row form-inline" [formGroup]="createForm" (ngSubmit)="onSubmit()">
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Account Type: </mat-label>
-                <mat-select id="accountType" formControlName="accountType" [errorStateMatcher]="matcher">
+                <mat-select
+                  id="accountType"
+                  formControlName="accountType"
+                  [errorStateMatcher]="matcher"
+                >
                   <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                    {{accountType | uppercase}}
+                    {{ accountType | uppercase }}
                   </mat-option>
                 </mat-select>
-                <mat-error *ngIf="submitted && createFormStub.accountType.errors">Account type is required.</mat-error>
-              </mat-form-field><br>
+                <mat-error *ngIf="submitted && createFormStub.accountType.errors"
+                  >Account type is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>ID Number: </mat-label>
-                <input matInput type="text" id="idNumber" placeholder="ID Number" formControlName="idNumber" [errorStateMatcher]="matcher">
-                <mat-error *ngIf="submitted && createFormStub.idNumber.errors">ID Number is required.</mat-error>
+                <input
+                  matInput
+                  type="text"
+                  id="idNumber"
+                  placeholder="ID Number"
+                  formControlName="idNumber"
+                  [errorStateMatcher]="matcher"
+                />
+                <mat-error *ngIf="submitted && createFormStub.idNumber.errors"
+                  >ID Number is required.</mat-error
+                >
               </mat-form-field>
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Phone Number: </mat-label>
-                <input matInput type="text" id="phoneNumber" placeholder="Phone Number" formControlName="phoneNumber" [errorStateMatcher]="matcher">
-                <mat-error *ngIf="submitted && createFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
-              </mat-form-field><br>
+                <input
+                  matInput
+                  type="text"
+                  id="phoneNumber"
+                  placeholder="Phone Number"
+                  formControlName="phoneNumber"
+                  [errorStateMatcher]="matcher"
+                />
+                <mat-error *ngIf="submitted && createFormStub.phoneNumber.errors"
+                  >Phone Number is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Given Name(s):* </mat-label>
-                <input matInput type="text" id="givenNames" placeholder="Given Names" formControlName="givenName" [errorStateMatcher]="matcher">
-                <mat-error *ngIf="submitted && createFormStub.givenName.errors">Given Names are required.</mat-error>
-              </mat-form-field><br>
+                <input
+                  matInput
+                  type="text"
+                  id="givenNames"
+                  placeholder="Given Names"
+                  formControlName="givenName"
+                  [errorStateMatcher]="matcher"
+                />
+                <mat-error *ngIf="submitted && createFormStub.givenName.errors"
+                  >Given Names are required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Family/Surname: </mat-label>
-                <input matInput type="text" id="surname" placeholder="Surname" formControlName="surname" [errorStateMatcher]="matcher">
-                <mat-error *ngIf="submitted && createFormStub.surname.errors">Surname is required.</mat-error>
-              </mat-form-field><br>
+                <input
+                  matInput
+                  type="text"
+                  id="surname"
+                  placeholder="Surname"
+                  formControlName="surname"
+                  [errorStateMatcher]="matcher"
+                />
+                <mat-error *ngIf="submitted && createFormStub.surname.errors"
+                  >Surname is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Directory Entry: </mat-label>
-                <input matInput type="text" id="directoryEntry" placeholder="Directory Entry" formControlName="directoryEntry" [errorStateMatcher]="matcher">
-                <mat-error *ngIf="submitted && createFormStub.directoryEntry.errors">Directory Entry is required.</mat-error>
-              </mat-form-field><br>
+                <input
+                  matInput
+                  type="text"
+                  id="directoryEntry"
+                  placeholder="Directory Entry"
+                  formControlName="directoryEntry"
+                  [errorStateMatcher]="matcher"
+                />
+                <mat-error *ngIf="submitted && createFormStub.directoryEntry.errors"
+                  >Directory Entry is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
@@ -80,11 +129,13 @@
                 <mat-label>Location: </mat-label>
                 <mat-select id="location" formControlName="location" [errorStateMatcher]="matcher">
                   <mat-option *ngFor="let area of areaNames" [value]="area">
-                    {{area | uppercase}}
+                    {{ area | uppercase }}
                   </mat-option>
                 </mat-select>
-                <mat-error *ngIf="submitted && createFormStub.location.errors">Location is required.</mat-error>
-              </mat-form-field><br>
+                <mat-error *ngIf="submitted && createFormStub.location.errors"
+                  >Location is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
@@ -92,34 +143,59 @@
                 <mat-label>Gender: </mat-label>
                 <mat-select id="gender" formControlName="gender" [errorStateMatcher]="matcher">
                   <mat-option *ngFor="let gender of genders" [value]="gender">
-                    {{gender | uppercase}}
+                    {{ gender | uppercase }}
                   </mat-option>
                 </mat-select>
-                <mat-error *ngIf="submitted && createFormStub.gender.errors">Gender is required.</mat-error>
-              </mat-form-field><br>
+                <mat-error *ngIf="submitted && createFormStub.gender.errors"
+                  >Gender is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Referrer Phone Number: </mat-label>
-                <input matInput type="text" id="referredBy" placeholder="Reffered By" formControlName="referrer" [errorStateMatcher]="matcher">
-                <mat-error *ngIf="submitted && createFormStub.referrer.errors">Referrer is required.</mat-error>
-              </mat-form-field><br>
+                <input
+                  matInput
+                  type="text"
+                  id="referredBy"
+                  placeholder="Reffered By"
+                  formControlName="referrer"
+                  [errorStateMatcher]="matcher"
+                />
+                <mat-error *ngIf="submitted && createFormStub.referrer.errors"
+                  >Referrer is required.</mat-error
+                > </mat-form-field
+              ><br />
             </div>
 
             <div class="col-md-6 col-lg-4">
               <mat-form-field appearance="outline">
                 <mat-label>Business Category: </mat-label>
-                <mat-select id="businessCategory" formControlName="businessCategory" [errorStateMatcher]="matcher">
+                <mat-select
+                  id="businessCategory"
+                  formControlName="businessCategory"
+                  [errorStateMatcher]="matcher"
+                >
                   <mat-option *ngFor="let category of categories" [value]="category">
-                    {{category | titlecase}}
+                    {{ category | titlecase }}
                   </mat-option>
                 </mat-select>
-                <mat-error *ngIf="submitted && createFormStub.businessCategory.errors">Business Category is required.</mat-error>
+                <mat-error *ngIf="submitted && createFormStub.businessCategory.errors"
+                  >Business Category is required.</mat-error
+                >
               </mat-form-field>
             </div>
 
-            <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3" (click)="onSubmit()">Submit</button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="submit"
+              class="btn btn-outline-primary ml-3"
+              (click)="onSubmit()"
+            >
+              Submit
+            </button>
           </form>
         </div>
       </div>
diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html
index 453f743..b933f3e 100644
--- a/src/app/pages/admin/admin.component.html
+++ b/src/app/pages/admin/admin.component.html
@@ -20,19 +20,30 @@
         <mat-card-title class="card-header">
           <div class="row">
             Actions
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary ml-auto mr-2"
+              (click)="downloadCsv()"
+            >
+              EXPORT
+            </button>
           </div>
         </mat-card-title>
         <div class="card-body">
-
           <mat-form-field appearance="outline">
             <mat-label> Filter </mat-label>
-            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+            <input
+              matInput
+              type="text"
+              (keyup)="doFilter($event.target.value)"
+              placeholder="Filter"
+            />
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
           <mat-table class="mat-elevation-z10" [dataSource]="dataSource" multiTemplateDataRows>
-
             <!-- Expand Column -->
             <ng-container matColumnDef="expand">
               <mat-header-cell *matHeaderCellDef> Expand </mat-header-cell>
@@ -44,32 +55,52 @@
 
             <ng-container matColumnDef="user">
               <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
-              <mat-cell *matCellDef="let action"> {{action.user}} </mat-cell>
+              <mat-cell *matCellDef="let action"> {{ action.user }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="role">
               <mat-header-cell *matHeaderCellDef> ROLE </mat-header-cell>
-              <mat-cell *matCellDef="let action"> {{action.role}} </mat-cell>
+              <mat-cell *matCellDef="let action"> {{ action.role }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="action">
               <mat-header-cell *matHeaderCellDef> ACTION </mat-header-cell>
-              <mat-cell *matCellDef="let action"> {{action.action}} </mat-cell>
+              <mat-cell *matCellDef="let action"> {{ action.action }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="status">
               <mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
               <mat-cell *matCellDef="let action">
-                <span *ngIf="action.approval == true" class="badge badge-success badge-pill"> {{approvalStatus(action.approval)}} </span>
-                <span *ngIf="action.approval == false" class="badge badge-danger badge-pill"> {{approvalStatus(action.approval)}} </span>
+                <span *ngIf="action.approval == true" class="badge badge-success badge-pill">
+                  {{ approvalStatus(action.approval) }}
+                </span>
+                <span *ngIf="action.approval == false" class="badge badge-danger badge-pill">
+                  {{ approvalStatus(action.approval) }}
+                </span>
               </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="approve">
               <mat-header-cell *matHeaderCellDef> APPROVE </mat-header-cell>
               <mat-cell *matCellDef="let action">
-                <button mat-raised-button color="primary" *ngIf="!action.approval" class="btn btn-outline-success" (click)="approveAction(action)"> Approve </button>
-                <button mat-raised-button color="warn" *ngIf="action.approval" class="btn btn-outline-danger" (click)="disapproveAction(action)"> Disapprove </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  *ngIf="!action.approval"
+                  class="btn btn-outline-success"
+                  (click)="approveAction(action)"
+                >
+                  Approve
+                </button>
+                <button
+                  mat-raised-button
+                  color="warn"
+                  *ngIf="action.approval"
+                  class="btn btn-outline-danger"
+                  (click)="disapproveAction(action)"
+                >
+                  Disapprove
+                </button>
               </mat-cell>
             </ng-container>
 
@@ -77,22 +108,37 @@
             <ng-container matColumnDef="expandedDetail">
               <mat-cell *matCellDef="let action">
                 <div>
-                  <span><strong>Staff Name:</strong> {{action.user}}</span><br>
-                  <span><strong>Role:</strong> {{action.role}}</span><br>
-                  <span><strong>Action Details:</strong> {{action.action}}</span><br>
-                  <span><strong>Approval Status:</strong> {{action.approval}}</span><br>
+                  <span><strong>Staff Name:</strong> {{ action.user }}</span
+                  ><br />
+                  <span><strong>Role:</strong> {{ action.role }}</span
+                  ><br />
+                  <span><strong>Action Details:</strong> {{ action.action }}</span
+                  ><br />
+                  <span><strong>Approval Status:</strong> {{ action.approval }}</span
+                  ><br />
                 </div>
               </mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"
-                     [class.expanded]="row.isExpanded"></mat-row>
-            <mat-row *matRowDef="let row; columns: ['expandedDetail'];"
-                     [@detailExpand]="row.isExpanded == true ? 'expanded': 'collapsed'" style="overflow: hidden"></mat-row>
+            <mat-row
+              *matRowDef="let row; columns: displayedColumns"
+              matRipple
+              class="element-row"
+              [class.expanded]="row.isExpanded"
+            ></mat-row>
+            <mat-row
+              *matRowDef="let row; columns: ['expandedDetail']"
+              [@detailExpand]="row.isExpanded == true ? 'expanded' : 'collapsed'"
+              style="overflow: hidden"
+            ></mat-row>
           </mat-table>
 
-          <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
+          <mat-paginator
+            [pageSize]="10"
+            [pageSizeOptions]="[10, 20, 50, 100]"
+            showFirstLastButtons
+          ></mat-paginator>
         </div>
       </div>
     </div>
@@ -102,4 +148,3 @@
   <!-- End Page content -->
   <!-- ============================================================== -->
 </div>
-
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 5e60109..331647c 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -16,10 +16,16 @@
         </ol>
       </nav>
       <div class="embed-responsive embed-responsive-16by9">
-        <iframe class="embed-responsive-item" [src]="url | safe" allow="fullscreen" loading="lazy"
-                title="Community inclusion currencies dashboard" referrerpolicy="no-referrer">
+        <iframe
+          class="embed-responsive-item"
+          [src]="url | safe"
+          allow="fullscreen"
+          loading="lazy"
+          title="Community inclusion currencies dashboard"
+          referrerpolicy="no-referrer"
+        >
           <p>
-            <a href="{{url}}"> Your browser does not support iframes. </a>
+            <a href="{{ url }}"> Your browser does not support iframes. </a>
           </p>
         </iframe>
       </div>
diff --git a/src/app/pages/settings/organization/organization.component.html b/src/app/pages/settings/organization/organization.component.html
index 9e38bf9..1921b85 100644
--- a/src/app/pages/settings/organization/organization.component.html
+++ b/src/app/pages/settings/organization/organization.component.html
@@ -26,19 +26,31 @@
             <form [formGroup]="organizationForm" (ngSubmit)="onSubmit()">
               <mat-form-field appearance="outline">
                 <mat-label>Default Disbursement *</mat-label>
-                <input matInput type="text" id="amount" placeholder="Amount" formControlName="disbursement"
-                       [errorStateMatcher]="matcher">
+                <input
+                  matInput
+                  type="text"
+                  id="amount"
+                  placeholder="Amount"
+                  formControlName="disbursement"
+                  [errorStateMatcher]="matcher"
+                />
                 <span matSuffix>RCU</span>
                 <mat-error *ngIf="submitted && organizationFormStub.disbursement.errors">
                   Default Disbursement is required.
                 </mat-error>
               </mat-form-field>
               <div class="form-group form-check">
-                <mat-checkbox id="transferCard" formControlName="transfer">Require Transfer Card *</mat-checkbox>
+                <mat-checkbox id="transferCard" formControlName="transfer"
+                  >Require Transfer Card *</mat-checkbox
+                >
               </div>
               <mat-form-field appearance="outline">
                 <mat-label>Default Country Code *</mat-label>
-                <mat-select id="countryCode" formControlName="countryCode" [errorStateMatcher]="matcher">
+                <mat-select
+                  id="countryCode"
+                  formControlName="countryCode"
+                  [errorStateMatcher]="matcher"
+                >
                   <mat-option value="KE">KE Kenya</mat-option>
                   <mat-option value="US">US United States</mat-option>
                   <mat-option value="ETH">ETH Ethiopia</mat-option>
@@ -47,9 +59,11 @@
                 </mat-select>
                 <mat-error *ngIf="submitted && organizationFormStub.countryCode.errors">
                   Country Code is required.
-                </mat-error>
-              </mat-form-field><br>
-              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">Submit</button>
+                </mat-error> </mat-form-field
+              ><br />
+              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">
+                Submit
+              </button>
             </form>
           </div>
         </div>
diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html
index ac74e63..56260f1 100644
--- a/src/app/pages/settings/settings.component.html
+++ b/src/app/pages/settings/settings.component.html
@@ -19,16 +19,14 @@
       <div class="row">
         <div class="col-md-6 mb-2">
           <div class="card">
-            <mat-card-title class="card-header text-center">
-              SETTINGS
-            </mat-card-title>
+            <mat-card-title class="card-header text-center"> SETTINGS </mat-card-title>
             <div class="card-body">
               <h4>CICADA Admin Credentials</h4>
-              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br>
-              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br>
+              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br />
+              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br />
               <span><strong>Email: </strong> {{ userInfo?.email }} </span>
             </div>
-            <hr>
+            <hr />
             <div class="card-body">
               <h4>Organization Settings</h4>
               <a routerLink="/settings/organization"><i>Update your organization settings</i></a>
@@ -37,21 +35,27 @@
         </div>
         <div class="col-md-6 mb-2">
           <div class="card">
-            <mat-card-title class="card-header text-center">
-              ACCOUNT MANAGEMENT
-            </mat-card-title>
+            <mat-card-title class="card-header text-center"> ACCOUNT MANAGEMENT </mat-card-title>
             <div class="card-body">
               <h4>Change Password</h4>
               <a routerLink="/settings"><i>Change your account password</i></a>
             </div>
-            <hr>
+            <hr />
             <div class="card-body">
               <h4>Two-step authentication</h4>
               <a routerLink="/settings"><i>Secure your account with two step verification</i></a>
             </div>
-            <hr>
+            <hr />
             <div class="card-body">
-              <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary" (click)="logout()"> LOGOUT ADMIN </button>
+              <button
+                mat-raised-button
+                color="primary"
+                type="button"
+                class="btn btn-outline-primary"
+                (click)="logout()"
+              >
+                LOGOUT ADMIN
+              </button>
             </div>
           </div>
         </div>
@@ -60,39 +64,60 @@
             <mat-card-title class="card-header">
               <div class="row">
                 TRUSTED USERS
-                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  class="btn btn-outline-primary ml-auto mr-2"
+                  (click)="downloadCsv()"
+                >
+                  EXPORT
+                </button>
               </div>
             </mat-card-title>
             <div class="card-body">
               <mat-form-field appearance="outline">
                 <mat-label> Filter </mat-label>
-                <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+                <input
+                  matInput
+                  type="text"
+                  (keyup)="doFilter($event.target.value)"
+                  placeholder="Filter"
+                />
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
-              <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="name"
-                         matSortDirection="asc" matSortDisableClear>
-
+              <mat-table
+                class="mat-elevation-z10"
+                [dataSource]="dataSource"
+                matSort
+                matSortActive="name"
+                matSortDirection="asc"
+                matSortDisableClear
+              >
                 <ng-container matColumnDef="name">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user.name }} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="email">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> EMAIL </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user.email }} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="userId">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> USER ID </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user.userid}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user.userid }} </mat-cell>
                 </ng-container>
 
                 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                 <mat-row *matRowDef="let user; columns: displayedColumns"></mat-row>
               </mat-table>
 
-              <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
-
+              <mat-paginator
+                [pageSize]="5"
+                [pageSizeOptions]="[5, 10, 20, 50, 100]"
+                showFirstLastButtons
+              ></mat-paginator>
             </div>
           </div>
         </div>
diff --git a/src/app/pages/tokens/token-details/token-details.component.html b/src/app/pages/tokens/token-details/token-details.component.html
index 4d90527..0c8024f 100644
--- a/src/app/pages/tokens/token-details/token-details.component.html
+++ b/src/app/pages/tokens/token-details/token-details.component.html
@@ -3,32 +3,43 @@
     <mat-card-title class="card-header">
       <div class="row">
         TOKEN DETAILS
-        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
+        <button
+          mat-raised-button
+          type="button"
+          class="btn btn-outline-secondary ml-auto mr-2"
+          (click)="close()"
+        >
+          CLOSE
+        </button>
       </div>
     </mat-card-title>
     <div class="card-body">
       <div>
-        <span><strong>Name:</strong> {{token?.name}}</span>
+        <span><strong>Name:</strong> {{ token?.name }}</span>
       </div>
       <div>
-        <span><strong>Symbol:</strong> {{token?.symbol}}</span>
+        <span><strong>Symbol:</strong> {{ token?.symbol }}</span>
       </div>
       <div>
-        <span><strong>Address:</strong> {{token?.address}}</span>
+        <span><strong>Address:</strong> {{ token?.address }}</span>
       </div>
       <div>
-        <span><strong>Details:</strong> A community inclusive currency for trading among lower to middle income societies.</span>
+        <span
+          ><strong>Details:</strong> A community inclusive currency for trading among lower to
+          middle income societies.</span
+        >
       </div>
       <div>
-        <span><strong>Supply:</strong> {{token?.supply | tokenRatio}}</span>
-      </div><br>
+        <span><strong>Supply:</strong> {{ token?.supply | tokenRatio }}</span>
+      </div>
+      <br />
       <div>
         <h2>Reserve</h2>
         <div>
-          <span><strong>Weight:</strong> {{token?.reserveRatio}}</span>
+          <span><strong>Weight:</strong> {{ token?.reserveRatio }}</span>
         </div>
         <div>
-          <span><strong>Owner:</strong> {{token?.owner}}</span>
+          <span><strong>Owner:</strong> {{ token?.owner }}</span>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/tokens/tokens.component.html b/src/app/pages/tokens/tokens.component.html
index 5cf5ebe..56d843b 100644
--- a/src/app/pages/tokens/tokens.component.html
+++ b/src/app/pages/tokens/tokens.component.html
@@ -20,45 +20,71 @@
         <mat-card-title class="card-header">
           <div class="row">
             Tokens
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary ml-auto mr-2"
+              (click)="downloadCsv()"
+            >
+              EXPORT
+            </button>
           </div>
         </mat-card-title>
         <div class="card-body">
-
           <app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>
 
           <mat-form-field appearance="outline">
             <mat-label> Filter </mat-label>
-            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+            <input
+              matInput
+              type="text"
+              (keyup)="doFilter($event.target.value)"
+              placeholder="Filter"
+            />
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
-          <mat-table class="mat-elevation-z10 table-responsive" [dataSource]="dataSource" matSort matSortDirection="asc" matSortDisableClear>
+          <mat-table
+            class="mat-elevation-z10 table-responsive"
+            [dataSource]="dataSource"
+            matSort
+            matSortDirection="asc"
+            matSortDisableClear
+          >
             <ng-container matColumnDef="name">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.name}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.name }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="symbol">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.symbol}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.symbol }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="address">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.address}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.address }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="supply">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.supply | tokenRatio}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.supply | tokenRatio }} </mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
-            <mat-row *matRowDef="let token; columns: columnsToDisplay" (click)="viewToken(token)" matRipple></mat-row>
+            <mat-row
+              *matRowDef="let token; columns: columnsToDisplay"
+              (click)="viewToken(token)"
+              matRipple
+            ></mat-row>
           </mat-table>
 
-          <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
+          <mat-paginator
+            [pageSize]="5"
+            [pageSizeOptions]="[5, 10, 25, 100]"
+            showFirstLastButtons
+          ></mat-paginator>
         </div>
       </div>
     </div>
@@ -68,4 +94,3 @@
   <!-- End Page content -->
   <!-- ============================================================== -->
 </div>
-
diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.html b/src/app/pages/transactions/transaction-details/transaction-details.component.html
index 0da7816..fdce60d 100644
--- a/src/app/pages/transactions/transaction-details/transaction-details.component.html
+++ b/src/app/pages/transactions/transaction-details/transaction-details.component.html
@@ -3,43 +3,86 @@
     <mat-card-title class="card-header">
       <div class="row">
         TRANSACTION DETAILS
-        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
+        <button
+          mat-raised-button
+          type="button"
+          class="btn btn-outline-secondary ml-auto mr-2"
+          (click)="close()"
+        >
+          CLOSE
+        </button>
       </div>
     </mat-card-title>
     <div *ngIf="transaction.type == 'transaction'" class="card-body">
       <div class="row">
         <div class="col-md-6">
-          <h4>Exchange: </h4>
+          <h4>Exchange:</h4>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
-              <span>Sender: {{transaction.sender?.vcard.fn[0].value}}</span><br><br>
+              <span>Sender: {{ transaction.sender?.vcard.fn[0].value }}</span
+              ><br /><br />
               <span>
                 Sender Address:
-                <a href="{{senderBloxbergLink}}" target="_blank"> {{transaction.from}} </a>
-                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.from)" alt="Copy">
-              </span><br><br>
-              <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewSender()">View Sender</button>
+                <a href="{{ senderBloxbergLink }}" target="_blank"> {{ transaction.from }} </a>
+                <img
+                  src="assets/images/checklist.svg"
+                  class="ml-2"
+                  height="20rem"
+                  (click)="copyAddress(transaction.from)"
+                  alt="Copy"
+                /> </span
+              ><br /><br />
+              <button
+                mat-raised-button
+                color="primary"
+                class="btn btn-outline-info"
+                (click)="viewSender()"
+              >
+                View Sender
+              </button>
             </li>
             <li class="list-group-item">
-              <span>Recipient: {{transaction.recipient?.vcard.fn[0].value}}</span><br><br>
+              <span>Recipient: {{ transaction.recipient?.vcard.fn[0].value }}</span
+              ><br /><br />
               <span>
                 Recipient Address:
-                <a href="{{recipientBloxbergLink}}" target="_blank"> {{transaction.to}} </a>
-                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.to)" alt="Copy">
-              </span><br><br>
-              <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button>
+                <a href="{{ recipientBloxbergLink }}" target="_blank"> {{ transaction.to }} </a>
+                <img
+                  src="assets/images/checklist.svg"
+                  class="ml-2"
+                  height="20rem"
+                  (click)="copyAddress(transaction.to)"
+                  alt="Copy"
+                /> </span
+              ><br /><br />
+              <button
+                mat-raised-button
+                color="primary"
+                class="btn btn-outline-info"
+                (click)="viewRecipient()"
+              >
+                View Recipient
+              </button>
             </li>
             <li class="list-group-item">
-              <span>Amount: {{transaction.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
+              <span
+                >Amount: {{ transaction.value | tokenRatio }} {{ tokenSymbol | uppercase }}</span
+              >
             </li>
           </ul>
-          <h4 class="mt-2">Token: </h4>
+          <h4 class="mt-2">Token:</h4>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
               <span>
                 Address:
-                {{transaction.token._address}}
-                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.token._address)" alt="Copy">
+                {{ transaction.token._address }}
+                <img
+                  src="assets/images/checklist.svg"
+                  class="ml-2"
+                  height="20rem"
+                  (click)="copyAddress(transaction.token._address)"
+                  alt="Copy"
+                />
               </span>
             </li>
             <li class="list-group-item">
@@ -51,97 +94,140 @@
           </ul>
         </div>
         <div class="col-md-6">
-          <h4>Transaction: </h4>
+          <h4>Transaction:</h4>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
-              <span>Block: {{transaction.tx.block}}</span>
+              <span>Block: {{ transaction.tx.block }}</span>
             </li>
             <li class="list-group-item">
-              <span>Index: {{transaction.tx.txIndex}}</span>
+              <span>Index: {{ transaction.tx.txIndex }}</span>
             </li>
             <li class="list-group-item">
-              <span>Hash: {{transaction.tx.txHash}}</span>
+              <span>Hash: {{ transaction.tx.txHash }}</span>
             </li>
             <li class="list-group-item">
-              <span>Success: {{transaction.tx.success}}</span>
+              <span>Success: {{ transaction.tx.success }}</span>
             </li>
             <li class="list-group-item">
-              <span>Timestamp: {{transaction.tx.timestamp | unixDate}}</span>
+              <span>Timestamp: {{ transaction.tx.timestamp | unixDate }}</span>
             </li>
-          </ul><br>
+          </ul>
+          <br />
           <div class="mb-3">
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">Resend SMS</button>
+            <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">
+              Resend SMS
+            </button>
           </div>
           <div>
-            <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger">Reverse Transaction</button>
+            <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger">
+              Reverse Transaction
+            </button>
           </div>
         </div>
       </div>
     </div>
     <div *ngIf="transaction.type == 'conversion'" class="card-body">
-      <h3>Exchange: </h3>
+      <h3>Exchange:</h3>
       <ul class="list-group list-group-flush">
         <li class="list-group-item">
-          <span><strong>Trader: {{transaction.sender?.vcard.fn[0].value}}</strong></span>
+          <span
+            ><strong>Trader: {{ transaction.sender?.vcard.fn[0].value }}</strong></span
+          >
         </li>
         <li class="list-group-item">
           <span>
             Trader Address:
-            <a href="{{traderBloxbergLink}}" target="_blank"> {{transaction.trader}} </a>
-            <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.trader)" alt="Copy">
+            <a href="{{ traderBloxbergLink }}" target="_blank"> {{ transaction.trader }} </a>
+            <img
+              src="assets/images/checklist.svg"
+              class="ml-2"
+              height="20rem"
+              (click)="copyAddress(transaction.trader)"
+              alt="Copy"
+            />
           </span>
         </li>
       </ul>
-      <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewTrader()">View Trader</button>
-      <br><br>
+      <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewTrader()">
+        View Trader
+      </button>
+      <br /><br />
       <div class="row">
         <div class="col-md-6">
-          <h4>Source Token: </h4>
+          <h4>Source Token:</h4>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
               <span>
                 Address:
-                {{transaction.sourceToken.address}}
-                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.sourceToken.address)" alt="Copy">
+                {{ transaction.sourceToken.address }}
+                <img
+                  src="assets/images/checklist.svg"
+                  class="ml-2"
+                  height="20rem"
+                  (click)="copyAddress(transaction.sourceToken.address)"
+                  alt="Copy"
+                />
               </span>
             </li>
             <li class="list-group-item">
-              <span>Name: {{transaction.sourceToken.name}}</span>
+              <span>Name: {{ transaction.sourceToken.name }}</span>
             </li>
             <li class="list-group-item">
-              <span>Symbol: {{transaction.sourceToken.symbol | uppercase}}</span>
+              <span>Symbol: {{ transaction.sourceToken.symbol | uppercase }}</span>
             </li>
             <li class="list-group-item">
-              <span>Amount: {{transaction.fromValue}} {{transaction.sourceToken.symbol | uppercase}}</span>
+              <span
+                >Amount: {{ transaction.fromValue }}
+                {{ transaction.sourceToken.symbol | uppercase }}</span
+              >
             </li>
           </ul>
         </div>
         <div class="col-md-6">
-          <h4>Destination Token: </h4>
+          <h4>Destination Token:</h4>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
               <span>
                 Address:
-                {{transaction.destinationToken.address}}
-                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.destinationToken.address)" alt="Copy">
+                {{ transaction.destinationToken.address }}
+                <img
+                  src="assets/images/checklist.svg"
+                  class="ml-2"
+                  height="20rem"
+                  (click)="copyAddress(transaction.destinationToken.address)"
+                  alt="Copy"
+                />
               </span>
             </li>
             <li class="list-group-item">
-              <span>Name: {{transaction.destinationToken.name}}</span>
+              <span>Name: {{ transaction.destinationToken.name }}</span>
             </li>
             <li class="list-group-item">
-              <span>Symbol: {{transaction.destinationToken.symbol | uppercase}}</span>
+              <span>Symbol: {{ transaction.destinationToken.symbol | uppercase }}</span>
             </li>
             <li class="list-group-item">
-              <span>Amount: {{transaction.toValue}} {{transaction.destinationToken.symbol | uppercase}}</span>
+              <span
+                >Amount: {{ transaction.toValue }}
+                {{ transaction.destinationToken.symbol | uppercase }}</span
+              >
             </li>
           </ul>
         </div>
         <div class="col-md-6">
-          <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">Resend SMS</button>
+          <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">
+            Resend SMS
+          </button>
         </div>
         <div class="col-md-6">
-          <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger ml-2" (click)="reverseTransaction()">Reverse Transaction</button>
+          <button
+            mat-raised-button
+            color="warn"
+            type="button"
+            class="btn btn-outline-danger ml-2"
+            (click)="reverseTransaction()"
+          >
+            Reverse Transaction
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html
index 1d9d548..96cfcc9 100644
--- a/src/app/pages/transactions/transactions.component.html
+++ b/src/app/pages/transactions/transactions.component.html
@@ -17,71 +17,114 @@
         </ol>
       </nav>
       <div class="card">
-        <mat-card-title class="card-header">
-          Transfers
-        </mat-card-title>
+        <mat-card-title class="card-header"> Transfers </mat-card-title>
         <div class="card-body">
-
-          <app-transaction-details [transaction]="transaction" (closeWindow)="transaction = $event"></app-transaction-details>
+          <app-transaction-details
+            [transaction]="transaction"
+            (closeWindow)="transaction = $event"
+          ></app-transaction-details>
 
           <div class="row card-header">
             <mat-form-field appearance="outline">
               <mat-label> TRANSFER TYPE </mat-label>
-              <mat-select id="typeSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
+              <mat-select
+                id="typeSelect"
+                [(value)]="transactionsType"
+                (selectionChange)="filterTransactions()"
+              >
                 <mat-option value="all">ALL TRANSFERS</mat-option>
-                <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
-                  {{transactionType | uppercase}}
+                <mat-option
+                  *ngFor="let transactionType of transactionsTypes"
+                  [value]="transactionType"
+                >
+                  {{ transactionType | uppercase }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary ml-auto mr-2"
+              (click)="downloadCsv()"
+            >
+              EXPORT
+            </button>
           </div>
 
           <mat-form-field appearance="outline">
             <mat-label> Filter </mat-label>
-            <input matInput type="text" (keyup)="doFilter($event.target.value, transactionDataSource)" placeholder="Filter">
+            <input
+              matInput
+              type="text"
+              (keyup)="doFilter($event.target.value, transactionDataSource)"
+              placeholder="Filter"
+            />
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
-          <table mat-table class="mat-elevation-z10" [dataSource]="transactionDataSource" matSort matSortActive="created"
-                     matSortDirection="desc" matSortDisableClear>
-
+          <table
+            mat-table
+            class="mat-elevation-z10"
+            [dataSource]="transactionDataSource"
+            matSort
+            matSortActive="created"
+            matSortDirection="desc"
+            matSortDisableClear
+          >
             <ng-container matColumnDef="sender">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
-              <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value || transaction.from}} </td>
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>Sender</th>
+              <td mat-cell *matCellDef="let transaction">
+                {{ transaction?.sender?.vcard.fn[0].value || transaction.from }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="recipient">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
-              <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value || transaction.to}} </td>
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>Recipient</th>
+              <td mat-cell *matCellDef="let transaction">
+                {{ transaction?.recipient?.vcard.fn[0].value || transaction.to }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="value">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
               <td mat-cell *matCellDef="let transaction">
-                <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
-                <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
+                <span *ngIf="transaction.type == 'transaction'"
+                  >{{ transaction?.value | tokenRatio }} {{ tokenSymbol | uppercase }}</span
+                >
+                <span *ngIf="transaction.type == 'conversion'"
+                  >{{ transaction?.toValue | tokenRatio }} {{ tokenSymbol | uppercase }}</span
+                >
               </td>
             </ng-container>
 
             <ng-container matColumnDef="created">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
-              <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | unixDate}} </td>
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
+              <td mat-cell *matCellDef="let transaction">
+                {{ transaction?.tx.timestamp | unixDate }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="type">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>TYPE</th>
               <td mat-cell *matCellDef="let transaction">
-                <span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
+                <span class="badge badge-success badge-pill"> {{ transaction?.type }} </span>
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="transactionDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let transaction; columns: transactionDisplayedColumns;" (click)="viewTransaction(transaction)"></tr>
+            <tr
+              mat-row
+              *matRowDef="let transaction; columns: transactionDisplayedColumns"
+              (click)="viewTransaction(transaction)"
+            ></tr>
           </table>
 
-          <mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
-
+          <mat-paginator
+            [pageSize]="defaultPageSize"
+            [pageSizeOptions]="pageSizeOptions"
+            showFirstLastButtons
+          ></mat-paginator>
         </div>
       </div>
     </div>
@@ -91,5 +134,3 @@
   <!-- End Page content -->
   <!-- ============================================================== -->
 </div>
-
-
diff --git a/src/app/shared/error-dialog/error-dialog.component.html b/src/app/shared/error-dialog/error-dialog.component.html
index f508467..d2b70b0 100644
--- a/src/app/shared/error-dialog/error-dialog.component.html
+++ b/src/app/shared/error-dialog/error-dialog.component.html
@@ -1,10 +1,6 @@
 <div>
   <div>
-    <p>
-      Message: {{ data.message }}
-    </p>
-    <p *ngIf="data.status">
-      Status: {{ data?.status }}
-    </p>
+    <p>Message: {{ data.message }}</p>
+    <p *ngIf="data.status">Status: {{ data?.status }}</p>
   </div>
 </div>
diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html
index fa0028d..45a3702 100644
--- a/src/app/shared/footer/footer.component.html
+++ b/src/app/shared/footer/footer.component.html
@@ -1,8 +1,10 @@
 <!-- Footer Start -->
 <footer class="footer">
-  <a target="blank" title="GPL-3" href="https://www.gnu.org/licenses/gpl-3.0.en.html"> Copyleft </a> 🄯.
+  <a target="blank" title="GPL-3" href="https://www.gnu.org/licenses/gpl-3.0.en.html"> Copyleft </a>
+  🄯.
   {{ currentYear }}
-  <a target="blank" title="Gitlab@GrassrootsEconomics" href="https://gitlab.com/grassrootseconomics"><u> Grassroots Economics </u></a>
-
+  <a target="blank" title="Gitlab@GrassrootsEconomics" href="https://gitlab.com/grassrootseconomics"
+    ><u> Grassroots Economics </u></a
+  >
 </footer>
 <!-- end Footer -->
diff --git a/src/app/shared/network-status/network-status.component.html b/src/app/shared/network-status/network-status.component.html
index 1f907f7..54d821a 100644
--- a/src/app/shared/network-status/network-status.component.html
+++ b/src/app/shared/network-status/network-status.component.html
@@ -1,13 +1,13 @@
 <nav class="navbar navbar-dark background-dark">
   <h1 class="navbar-brand">
-    <div *ngIf="noInternetConnection; then offlineBlock else onlineBlock"></div>
+    <div *ngIf="noInternetConnection; then offlineBlock; else onlineBlock"></div>
     <ng-template #offlineBlock>
-      <strong style="color: red;">OFFLINE </strong>
-      <img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected">
+      <strong style="color: red">OFFLINE </strong>
+      <img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected" />
     </ng-template>
     <ng-template #onlineBlock>
-      <strong style="color: lawngreen;">ONLINE </strong>
-      <img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected">
+      <strong style="color: lawngreen">ONLINE </strong>
+      <img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected" />
     </ng-template>
   </h1>
 </nav>
diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
index 7e8353e..c2f947e 100644
--- a/src/app/shared/sidebar/sidebar.component.html
+++ b/src/app/shared/sidebar/sidebar.component.html
@@ -2,10 +2,9 @@
 <div id="sidebar">
   <app-network-status></app-network-status>
   <nav>
-
     <div class="sidebar-header">
       <h3>
-        <img class="full-width" src="assets/images/CIC-Logo-white.png" alt="CIC Admin Dashboard">
+        <img class="full-width" src="assets/images/CIC-Logo-white.png" alt="CIC Admin Dashboard" />
       </h3>
       <strong>CICADA</strong>
     </div>
diff --git a/src/app/shared/topbar/topbar.component.html b/src/app/shared/topbar/topbar.component.html
index 3959f87..525c2a5 100644
--- a/src/app/shared/topbar/topbar.component.html
+++ b/src/app/shared/topbar/topbar.component.html
@@ -1,7 +1,13 @@
 <!-- Topbar Start -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
   <div class="container-fluid">
-    <button type="button" id="sidebarCollapse" class="navbar-btn menutoggle" aria-label="Sidebar toggle" appMenuToggle>
+    <button
+      type="button"
+      id="sidebarCollapse"
+      class="navbar-btn menutoggle"
+      aria-label="Sidebar toggle"
+      appMenuToggle
+    >
       <span></span>
       <span></span>
       <span></span>
diff --git a/src/index.html b/src/index.html
index 723b861..45433d9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,52 +1,187 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>CICADA</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description"/>
-  <meta content="Spencer Ofwiti" name="author"/>
-  <link rel="icon" type="image/x-icon" href="assets/icons/manifest-icon-512.png">
-  <link rel="apple-touch-icon" href="assets/icons/apple-icon-180.png">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
-  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link rel="manifest" href="manifest.webmanifest">
-  <meta name="theme-color" content="#313a46">
-</head>
-<body class="mat-typography">
-  <app-root></app-root>
-  <script async src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-  <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-  <script async src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>CICADA</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      content="A fully featured admin client for managing users and transactions in the CIC network."
+      name="description"
+    />
+    <meta content="Spencer Ofwiti" name="author" />
+    <link rel="icon" type="image/x-icon" href="assets/icons/manifest-icon-512.png" />
+    <link rel="apple-touch-icon" href="assets/icons/apple-icon-180.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2048-2732.jpg"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2732-2048.jpg"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1668-2388.jpg"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2388-1668.jpg"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1536-2048.jpg"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2048-1536.jpg"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1668-2224.jpg"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2224-1668.jpg"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1620-2160.jpg"
+      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2160-1620.jpg"
+      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1284-2778.jpg"
+      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2778-1284.jpg"
+      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1170-2532.jpg"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2532-1170.jpg"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1125-2436.jpg"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2436-1125.jpg"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1242-2688.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2688-1242.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-828-1792.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1792-828.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1242-2208.jpg"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-2208-1242.jpg"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-750-1334.jpg"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1334-750.jpg"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-640-1136.jpg"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="assets/icons/apple-splash-1136-640.jpg"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link rel="manifest" href="manifest.webmanifest" />
+    <meta name="theme-color" content="#313a46" />
+  </head>
+  <body class="mat-typography">
+    <app-root></app-root>
+    <script
+      async
+      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      async
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
+      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      async
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
+      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
+      crossorigin="anonymous"
+    ></script>
+  </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index c59cf5b..f7f798e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 03711e5..e49856e 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -55,8 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/src/styles.scss b/src/styles.scss
index 1a4a579..9508c62 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,11 +6,13 @@
   /* Visual */
   /* Misc */
 }
-@import "~bootstrap/dist/css/bootstrap.css";
-@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
+@import '~bootstrap/dist/css/bootstrap.css';
+@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap';
 
 html,
-body { height: 100%; }
+body {
+  height: 100%;
+}
 
 body {
   margin: 0;
@@ -35,7 +37,7 @@ a:hover,
 a:focus {
   text-decoration: none;
   color: inherit;
-  transition: all .3s;
+  transition: all 0.3s;
 }
 
 .wrapper {
@@ -50,15 +52,19 @@ a:focus {
 
 ul ul a {
   padding-left: 30px;
-  font-size: .9em;
+  font-size: 0.9em;
   background: #6d7fcc;
 }
 
 .full-width,
-table { width: 100%; }
+table {
+  width: 100%;
+}
 
 li.breadcrumb-item.active,
-footer.footer { color: black; }
+footer.footer {
+  color: black;
+}
 
 .clipboard {
   position: absolute;
@@ -91,9 +97,13 @@ footer.footer { color: black; }
 }
 
 #sidebar .sidebar-header strong,
-#sidebar.active .sidebar-header h3 { display: none; }
+#sidebar.active .sidebar-header h3 {
+  display: none;
+}
 
-#sidebar.active .sidebar-header strong { display: block; }
+#sidebar.active .sidebar-header strong {
+  display: block;
+}
 
 #sidebar ul li a {
   display: block;
@@ -104,11 +114,13 @@ footer.footer { color: black; }
 }
 
 #sidebar ul li a.active,
-#sidebar.active ul li a.active { background: #000; }
+#sidebar.active ul li a.active {
+  background: #000;
+}
 
 #sidebar.active ul li a {
   padding: 20px 10px;
-  font-size: .85em;
+  font-size: 0.85em;
   text-align: center;
 }
 
@@ -119,7 +131,9 @@ footer.footer { color: black; }
   font-size: 1.8em;
 }
 
-#sidebar.active ul li a { padding: 10px; }
+#sidebar.active ul li a {
+  padding: 10px;
+}
 
 #sidebar.active .dropdown-toggle::after {
   top: auto;
@@ -146,12 +160,14 @@ footer.footer { color: black; }
 }
 
 #sidebar ul li.active > a,
-a[aria-expanded="true"] {
+a[aria-expanded='true'] {
   color: #fff;
   background: #313a46;
 }
 
-a[data-toggle="collapse"] { position: relative; }
+a[data-toggle='collapse'] {
+  position: relative;
+}
 
 .dropdown-toggle::after {
   position: absolute;
@@ -170,7 +186,9 @@ a[data-toggle="collapse"] { position: relative; }
 #sidebar,
 #sidebar.active,
 #content,
-#content.active { transition: all .3s cubic-bezier(.945, .020, .270, .665); }
+#content.active {
+  transition: all 0.3s cubic-bezier(0.945, 0.02, 0.27, 0.665);
+}
 
 #sidebarCollapse {
   width: 40px;
@@ -184,14 +202,20 @@ a[data-toggle="collapse"] { position: relative; }
   height: 2px;
   margin: 0 auto;
   background: #555;
-  transition: all .8s cubic-bezier(.810, -.330, .345, 1.375);
+  transition: all 0.8s cubic-bezier(0.81, -0.33, 0.345, 1.375);
 }
 
-#sidebarCollapse span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
+#sidebarCollapse span:first-of-type {
+  transform: rotate(45deg) translate(2px, 2px);
+}
 
-#sidebarCollapse span:nth-of-type(2) { opacity: 0; }
+#sidebarCollapse span:nth-of-type(2) {
+  opacity: 0;
+}
 
-#sidebarCollapse span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
+#sidebarCollapse span:last-of-type {
+  transform: rotate(-45deg) translate(1px, -1px);
+}
 
 #sidebarCollapse.active span {
   margin: 5px auto;
@@ -205,11 +229,17 @@ a[data-toggle="collapse"] { position: relative; }
   color: #98a6ad;
 }
 
-.mat-column-select { overflow: initial; }
+.mat-column-select {
+  overflow: initial;
+}
 
-button { height: 2.5rem; }
+button {
+  height: 2.5rem;
+}
 
-.badge-pill { width: 5rem; }
+.badge-pill {
+  width: 5rem;
+}
 
 .mat-column {
   word-wrap: break-word;
@@ -246,14 +276,18 @@ button { height: 2.5rem; }
   }
 
   #sidebar .sidebar-header strong,
-  #sidebar.active .sidebar-header h3 { display: none; }
+  #sidebar.active .sidebar-header h3 {
+    display: none;
+  }
 
   #sidebar.active .sidebar-header strong,
-  #sidebar.active ul li a i { display: block; }
+  #sidebar.active ul li a i {
+    display: block;
+  }
 
   #sidebar.active ul li a {
     padding: 20px 10px;
-    font-size: .85em;
+    font-size: 0.85em;
   }
 
   #sidebar.active ul li a i {
@@ -262,7 +296,9 @@ button { height: 2.5rem; }
     font-size: 1.8em;
   }
 
-  #sidebar.active ul ul a { padding: 10px; }
+  #sidebar.active ul ul a {
+    padding: 10px;
+  }
 
   .dropdown-toggle::after {
     top: auto;
@@ -279,15 +315,21 @@ button { height: 2.5rem; }
     height: 100vh;
   }
 
-  #content .menutoggle { margin-left: 250px; }
+  #content .menutoggle {
+    margin-left: 250px;
+  }
 
   #sidebar,
   #content,
   #content.active,
-  #content.active .menutoggle { margin-left: 0; }
+  #content.active .menutoggle {
+    margin-left: 0;
+  }
 
   #content .menutoggle,
-  #content.active .menutoggle { transition: all .3s cubic-bezier(.945, .020, .270, .665); }
+  #content.active .menutoggle {
+    transition: all 0.3s cubic-bezier(0.945, 0.02, 0.27, 0.665);
+  }
 
   #sidebarCollapse span:first-of-type,
   #sidebarCollapse span:nth-of-type(2),
@@ -297,11 +339,19 @@ button { height: 2.5rem; }
     opacity: 1;
   }
 
-  #sidebarCollapse.active span { margin: 0 auto; }
+  #sidebarCollapse.active span {
+    margin: 0 auto;
+  }
 
-  #sidebarCollapse.active span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
+  #sidebarCollapse.active span:first-of-type {
+    transform: rotate(45deg) translate(2px, 2px);
+  }
 
-  #sidebarCollapse.active span:nth-of-type(2) { opacity: 0; }
+  #sidebarCollapse.active span:nth-of-type(2) {
+    opacity: 0;
+  }
 
-  #sidebarCollapse.active span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
+  #sidebarCollapse.active span:last-of-type {
+    transform: rotate(-45deg) translate(1px, -1px);
+  }
 }
diff --git a/src/test.ts b/src/test.ts
index 50193eb..a37d89c 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -4,21 +4,22 @@ import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
     keys(): string[];
     <T>(id: string): T;
   };
 };
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
diff --git a/src/testing/router-link-directive-stub.ts b/src/testing/router-link-directive-stub.ts
index 1311caa..a7ba6df 100644
--- a/src/testing/router-link-directive-stub.ts
+++ b/src/testing/router-link-directive-stub.ts
@@ -1,7 +1,7 @@
-import {Directive, HostListener, Input} from '@angular/core';
+import { Directive, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[appRouterLink]'
+  selector: '[appRouterLink]',
 })
 // tslint:disable-next-line:directive-class-suffix
 export class RouterLinkDirectiveStub {
diff --git a/src/testing/shared-module-stub.ts b/src/testing/shared-module-stub.ts
index d74d246..088f463 100644
--- a/src/testing/shared-module-stub.ts
+++ b/src/testing/shared-module-stub.ts
@@ -1,10 +1,10 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
-@Component({selector: 'app-sidebar', template: ''})
+@Component({ selector: 'app-sidebar', template: '' })
 export class SidebarStubComponent {}
 
-@Component({selector: 'app-topbar', template: ''})
+@Component({ selector: 'app-topbar', template: '' })
 export class TopbarStubComponent {}
 
-@Component({selector: 'app-footer', template: ''})
+@Component({ selector: 'app-footer', template: '' })
 export class FooterStubComponent {}
diff --git a/src/testing/token-service-stub.ts b/src/testing/token-service-stub.ts
index 7cba280..ba96686 100644
--- a/src/testing/token-service-stub.ts
+++ b/src/testing/token-service-stub.ts
@@ -2,7 +2,7 @@ export class TokenServiceStub {
   getBySymbol(symbol: string): any {
     return {
       name: 'Reserve',
-      symbol: 'RSV'
+      symbol: 'RSV',
     };
   }
 }
diff --git a/src/testing/transaction-service-stub.ts b/src/testing/transaction-service-stub.ts
index 5b05098..d026e3c 100644
--- a/src/testing/transaction-service-stub.ts
+++ b/src/testing/transaction-service-stub.ts
@@ -1,4 +1,4 @@
-import {Observable, of} from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 export class TransactionServiceStub {
   setTransaction(transaction: any, cacheSize: number): void {}
diff --git a/src/testing/user-service-stub.ts b/src/testing/user-service-stub.ts
index ba19a02..f549542 100644
--- a/src/testing/user-service-stub.ts
+++ b/src/testing/user-service-stub.ts
@@ -1,12 +1,72 @@
-import {Observable, of} from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 export class UserServiceStub {
   users = [
-    {id: 1, name: 'John Doe', phone: '+25412345678', address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865', type: 'user', created: '08/16/2020', balance: '12987', failedPinAttempts: 1, status: 'approved', bio: 'Bodaboda', gender: 'male'},
-    {id: 2, name: 'Jane Buck', phone: '+25412341234', address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865', type: 'vendor', created: '04/02/2020', balance: '56281', failedPinAttempts: 0, status: 'approved', bio: 'Groceries', gender: 'female'},
-    {id: 3, name: 'Mc Donald', phone: '+25498765432', address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865', type: 'group', created: '11/16/2020', balance: '450', failedPinAttempts: 2, status: 'unapproved', bio: 'Food', gender: 'male'},
-    {id: 4, name: 'Hera Cles', phone: '+25498769876', address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865', type: 'user', created: '05/28/2020', balance: '5621', failedPinAttempts: 3, status: 'approved', bio: 'Shop', gender: 'female'},
-    {id: 5, name: 'Silver Fia', phone: '+25462518374', address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865', type: 'token agent', created: '10/10/2020', balance: '817', failedPinAttempts: 0, status: 'unapproved', bio: 'Electronics', gender: 'male'},
+    {
+      id: 1,
+      name: 'John Doe',
+      phone: '+25412345678',
+      address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865',
+      type: 'user',
+      created: '08/16/2020',
+      balance: '12987',
+      failedPinAttempts: 1,
+      status: 'approved',
+      bio: 'Bodaboda',
+      gender: 'male',
+    },
+    {
+      id: 2,
+      name: 'Jane Buck',
+      phone: '+25412341234',
+      address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865',
+      type: 'vendor',
+      created: '04/02/2020',
+      balance: '56281',
+      failedPinAttempts: 0,
+      status: 'approved',
+      bio: 'Groceries',
+      gender: 'female',
+    },
+    {
+      id: 3,
+      name: 'Mc Donald',
+      phone: '+25498765432',
+      address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865',
+      type: 'group',
+      created: '11/16/2020',
+      balance: '450',
+      failedPinAttempts: 2,
+      status: 'unapproved',
+      bio: 'Food',
+      gender: 'male',
+    },
+    {
+      id: 4,
+      name: 'Hera Cles',
+      phone: '+25498769876',
+      address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865',
+      type: 'user',
+      created: '05/28/2020',
+      balance: '5621',
+      failedPinAttempts: 3,
+      status: 'approved',
+      bio: 'Shop',
+      gender: 'female',
+    },
+    {
+      id: 5,
+      name: 'Silver Fia',
+      phone: '+25462518374',
+      address: '0xc86ff893ac40d3950b4d5f94a9b837258b0a9865',
+      type: 'token agent',
+      created: '10/10/2020',
+      balance: '817',
+      failedPinAttempts: 0,
+      status: 'unapproved',
+      bio: 'Electronics',
+      gender: 'male',
+    },
   ];
 
   actions = [
@@ -15,7 +75,13 @@ export class UserServiceStub {
     { id: 3, user: 'Will', role: 'superadmin', action: 'Reclaim RSV 1000', approval: true },
     { id: 4, user: 'Vivian', role: 'enroller', action: 'Complete user profile', approval: true },
     { id: 5, user: 'Jack', role: 'enroller', action: 'Reclaim RSV 200', approval: false },
-    { id: 6, user: 'Patience', role: 'enroller', action: 'Change user information', approval: false }
+    {
+      id: 6,
+      user: 'Patience',
+      role: 'enroller',
+      action: 'Change user information',
+      approval: false,
+    },
   ];
 
   getUserById(id: string): any {
@@ -30,7 +96,7 @@ export class UserServiceStub {
       failedPinAttempts: 1,
       status: 'approved',
       bio: 'Bodaboda',
-      gender: 'male'
+      gender: 'male',
     };
   }
 
@@ -41,20 +107,17 @@ export class UserServiceStub {
       key: {
         ethereum: [
           '0x51d3c8e2e421604e2b644117a362d589c5434739',
-          '0x9D7c284907acbd4a0cE2dDD0AA69147A921a573D'
-        ]
+          '0x9D7c284907acbd4a0cE2dDD0AA69147A921a573D',
+        ],
       },
       location: {
         external: {},
         latitude: '22.430670',
-        longitude: '151.002995'
+        longitude: '151.002995',
       },
-      selling: [
-        'environment',
-        'health',
-        'transport'
-      ],
-      vcard: 'QkVHSU46VkNBUkQNClZFUlNJT046My4wDQpFTUFJTDphYXJuZXNlbkBob3RtYWlsLmNvbQ0KRk46S3VydMKgS3JhbmpjDQpOOktyYW5qYztLdXJ0Ozs7DQpURUw7VFlQPUNFTEw6NjkyNTAzMzQ5ODE5Ng0KRU5EOlZDQVJEDQo='
+      selling: ['environment', 'health', 'transport'],
+      vcard:
+        'QkVHSU46VkNBUkQNClZFUlNJT046My4wDQpFTUFJTDphYXJuZXNlbkBob3RtYWlsLmNvbQ0KRk46S3VydMKgS3JhbmpjDQpOOktyYW5qYztLdXJ0Ozs7DQpURUw7VFlQPUNFTEw6NjkyNTAzMzQ5ODE5Ng0KRU5EOlZDQVJEDQo=',
     });
   }
 
@@ -64,7 +127,7 @@ export class UserServiceStub {
       user: 'Tom',
       role: 'enroller',
       action: 'Disburse RSV 100',
-      approval: false
+      approval: false,
     };
   }
 
@@ -74,7 +137,7 @@ export class UserServiceStub {
       user: 'Tom',
       role: 'enroller',
       action: 'Disburse RSV 100',
-      approval: true
+      approval: true,
     };
   }
 }