diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7fb44f7..ab6f003 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -42,7 +42,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
 
 import { DxChartModule } from 'devextreme-angular';
 import { StackedBarChartComponent } from './panels/stacked-bar.component';
-import { NewSectionComponent } from './dashboard/new-section.component';
+import { SuppliersComponent } from './dashboard/suppliers.component';
 
 
 
@@ -68,7 +68,7 @@ import { NewSectionComponent } from './dashboard/new-section.component';
     BreadcrumbsComponent,
     SIDEBAR_TOGGLE_DIRECTIVES,
     AsideToggleDirective,
-    NewSectionComponent,
+    SuppliersComponent,
     P404Component,
     P500Component,
   ],
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index ccca9ee..4005cc4 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -7,7 +7,7 @@ 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 { NewSectionComponent } from '../dashboard/new-section.component';
+import { SuppliersComponent } from '../dashboard/suppliers.component';
 import { StackedBarChartComponent } from '../panels/stacked-bar.component';
 
 
diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts
index 9df0646..faef8f5 100644
--- a/src/app/dashboard/dashboard.routing.ts
+++ b/src/app/dashboard/dashboard.routing.ts
@@ -17,7 +17,7 @@ import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
 import { TrailMapComponent } from './trail-map.component';
-import { NewSectionComponent } from './new-section.component';
+import { SuppliersComponent } from './suppliers.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -87,9 +87,9 @@ const routes: Routes = [
         data: { title: 'Give Feedback' },
       },
       {
-        path: 'new-section',
-        component: NewSectionComponent,
-        data: { title: 'New Section' }
+        path: 'suppliers',
+        component: SuppliersComponent,
+        data: { title: 'Suppliers' }
       }
     ],
   }
diff --git a/src/app/dashboard/new-section.component.html b/src/app/dashboard/suppliers.component.html
similarity index 82%
rename from src/app/dashboard/new-section.component.html
rename to src/app/dashboard/suppliers.component.html
index c80e223..b953729 100644
--- a/src/app/dashboard/new-section.component.html
+++ b/src/app/dashboard/suppliers.component.html
@@ -10,8 +10,8 @@
       </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" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr> -->
-        <tr>
+        <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
+        <!-- <tr>
           <td>Supplier's Name</td>
           <td>Supplier's Postcode</td>
           <td>Supplier's Spend</td>
@@ -26,7 +26,7 @@
               <td>Supplier 3's Postcode</td>
               <td>Supplier 3's Spend</td>
             </tr>
-      </tbody>
+      </tbody> -->
     </table>
   </div>
 </div>
diff --git a/src/app/dashboard/new-section.component.ts b/src/app/dashboard/suppliers.component.ts
similarity index 56%
rename from src/app/dashboard/new-section.component.ts
rename to src/app/dashboard/suppliers.component.ts
index 28ec0ff..badbc76 100644
--- a/src/app/dashboard/new-section.component.ts
+++ b/src/app/dashboard/suppliers.component.ts
@@ -4,11 +4,22 @@ 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;
+}
 
 @Component({
-  templateUrl: 'new-section.component.html',
+  templateUrl: 'suppliers.component.html',
 })
-export class NewSectionComponent implements OnInit, AfterViewInit {
+export class SuppliersComponent implements OnInit, AfterViewInit {
+  @Input() public recurList: Array<RecurSupplierData>;
+  @Output() public onClick = new EventEmitter();
+  @Input() public categories: any;
+
+
+  public recurClick(event: any): void {
+    this.onClick.emit( event );
+  }
 
   constructor(
     private api: ApiService,
@@ -21,7 +32,4 @@ export class NewSectionComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
   }
 
-
-
-
 }
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 0769c82..9432f1d 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -95,10 +95,10 @@
           </a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" routerLinkActive="active" [routerLink]="['/new-section']">
+            <a class="nav-link" routerLinkActive="active" [routerLink]="['/suppliers']">
               <div class="row no-gutters align-items-center">
                 <div class="col-2"><i class="icon-speedometer"></i></div>
-                <div class="col-10">New section</div>
+                <div class="col-10">Suppliers</div>
               </div>
             </a>
           </li>