diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 559530d..bb6f871 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -9,7 +9,6 @@ import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'
 import { PiePanel } from '../panels/pie-panel.component';
 import { DataType } from '../shared/data-types.enum';
 import * as moment from 'moment';
-import { SuppliersComponent } from '../dashboard/suppliers.component';
 import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component';
 // import { StackedBarChartComponent } from '../panels/stacked-bar.component';
 
diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html
index 9c442b7..52a53fd 100644
--- a/src/app/dashboard/suppliers.component.html
+++ b/src/app/dashboard/suppliers.component.html
@@ -1,46 +1,58 @@
-<script type="text/javascript" charset="utf8" src=""></script>
 <div class="animated fadeIn">
-  <div class="form-group row">
-    <table class="table table-striped table-hover">
-      <thead>
-        <tr>
-          <th (click)="sortName()">Name <span class="fa-stack">
-            <i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
-            <i *ngIf="sortBy !== 'name' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
-          </span></th>
-          <th (click)="sortPostcode()">Postcode <span class="fa-stack">
-            <i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
-            <i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
-          </span></th>
-          <th (click)="sortSpend()">Spend <span class="fa-stack">
-            <i *ngIf="sortBy !== 'spend' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
-            <i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
-          </span></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig" [supplier]="supplier"></tr>
-      </tbody>
-    </table>
-    <pagination-template #p="paginationApi"
-    [id]="paginateConfig.id"
-    (pageChange)="loadSuppliers($event)">
-    <ul class="pagination">
-       <li class="page-item" [class.disabled]="p.isFirstPage()">
-         <a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
-       </li>
-       <li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
-          <a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
-              <span>{{ page.label }}</span>
-          </a>
-          <div class="page-link" *ngIf="p.getCurrent() === page.value">
-              <span>{{ page.label }}</span>
-          </div>
-      </li>
-      <li class="page-item" [class.disabled]="p.isLastPage()">
-        <a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
-      </li>
-    </ul>
-    </pagination-template>
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>List of Suppliers</strong>
+          <small>This lists all suppliers that have been submitted.</small>
+        </div>
+        <div *ngIf="supplierListAvailable" class="card-block">
+          <table class="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th (click)="sortName()">Name <span class="fa-stack">
+                  <i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
+                  <i *ngIf="sortBy !== 'name' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
+                </span></th>
+                <th (click)="sortPostcode()">Postcode <span class="fa-stack">
+                  <i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
+                  <i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
+                </span></th>
+                <th (click)="sortSpend()">Spend <span class="fa-stack">
+                  <i *ngIf="sortBy !== 'spend' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
+                  <i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
+                </span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig" [supplier]="supplier"></tr>
+            </tbody>
+          </table>
+          <pagination-template #p="paginationApi"
+          [id]="paginateConfig.id"
+          (pageChange)="loadSuppliers($event)">
+          <ul class="pagination">
+             <li class="page-item" [class.disabled]="p.isFirstPage()">
+               <a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
+             </li>
+             <li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
+                <a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
+                    <span>{{ page.label }}</span>
+                </a>
+                <div class="page-link" *ngIf="p.getCurrent() === page.value">
+                    <span>{{ page.label }}</span>
+                </div>
+            </li>
+            <li class="page-item" [class.disabled]="p.isLastPage()">
+              <a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
+            </li>
+          </ul>
+          </pagination-template>
+        </div>
+        <div *ngIf="!supplierListAvailable" class="card-block">
+          No Suppliers available.
+        </div>
+      </div>
+    </div>
   </div>
-</div><!--/.col-->
+</div>
diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts
index 170f674..e3cbf0f 100644
--- a/src/app/dashboard/suppliers.component.ts
+++ b/src/app/dashboard/suppliers.component.ts
@@ -3,16 +3,12 @@ import { ApiService } from '../providers/api-service';
 import { AgmCoreModule } from '@agm/core';
 import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
 import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
-
-interface SuppliersComponent {
-  name : string;
-}
+import { PaginationInstance } from 'ngx-pagination';
 
 @Component({
   templateUrl: 'suppliers.component.html',
 })
 export class SuppliersComponent implements OnInit, AfterViewInit {
-  @Input() public recurList: Array<RecurSupplierData>;
   @Output() public onClick = new EventEmitter();
   @Input() public categories: any;
 
@@ -44,9 +40,11 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
     this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe(
       result => {
         this.supplierList = result.suppliers;
+        if (this.supplierList) {
+          this.supplierListAvailable = true;
+        }
         this.paginateConfig.totalItems = result.page_no;
         this.paginateConfig.currentPage = logPage;
-        this.noTransactionList = false;
       },
       error => {
         console.log('Retrieval Error');
@@ -59,7 +57,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
   sortName() { this.sortByColumn('name'); }
   sortPostcode() { this.sortByColumn('postcode'); }
   sortSpend() { this.sortByColumn('spend'); }
-  
+
   sortByColumn(name) {
       this.sortBy = name;
       this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
diff --git a/src/app/shared/supplier-result.component.ts b/src/app/shared/supplier-result.component.ts
index 83ffc4c..aac4e75 100644
--- a/src/app/shared/supplier-result.component.ts
+++ b/src/app/shared/supplier-result.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 interface SupplierData {
   name: string;
   postcode: string;
-  spend: number = 0;
+  spend: number;
 }
 
 @Component({