diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html
index f11d074..ef36d58 100644
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@@ -150,7 +150,7 @@
           </div><!--/.row-->
           <div class="chart-wrapper">
             <canvas baseChart class="chart"
-            [datasets]="barChartDataCategory"
+            [datasets]="barChartDataCategoryAll"
             [labels]="barChartLabelsCategory"
             [options]="barChartOptionsCategory"
             [legend]="barChartLegendCategory"
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 34dd082..6c153a4 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -100,6 +100,7 @@ export class DashboardCustomerComponent implements OnInit {
   public barChartLegendCategory:boolean = false;
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
+  public barChartDataCategoryAll:any[]=[];
 
 
 
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 826cae5..c7e0b8a 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -75,4 +75,105 @@
     <div class="col-xl-6">
       <org-pie-panel></org-pie-panel>
     </div>
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title mb-0">Monthly Spending by Category</h4>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <canvas baseChart
+            [datasets]="barChartDataCategory"
+            [labels]="barChartLabelsCategory"
+            [options]="barChartOptionsCategory"
+            [legend]="barChartLegendCategory"
+            [chartType]="barChartTypeCategory"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title float-left mb-0">Weekly Purchase No.</h4>
+            </div><!--/.col-->
+          </div><!--/.row-->
+          <div class="chart-wrapper">
+            <ul class="horizontal-bars type-2">
+              <li>
+                <span class="title">This Week</span>
+                <span class="value">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
+                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    [style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <span class="title">Last Week</span>
+                <span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
+                  ({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    [style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <span class="title">Week Maximum</span>
+                <span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
+                  (100%)</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <span class="title">Weekly Average</span>
+                <span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0  | number:'1.0-0'}} <span class="text-muted small">
+                  ({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    [style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-block">
+                  <div class="row">
+                    <div class="col-12">
+                      <h4 class="card-title float-left mb-0">All Purchases by Category</h4>
+                    </div><!--/.col-->
+                  </div><!--/.row-->
+                  <div class="chart-wrapper">
+                    <canvas baseChart class="chart"
+                    [datasets]="barChartDataCategory"
+                    [labels]="barChartLabelsCategory"
+                    [options]="barChartOptionsCategory"
+                    [legend]="barChartLegendCategory"
+                    [chartType]="barChartTypeCategory"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                </div>
+              </div>
+            </div>
 </div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index cf7032e..ca370a4 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -130,6 +130,7 @@ export class DashboardComponent {
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
 
+
   public lineChartDataSector: ChartDataSets[] = [
     { data: [], label: '' },
   ];
diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html
index fcf79dd..6dcdd54 100644
--- a/src/app/dashboard/suppliers.component.html
+++ b/src/app/dashboard/suppliers.component.html
@@ -1,33 +1,39 @@
 <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>Name</th>
-          <th>Postcode</th>
-          <th>Spend</th>
-        </tr>
-      </thead>
-      <tbody>
+  <div class="card">
+    <div class="card-header">
+      <strong>List of Suppliers</strong>
+      <small>This lists all suppliers, their postcode and spend.</small>
+    </div>
+    <div class="card-block">
+      <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>
-</div><!--/.col-->
+          <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>
+  </div><!--/.col-->
+</div>
diff --git a/src/scss/bootstrap/utilities/_spacing.scss b/src/scss/bootstrap/utilities/_spacing.scss
index c89816b..f428be0 100644
--- a/src/scss/bootstrap/utilities/_spacing.scss
+++ b/src/scss/bootstrap/utilities/_spacing.scss
@@ -26,7 +26,7 @@
     // Some special margin utils
     .m#{$infix}-auto  { margin:        auto !important; }
     .mt#{$infix}-auto { margin-top:    auto !important; }
-    .mr#{$infix}-auto { margin-right:  auto !important; }
+    .mr#{$infix}-auto { margin-right:  20px !important; }
     .mb#{$infix}-auto { margin-bottom: auto !important; }
     .ml#{$infix}-auto { margin-left:   auto !important; }
     .mx#{$infix}-auto {