diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1f44ff4..1f9dd9a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,8 +40,8 @@ import { P500Component } from './pages/500.component';
 import { AuthModule } from './auth/auth.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 
-import { DxChartModule } from 'devextreme-angular';
-import { StackedBarChartComponent } from './panels/stacked-bar.component';
+import { ChartsModule } from 'ng2-charts';
+// import { StackedBarChartComponent } from './panels/stacked-bar.component';
 import { SuppliersComponent } from './dashboard/suppliers.component';
 import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
 
@@ -51,7 +51,6 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
   imports: [
     BrowserModule,
     HttpClientModule,
-    DxChartModule,
     NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
@@ -62,7 +61,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
   ],
   declarations: [
     AppComponent,
-    StackedBarChartComponent,
+    // StackedBarChartComponent,
     FullLayoutComponent,
     SimpleLayoutComponent,
     NAV_DROPDOWN_DIRECTIVES,
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 1c81ca0..caf631f 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -9,8 +9,11 @@ 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';
+// import { StackedBarChartComponent } from '../panels/stacked-bar.component';
 
+interface RecurSupplierData {
+  name : string;
+}
 
 @Component({
   templateUrl: 'dashboard-customer.component.html'
diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html
index 781cdf1..0382c67 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.html
+++ b/src/app/dashboard/more-graphs-and-tables.component.html
@@ -1,33 +1,14 @@
-<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
 <div class="animated fadeIn">
   <div class="form-group row">
-    <table class="table table-striped table-hover">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Postcode</th>
-          <th>Spend</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- table body - name, postcode and spend data should be presented here in cost descending order -->
-        <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
-        <tr>
-          <td>Tom's Tippity Top Toenails Ltd.</td>
-          <td>LA11LY</td>
-          <td>£250,000.00</td>
-        </tr>
-        <tr>
-          <td>Selena's Scratching Sticks Inc.</td>
-          <td>WS15PQ</td>
-          <td>£5.00</td>
-        </tr>
-        <tr>
-          <td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
-          <td>PF43RD</td>
-          <td>£22.00</td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="card-block">
+        <div class="row">
+          <div class="col-12">
+            <h4 class="card-title mb-0">Weekly Spending by Category</h4>
+          </div>
+        </div>
+        <div class="chart-wrapper">
+          <canvas baseChart class="chart"></canvas>
+        </div>
+      </div>
   </div>
-</div><!--/.col-->
+</div>
\ No newline at end of file
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts
index c4b6cb0..fffc519 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.ts
+++ b/src/app/dashboard/more-graphs-and-tables.component.ts
@@ -4,19 +4,18 @@ import { AgmCoreModule } from '@agm/core';
 import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
 import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 
-interface RecurSupplierData {
-  name : string;
-}
+// interface RecurSupplierData {
+//   name : string;
+// }
 
 @Component({
   templateUrl: 'more-graphs-and-tables.component.html',
 })
-export class MoreStuffComponent implements OnInit, AfterViewInit {  // if you wanna rename this, replace in all files 'MoreStuffComponent' with desired name and 'more-graphs-and-tables.component' with another desired name
-  @Input() public recurList: Array<RecurSupplierData>;
+export class MoreStuffComponent implements OnInit {  // if you wanna rename this, replace in all files 'MoreStuffComponent' with desired name and 'more-graphs-and-tables.component' with another desired name
+  // @Input() public recurList: Array<RecurSupplierData>;
   @Output() public onClick = new EventEmitter();
   @Input() public categories: any;
 
-
   public recurClick(event: any): void {
     this.onClick.emit( event );
   }
@@ -28,8 +27,4 @@ export class MoreStuffComponent implements OnInit, AfterViewInit {  // if you wa
   ngOnInit(): void {
     
   }
-
-  ngAfterViewInit() {
-  }
-
 }
diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html
index b0a29f2..fcf79dd 100644
--- a/src/app/dashboard/suppliers.component.html
+++ b/src/app/dashboard/suppliers.component.html
@@ -1,4 +1,4 @@
-<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
+<script type="text/javascript" charset="utf8" src=""></script>
 <div class="animated fadeIn">
   <div class="form-group row">
     <table class="table table-striped table-hover">
@@ -13,20 +13,20 @@
         <!-- table body - name, postcode and spend data should be presented here in cost descending order -->
         <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
         <tr>
-          <td>Bill's Buildings</td>
-          <td>LA13RB</td>
-          <td>£34.64</td>
+          <td>Tom's Tippity Top Toenails Ltd.</td>
+          <td>LA11LY</td>
+          <td>£250,000.00</td>
         </tr>
         <tr>
-            <td>Sam's Snake</td>
-            <td>TRY3R3</td>
-            <td>£567.76</td>
-          </tr>
-          <tr>
-              <td>Lloyds</td>
-              <td>ABV134</td>
-              <td>£9.00</td>
-            </tr>
+          <td>Selena's Scratching Sticks Inc.</td>
+          <td>WS15PQ</td> 
+          <td>£5.00</td>
+        </tr>
+        <tr>
+          <td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
+          <td>PF43RD</td>
+          <td>£22.00</td>
+        </tr>
       </tbody>
     </table>
   </div>
diff --git a/src/app/panels/stacked-bar.component.html b/src/app/panels/stacked-bar.component.html.broken
similarity index 100%
rename from src/app/panels/stacked-bar.component.html
rename to src/app/panels/stacked-bar.component.html.broken
diff --git a/src/app/panels/stacked-bar.component.ts b/src/app/panels/stacked-bar.component.ts.broken
similarity index 100%
rename from src/app/panels/stacked-bar.component.ts
rename to src/app/panels/stacked-bar.component.ts.broken