diff --git a/package-lock.json b/package-lock.json
index ab685f8..ffb94b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1153,6 +1153,14 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular2-datetimepicker": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/angular2-datetimepicker/-/angular2-datetimepicker-1.1.1.tgz",
+      "integrity": "sha1-acTZkcSKYNq4CiDYfoU5bBhfH0I=",
+      "requires": {
+        "font-awesome": "*"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -4016,6 +4024,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index ce48a88..06804f4 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@coreui/icons": "0.3.0",
     "ajv": "^6.10.0",
     "ajv-keywords": "^3.4.0",
+    "angular2-datetimepicker": "^1.1.1",
     "chart.js": "^2.8.0",
     "chartjs-adapter-luxon": "^0.2.0",
     "core-js": "^2.6.9",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cc8229e..baf5a2a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -41,7 +41,6 @@ import { P500Component } from './pages/500.component';
 // Submodules
 import { AuthModule } from './auth/auth.module';
 import { DashboardModule } from './dashboard/dashboard.module';
-
 import { ChartsModule } from 'ng2-charts';
 // import { StackedBarChartComponent } from './panels/stacked-bar.component';
 import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html
index a6e52a6..8f73ecc 100644
--- a/src/app/dashboard/add-data.component.html
+++ b/src/app/dashboard/add-data.component.html
@@ -24,6 +24,7 @@
               <span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
             </div>
           </div>
+
           <div class="form-group row">
             <label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
             <div class="col-md-9">
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index eae9edd..8870b69 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -42,17 +42,17 @@ export class DashboardCustomerComponent implements OnInit {
   public doughnutChartColoursCategory: any[] = [
                {
                  backgroundColor:[
-                   '#ffa1b5',
-                   'green',
-                   '#52afed',
-                   'purple',
-                   'yellow',
-                   'brown',
-                   'magenta',
-                   'cyan',
-                   'orange',
-                   'red',
-                   '#000000'
+                     '#ffa1b5',
+                     '#3cde52',
+                     '#52afed',
+                     '#c133e3',
+                     '#f7fa08',
+                     '#75152d',
+                     '#ee12ee',
+                     '#15eaea',
+                     '#eaa015',
+                     '#ea1515',
+                     '#2d4fcc'
                  ]
                }];
 
@@ -121,17 +121,17 @@ export class DashboardCustomerComponent implements OnInit {
   public barChartColoursCategory: any[] = [
     {
       backgroundColor:[
-        '#ffa1b5',
-        'green',
-        '#52afed',
-        'purple',
-        'yellow',
-        'brown',
-        'magenta',
-        'cyan',
-        'orange',
-        'red',
-        '#000000'
+          '#ffa1b5',
+          '#3cde52',
+          '#52afed',
+          '#c133e3',
+          '#f7fa08',
+          '#75152d',
+          '#ee12ee',
+          '#15eaea',
+          '#eaa015',
+          '#ea1515',
+          '#2d4fcc'
       ]
     }];
 
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 7c5dafd..627fbe4 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -68,6 +68,7 @@
                 [datasets]="doughnutChartDataCategory"
                 [labels]="doughnutChartLabelsCategory"
                 [options]="doughnutChartOptionsCategory"
+                [colors]="doughnutChartColoursCategory"
                 [legend]="chartLegend"
                 [chartType]="chartType"
                 (chartHover)="chartHovered($event)"
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 0756ab3..f15669b 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -84,16 +84,16 @@ export class DashboardComponent {
                {
                  backgroundColor:[
                    '#ffa1b5',
-                   'green',
+                   '#3cde52',
                    '#52afed',
-                   'purple',
-                   'yellow',
-                   'brown',
-                   'magenta',
-                   'cyan',
-                   'orange',
-                   'red',
-                   '#000000'
+                   '#c133e3',
+                   '#f7fa08',
+                   '#75152d',
+                   '#ee12ee',
+                   '#15eaea',
+                   '#eaa015',
+                   '#ea1515',
+                   '#2d4fcc'
                  ]
                }];
 
@@ -138,17 +138,17 @@ export class DashboardComponent {
   public barChartColoursCategory: any[] = [
     {
       backgroundColor:[
-        '#ffa1b5',
-        'green',
-        '#52afed',
-        'purple',
-        'yellow',
-        'brown',
-        'magenta',
-        'cyan',
-        'orange',
-        'red',
-        '#000000'
+          '#ffa1b5',
+          '#3cde52',
+          '#52afed',
+          '#c133e3',
+          '#f7fa08',
+          '#75152d',
+          '#ee12ee',
+          '#15eaea',
+          '#eaa015',
+          '#ea1515',
+          '#2d4fcc'
       ]
     }];
 
diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html
index 300926c..d535132 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.html
+++ b/src/app/dashboard/more-graphs-and-tables.component.html
@@ -30,6 +30,10 @@
         <div class="col-sm-8">
           <h4 class="card-title mb-0">Spend amount and number of organisations</h4>
         </div>
+        <div class="col-sm-4 hidden-sm-down">
+          <input type="date" [(ngModel)]="lineChartBegin" (change)="lineChartUpdate()">
+          <input type="date" [(ngModel)]="lineChartEnd" (change)="lineChartUpdate()">
+        </div>
       </div>
       <div>
         <canvas baseChart
@@ -45,9 +49,12 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-sm-5">
+        <div class="col-sm-8">
           <h4 class="card-title mb-0">Supplier Spend History</h4>
         </div>
+        <div class="col-sm-4 hidden-sm-down">
+          <button (click)="supplierChartUpdate()">New Suppliers</button>
+        </div>
       </div>
       <div>
         <canvas baseChart #supplierChart
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts
index a346283..7d4398b 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.ts
+++ b/src/app/dashboard/more-graphs-and-tables.component.ts
@@ -82,7 +82,7 @@ export class MoreStuffComponent implements OnInit {
         if (is_item_in_range) {
           graph_data.push({
             t: new Date(item.date.substring(0, 10)),
-            r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
+            r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
             supplier: item.seller,
             y: item.count,
             value: item.value,
@@ -151,8 +151,7 @@ export class MoreStuffComponent implements OnInit {
       data: [],
       label: ["Spend"],
       borderColor: 'blue',
-      hoverBackgroundColor: 'blue',
-      hoverBorderColor: 'blue',
+      hoverBorderColor: 'black',
       radius: 5,
     },
   ];
@@ -287,13 +286,7 @@ export class MoreStuffComponent implements OnInit {
   }
 
   lineChartUpdate() {
-    console.log("start_range input box: " + this.lineChartBegin.date);
-    console.log("start_range : " + new Date(this.lineChartBegin));
-    console.log("end_range input box: " + this.lineChartEnd);
-    console.log("end_range : " + new Date(this.lineChartEnd));
-
-    this.loadYearSpend();
-    console.log("Line chart updating...");
+    this.loadYearSpend(true, (this.lineChartBegin), (this.lineChartEnd));
 
   }
 
@@ -319,6 +312,26 @@ export class MoreStuffComponent implements OnInit {
       }
     )
   }
+  supplierChartUpdate() {
+    this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
+      result => {
+        let labels = [];
+        let year = [];
+        let half = [];
+        let quarter = [];
+        result.data.map(item => {
+          labels.push(item.name);
+          year.push(item.year_total);
+          half.push(item.half_total);
+          quarter.push(item.quarter_total);
+        });
+        this.supplierMonthChartData[0].data = quarter.slice(0,15);
+        this.supplierMonthChartData[1].data = half.slice(0,15);
+        this.supplierMonthChartData[2].data = year.slice(0,15);
+        this.supplierMonthChartLabels = labels.slice(0,15);
+      }
+    )
+  }
   public supplierMonthChartData: any[] = [
     {
       data: [],
diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html
index 87e9e38..4df6955 100644
--- a/src/app/dashboard/suppliers.component.html
+++ b/src/app/dashboard/suppliers.component.html
@@ -49,11 +49,11 @@
           </ul>
           </pagination-template>
           <select (change)="loadSuppliers(1)" [(ngModel)]="perPage">
-            <option>10</option>
-            <option>20</option>
-            <option>50</option>
-            <option>100</option>
-            <option>200</option>
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
           </select>
         </div>
         <div *ngIf="!supplierListAvailable" class="card-block">
diff --git a/src/app/panels/org-pie-panel.component.ts b/src/app/panels/org-pie-panel.component.ts
index ad2807d..f56152e 100644
--- a/src/app/panels/org-pie-panel.component.ts
+++ b/src/app/panels/org-pie-panel.component.ts
@@ -17,18 +17,19 @@ export class OrgPiePanel implements OnInit {
   public doughnutChartDataLocal: number[] = [];
   public doughnutChartColors: any[] = [
     {
-       backgroundColor: [
-         '#ffa1b5',
-         'green',
-         '#52afed',
-         'purple',
-         'yellow',
-         'brown',
-         'magenta',
-         'cyan',
-         'orange',
-         'pink'
-    ]
+      backgroundColor:[
+        '#ffa1b5',
+        '#3cde52',
+        '#52afed',
+        '#c133e3',
+        '#f7fa08',
+        '#75152d',
+        '#ee12ee',
+        '#15eaea',
+        '#eaa015',
+        '#ea1515',
+        '#2d4fcc'
+      ]
   },
   {
     borderColor: [
diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts
index b0c912f..bf369b4 100644
--- a/src/app/panels/pie-panel.component.ts
+++ b/src/app/panels/pie-panel.component.ts
@@ -18,16 +18,17 @@ export class PiePanel implements OnInit {
   public doughnutChartLabelsLocal: string[] = [];
   public doughnutChartColors: any[] = [
     { backgroundColor: [
-    '#ffa1b5',
-    'green',
-    '#52afed',
-    'purple',
-    'yellow',
-    'brown',
-    'magenta',
-    'cyan',
-    'orange',
-    'pink',
+        '#ffa1b5',
+        '#3cde52',
+        '#52afed',
+        '#c133e3',
+        '#f7fa08',
+        '#75152d',
+        '#ee12ee',
+        '#15eaea',
+        '#eaa015',
+        '#ea1515',
+        '#2d4fcc'
     ]
   },
   { borderColor:[