diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 00fa77c..08d0c63 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGaurd } from '../shared/services/AuthGaurd';
 import { AppComponent } from './app.component';
+import { BuyerGaurd } from 'src/shared/services/BuyerGaurd';
+import { SupplierGaurd } from 'src/shared/services/SupplierGaurd';
 
 const routes: Routes = [
   {
@@ -12,17 +14,22 @@ const routes: Routes = [
   },
   {
     path: "buyerHome",
-    canActivate: [AuthGaurd],
+    canActivate: [AuthGaurd, BuyerGaurd],
     loadChildren: ()=> import('../buyer/buyer.module').then(m=>m.BuyerModule)
   },
   {
     path: "supplierHome",
-    canActivate: [AuthGaurd],
+    canActivate: [AuthGaurd, SupplierGaurd],
     loadChildren: ()=> import('../supplier/supplier.module').then(m=>m.SupplierModule)
   },
   {
     path: 'auth',
     loadChildren: ()=> import('../shared/login/login.module').then(m=> m.LoginModule)
+  },
+  {
+    path: "auction",
+    canActivate: [AuthGaurd],
+    loadChildren: ()=>import('../shared/auction/auction.module').then(m=>m.AuctionModule)
   }
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 736319f..1aa0105 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
+<ngx-spinner  bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#621e72" type = "ball-scale-multiple" [fullScreen] = "true"></ngx-spinner>
 <router-outlet class="min-h-screen"></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8400fc2..25c9d0d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { ToastrModule } from 'ngx-toastr';
     HttpClientModule,
     NgxSpinnerModule,
     BrowserAnimationsModule,
+    NgxSpinnerModule,
     ToastrModule.forRoot()
   ],
   exports: [NgxSpinnerModule],
diff --git a/src/assets/icons/Contract.png b/src/assets/icons/Contract.png
new file mode 100644
index 0000000..9dbf0a4
Binary files /dev/null and b/src/assets/icons/Contract.png differ
diff --git a/src/buyer/bit-list/bit-list.component.html b/src/buyer/bit-list/bit-list.component.html
index 15abbff..c06765f 100644
--- a/src/buyer/bit-list/bit-list.component.html
+++ b/src/buyer/bit-list/bit-list.component.html
@@ -30,9 +30,9 @@
                     <td mat-cell *matCellDef="let element"> <span class="text-black cursor-pointer hover:underline hover:font-medium" (click)="eventClicked(element)" [routerLink]="['../createauction']" [queryParams]="{ eventId: element.id }" skipLocationChange>{{element.name}}</span></td>
                 </ng-container>
 
-                <ng-container matColumnDef="status">
+                <ng-container matColumnDef="displayStatusCode">
                     <th mat-header-cell *matHeaderCellDef> Status </th>
-                    <td mat-cell *matCellDef="let element"> {{element.statusCode}} </td>
+                    <td mat-cell *matCellDef="let element"> {{element.displayStatusCode}} </td>
                 </ng-container>
 
                 <ng-container matColumnDef="action">
diff --git a/src/buyer/bit-list/bit-list.component.ts b/src/buyer/bit-list/bit-list.component.ts
index f6d6545..1d15544 100644
--- a/src/buyer/bit-list/bit-list.component.ts
+++ b/src/buyer/bit-list/bit-list.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
 import { Auction } from 'src/shared/models/Auction.model';
+import { AuctionStatus } from 'src/shared/models/AuctionStatus.enum';
 import { DataManagerService } from 'src/shared/services/DataManager.service';
 import { EventService } from 'src/shared/services/EventService.service';
 
@@ -14,7 +16,7 @@ export class BitListComponent implements OnInit {
 
   dataSource = new MatTableDataSource<Auction>();
   auctions: Auction[] = [];
-  displayedColumns: string[] = ['name', 'status', "action"];
+  displayedColumns: string[] = ['name', 'displayStatusCode', "action"];
 
   headerCofig: any = {
     title: "Auctions",
@@ -24,18 +26,22 @@ export class BitListComponent implements OnInit {
 
   constructor(private eventService: EventService,private router: Router,
     private route: ActivatedRoute,
-    private dataService: DataManagerService) {
+    private dataService: DataManagerService,
+    private spinnerService: NgxSpinnerService) {
 
   }
 
   ngOnInit(): void {
+    this.spinnerService.show();
     this.eventService.getAllEvents().subscribe((events: any) => {
+      
       if (events && events.length > 0) {
         events.forEach((event: any) => {
           var event_: Auction = {
             name: event.name,
             description : event.description,
             statusCode : event.statusCode,
+            displayStatusCode: AuctionStatus[event.statusCode],
             startdate: ",",
             startTime: ",",
             endTime: "",
@@ -46,6 +52,7 @@ export class BitListComponent implements OnInit {
         })
       }
       this.dataSource.data = this.auctions;
+      this.spinnerService.hide();
     })
     
   }
diff --git a/src/buyer/buyer-home/buyer-home.component.ts b/src/buyer/buyer-home/buyer-home.component.ts
index f5350c6..aae4510 100644
--- a/src/buyer/buyer-home/buyer-home.component.ts
+++ b/src/buyer/buyer-home/buyer-home.component.ts
@@ -35,5 +35,6 @@ export class BuyerHomeComponent implements OnInit {
   logOut() {
     console.log("Logout clicked !!");
     this.dataService.clearToken();
+    this.router.navigate(['/auth'], { relativeTo: this.route.parent});
   }
 }
diff --git a/src/buyer/buyer-live/buyer-live.component.html b/src/buyer/buyer-live/buyer-live.component.html
new file mode 100644
index 0000000..16d2243
--- /dev/null
+++ b/src/buyer/buyer-live/buyer-live.component.html
@@ -0,0 +1 @@
+<p>buyer-live works!</p>
diff --git a/src/buyer/buyer-live/buyer-live.component.scss b/src/buyer/buyer-live/buyer-live.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/buyer/buyer-live/buyer-live.component.spec.ts b/src/buyer/buyer-live/buyer-live.component.spec.ts
new file mode 100644
index 0000000..6858cce
--- /dev/null
+++ b/src/buyer/buyer-live/buyer-live.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BuyerLiveComponent } from './buyer-live.component';
+
+describe('BuyerLiveComponent', () => {
+  let component: BuyerLiveComponent;
+  let fixture: ComponentFixture<BuyerLiveComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BuyerLiveComponent]
+    });
+    fixture = TestBed.createComponent(BuyerLiveComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/buyer/buyer-live/buyer-live.component.ts b/src/buyer/buyer-live/buyer-live.component.ts
new file mode 100644
index 0000000..c08ac99
--- /dev/null
+++ b/src/buyer/buyer-live/buyer-live.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-buyer-live',
+  templateUrl: './buyer-live.component.html',
+  styleUrls: ['./buyer-live.component.scss']
+})
+export class BuyerLiveComponent {
+
+}
diff --git a/src/buyer/buyer-live/buyer-live.module.ts b/src/buyer/buyer-live/buyer-live.module.ts
new file mode 100644
index 0000000..3f35177
--- /dev/null
+++ b/src/buyer/buyer-live/buyer-live.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BuyerLiveComponent } from './buyer-live.component';
+
+
+
+@NgModule({
+  declarations: [
+    BuyerLiveComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class BuyerLiveModule { }
diff --git a/src/buyer/create-auction/create-auction.component.ts b/src/buyer/create-auction/create-auction.component.ts
index 389e88b..52fe32a 100644
--- a/src/buyer/create-auction/create-auction.component.ts
+++ b/src/buyer/create-auction/create-auction.component.ts
@@ -9,7 +9,8 @@ import { ActivatedRoute } from '@angular/router';
 import { Auction } from 'src/shared/models/Auction.model';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { ToastrService } from 'ngx-toastr';
-import { AuctionStatus } from 'src/shared/models/AuctionStatus.enum';
+import { AuctionStatus } from '../../shared/models/AuctionStatus.enum';
+import { lastValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-create-auction',
@@ -60,7 +61,6 @@ export class CreateAuctionComponent implements OnInit {
       })
     }
     this.dataSource.data = this.supplierList;
-    this.spinnerService.show();
   }
 
   initalizeAuction() {
@@ -82,6 +82,7 @@ export class CreateAuctionComponent implements OnInit {
   }
 
   getEventDetails() {
+    this.spinnerService.show();
     this.eventService.getEventById(this.eventId).subscribe((result: any) => {
       console.log(result);
       var statusCode: number = Number(result.statusCode);
@@ -102,13 +103,15 @@ export class CreateAuctionComponent implements OnInit {
       if (this.auction.statusCode != 1) {
         this.isReadOnly = true;
       }
+      this.spinnerService.hide();
     });
   }
 
   async createEvent() {
     let self = this;
+    this.spinnerService.show();
     if (this.isNewAuction) {
-      this.eventService.createEvent({
+      var result: any = await this.eventService.createEvent({
         "id": 0,
         "name": this.auction.name,
         "type": "1",
@@ -120,25 +123,27 @@ export class CreateAuctionComponent implements OnInit {
         "endtime": this.auction.endTime,
         "lots": [],
         "suppliers": []
-      }).subscribe((result: any) => {
-        if (result) {
-          self.dms.setDataStoreValue("eventInfo", result);
-          self.eventId = result["id"];
-          self.auction.name = result["name"];
-          self.auction.statusCode = result.statusCode;
-          self.auction.displayStatus = AuctionStatus[result.statusCode]
-          self.isNewAuction = false;
-          self.headerConfig.title = this.auction.name;
-          this.headerConfig.subTitle = this.auction.displayStatus;
-          self.headerConfig.enableSubTitle = true;
-          this.dms.setDataStoreValue("eventId", this.eventId);
-          if (this.auction.statusCode != 1) {
-            this.isReadOnly = true;
-          }
+      }).toPromise();
+
+      // var result = lastValueFrom(resultPipe);
+
+      if (result) {
+        self.dms.setDataStoreValue("eventInfo", result);
+        self.eventId = result["id"];
+        self.auction.name = result["name"];
+        self.auction.statusCode = result.statusCode;
+        self.auction.displayStatus = AuctionStatus[result.statusCode]
+        self.isNewAuction = false;
+        self.headerConfig.title = this.auction.name;
+        this.headerConfig.subTitle = this.auction.displayStatus;
+        self.headerConfig.enableSubTitle = true;
+        this.dms.setDataStoreValue("eventId", this.eventId);
+        if (this.auction.statusCode != 1) {
         }
-      });
+      }
+      this.spinnerService.hide();
     } else {
-      this.eventService.updateEvent({
+      var result: any = await this.eventService.updateEvent({
         "id": this.eventId,
         "name": this.auction.name,
         "type": "1",
@@ -150,27 +155,28 @@ export class CreateAuctionComponent implements OnInit {
         "endtime": this.auction.endTime,
         "lots": [],
         "suppliers": []
-      }).subscribe((result: any) => {
-        if (result) {
-          self.dms.setDataStoreValue("eventInfo", result);
-          self.eventId = result["id"];
-          self.auction.name = result["name"];
-          self.auction.startdate = result["startdate"] ? result["startdate"] : "";
-          self.auction.startTime = result["starttime"] ? result["starttime"] : "";
-          self.auction.endDate = result["enddate"] ? result["enddate"] : "";
-          self.auction.endTime = result["endtime"] ? result["endtime"] : "";
-          self.auction.statusCode = result.statusCode;
-          self.auction.displayStatus = AuctionStatus[result.statusCode]
-          self.isNewAuction = false;
-          self.headerConfig.title = this.auction.name;
-          this.headerConfig.subTitle = this.auction.displayStatus;
-          self.headerConfig.enableSubTitle = true;
-          this.dms.setDataStoreValue("eventId", this.eventId);
-          if (this.auction.statusCode != 1) {
-            this.isReadOnly = true;
-          }
+      }).toPromise();
+
+      if (result) {
+        self.dms.setDataStoreValue("eventInfo", result);
+        self.eventId = result["id"];
+        self.auction.name = result["name"];
+        self.auction.startdate = result["startdate"] ? result["startdate"] : "";
+        self.auction.startTime = result["starttime"] ? result["starttime"] : "";
+        self.auction.endDate = result["enddate"] ? result["enddate"] : "";
+        self.auction.endTime = result["endtime"] ? result["endtime"] : "";
+        self.auction.statusCode = result.statusCode;
+        self.auction.displayStatus = AuctionStatus[result.statusCode]
+        self.isNewAuction = false;
+        self.headerConfig.title = this.auction.name;
+        this.headerConfig.subTitle = this.auction.displayStatus;
+        self.headerConfig.enableSubTitle = true;
+        this.dms.setDataStoreValue("eventId", this.eventId);
+        if (this.auction.statusCode != 1) {
+          this.isReadOnly = true;
         }
-      });
+        this.spinnerService.hide();
+      }
     }
   }
 
@@ -212,13 +218,17 @@ export class CreateAuctionComponent implements OnInit {
     } else if (!(this.auction.endDate && this.auction.endDate.length > 1)) {
       // auction end data missing.
     }
+    this.spinnerService.show();
     await this.createEvent();
+    this.spinnerService.hide();
     this.toastService.success(`Auction Saved to Draft`);
   }
 
   async submitAuction() {
     // validate for whole auction ( A to Z).
+
     var promise = await this.createEvent();
+    this.spinnerService.show();
     this.eventService.submitAuction(this.eventId).subscribe((result: any) => {
       if (result) {
         if (result.isSubmitted) {
@@ -238,6 +248,7 @@ export class CreateAuctionComponent implements OnInit {
             })
         }
       }
+      this.spinnerService.hide();
     });
   }
 }
diff --git a/src/buyer/create-auction/lot-details/lot-details.component.ts b/src/buyer/create-auction/lot-details/lot-details.component.ts
index 29e6d2f..3405cb3 100644
--- a/src/buyer/create-auction/lot-details/lot-details.component.ts
+++ b/src/buyer/create-auction/lot-details/lot-details.component.ts
@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { NgxSpinnerService } from 'ngx-spinner';
 import { ToastrService } from 'ngx-toastr';
 import { Item, Lot } from 'src/shared/models/Lot';
 import { LotService } from 'src/shared/services/LotService.service';
@@ -18,6 +19,7 @@ export class LotDetailsComponent implements OnInit {
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<LotDetailsComponent>,
     private toastService: ToastrService,
+    private spinnerService: NgxSpinnerService,
     private lotService: LotService) {
     this.lot = { id: 0, name: '', description: '', totalPrice: 0, items: [] }
   }
@@ -87,13 +89,17 @@ export class LotDetailsComponent implements OnInit {
     var index = this.lot.items.findIndex((i: any) => { return i.UiId == item.UiId });
     this.lot.items.splice(index, 1);
     if (item._id != 0) {
+      this.spinnerService.show();
       await this.lotService.deleteItem(item._id).toPromise();
+      this.spinnerService.hide();
     }
     this.toastService.success(`${item.name} item deleted successfully`);
   }
 
   saveLot() {
+    this.spinnerService.show()
     this.lotService.saveLot(this.lot).subscribe(result => {
+      this.spinnerService.hide();
       console.log(result);
       this.toastService.success(`Lot Saved Successfully`);
       this.dialogRef.close();
diff --git a/src/buyer/create-auction/lot-grid/lot-grid.component.ts b/src/buyer/create-auction/lot-grid/lot-grid.component.ts
index f99dd31..c592667 100644
--- a/src/buyer/create-auction/lot-grid/lot-grid.component.ts
+++ b/src/buyer/create-auction/lot-grid/lot-grid.component.ts
@@ -8,6 +8,7 @@ import { LotService } from 'src/shared/services/LotService.service';
 import { DataManagerService } from 'src/shared/services/DataManager.service';
 import { ToastrService } from 'ngx-toastr';
 import { SupplierRepositoryComponent } from '../supplier-repository/supplier-repository.component';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 @Component({
   selector: 'app-lot-grid',
@@ -24,6 +25,7 @@ export class LotGridComponent {
 
   constructor(private dialog: MatDialog,
     private toastService: ToastrService,
+    private spinnerService: NgxSpinnerService,
     private lotService: LotService, private dms: DataManagerService) {
     // this.eventId = this.dms.getDataStoreValue("eventId");
   }
@@ -88,9 +90,11 @@ export class LotGridComponent {
      await this.selection.selected.forEach((lot:any)=>{
         selectedLots.push(lot.id);
      })
+     this.spinnerService.show();
      this.lotService.deleteLot(selectedLots).subscribe((result:any)=>{
         this.toastService.success("Lots deleted successfully!!");
         this.getAllLots();
+        this.spinnerService.hide();
      });
   }
 
@@ -120,9 +124,11 @@ export class LotGridComponent {
   getAllLots() {
     let self = this;
     // this.lots
+    this.spinnerService.show();
     this.lotService.getAllLots(this.eventId).subscribe(result => {
       console.log(result);
       self.processLotData(result);
+      this.spinnerService.hide();
     });
   }
 
diff --git a/src/buyer/create-auction/supplier-repository/supplier-repository.component.ts b/src/buyer/create-auction/supplier-repository/supplier-repository.component.ts
index fc8c63b..040e416 100644
--- a/src/buyer/create-auction/supplier-repository/supplier-repository.component.ts
+++ b/src/buyer/create-auction/supplier-repository/supplier-repository.component.ts
@@ -7,6 +7,7 @@ import { SupplierService } from 'src/shared/services/SupplierService.service';
 import { LotDetailsComponent } from '../lot-details/lot-details.component';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { EventService } from 'src/shared/services/EventService.service';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 @Component({
   selector: 'app-supplier-repository',
@@ -25,6 +26,7 @@ export class SupplierRepositoryComponent implements OnInit{
     private supplierService: SupplierService,
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<SupplierRepositoryComponent>,
+    private spinnerService: NgxSpinnerService,
     private toastService: ToastrService) {
 
   }
@@ -35,7 +37,10 @@ export class SupplierRepositoryComponent implements OnInit{
   } 
 
   getSupplierData() {
+    this.spinnerService.show();
+    this.spinnerService.show();
     this.supplierService.getAllSuppliers().subscribe((result:any)=>{
+      this.spinnerService.hide();
       if(result && result.length > 0) {
         result.forEach((supplier:any)=>{
           let supplier_:Supplier = {
@@ -48,6 +53,7 @@ export class SupplierRepositoryComponent implements OnInit{
         });
         this.dataSource.data = this.suppliers;
       }
+      this.spinnerService.hide();
     })
   }
 
@@ -75,7 +81,9 @@ export class SupplierRepositoryComponent implements OnInit{
       selectedIds.push(supplier.id);
     });
     console.log(selectedIds);
+    this.spinnerService.show();
     this.eventService.addSuppliers(selectedIds, this.eventId).subscribe((result:any)=>{
+      this.spinnerService.hide();
       if(result && result.length) {
         this.toastService.success("Suppliers added successfully !!")
       }
diff --git a/src/buyer/create-auction/supplier/supplier.component.ts b/src/buyer/create-auction/supplier/supplier.component.ts
index 2a962a9..10b82a9 100644
--- a/src/buyer/create-auction/supplier/supplier.component.ts
+++ b/src/buyer/create-auction/supplier/supplier.component.ts
@@ -6,6 +6,7 @@ import { Supplier } from 'src/shared/models/supplier';
 import { SupplierRepositoryComponent } from '../supplier-repository/supplier-repository.component';
 import { EventService } from 'src/shared/services/EventService.service';
 import { LotDetailsComponent } from '../lot-details/lot-details.component';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 @Component({
   selector: 'app-supplier',
@@ -22,18 +23,11 @@ export class SupplierComponent implements OnInit{
 
   constructor(private dialog: MatDialog,
     public dialogRef: MatDialogRef<LotDetailsComponent>,
+    private spinnerService: NgxSpinnerService,
     private eventService: EventService) {
   }
 
   ngOnInit(): void {
-    for (var i = 1; i < 10; i++) {
-      this.supplierList.push({
-        name: "Supplier Name" + i,
-        partnerName: "PartnerName" + i,
-        email: "email" + i,
-        id: 0
-      })
-    }
     this.getAddedSuppliers();
     this.dataSource.data = this.supplierList;
   }
@@ -69,8 +63,10 @@ export class SupplierComponent implements OnInit{
   }
 
   getAddedSuppliers() {
+    this.spinnerService.show();
     this.eventService.getAddedSuppliers(this.eventId).subscribe(result=>{
       this.processData(result);
+      this.spinnerService.hide();
     })
   }
 
diff --git a/src/buyer/dashboard/dashboard.component.ts b/src/buyer/dashboard/dashboard.component.ts
index 4956741..4551e3c 100644
--- a/src/buyer/dashboard/dashboard.component.ts
+++ b/src/buyer/dashboard/dashboard.component.ts
@@ -16,7 +16,7 @@ export class DashboardComponent {
       route: "../createauction",
       callback: ()=>{this.onCreateAuctionCicked()},
       params: {
-        eventId: 12
+        eventId: 0
       }
     },
     {
diff --git a/src/shared/auction/auction-header/auction-header.component.html b/src/shared/auction/auction-header/auction-header.component.html
new file mode 100644
index 0000000..4158554
--- /dev/null
+++ b/src/shared/auction/auction-header/auction-header.component.html
@@ -0,0 +1,3 @@
+<div class="min-w-full bg-background p-5 shadow-lg">
+    <img src="../../../assets/icons/procure-hub-high-resolution-logo-transparent.png" width="200px"/>
+</div>
diff --git a/src/shared/auction/auction-header/auction-header.component.scss b/src/shared/auction/auction-header/auction-header.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/auction/auction-header/auction-header.component.spec.ts b/src/shared/auction/auction-header/auction-header.component.spec.ts
new file mode 100644
index 0000000..78818dd
--- /dev/null
+++ b/src/shared/auction/auction-header/auction-header.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuctionHeaderComponent } from './auction-header.component';
+
+describe('AuctionHeaderComponent', () => {
+  let component: AuctionHeaderComponent;
+  let fixture: ComponentFixture<AuctionHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuctionHeaderComponent]
+    });
+    fixture = TestBed.createComponent(AuctionHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/shared/auction/auction-header/auction-header.component.ts b/src/shared/auction/auction-header/auction-header.component.ts
new file mode 100644
index 0000000..0ed4c22
--- /dev/null
+++ b/src/shared/auction/auction-header/auction-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-auction-header',
+  templateUrl: './auction-header.component.html',
+  styleUrls: ['./auction-header.component.scss']
+})
+export class AuctionHeaderComponent {
+
+}
diff --git a/src/shared/auction/auction.component.html b/src/shared/auction/auction.component.html
new file mode 100644
index 0000000..691618d
--- /dev/null
+++ b/src/shared/auction/auction.component.html
@@ -0,0 +1,4 @@
+<div class="min-h-screen min-w-full bg-slate-100">
+    <app-auction-header></app-auction-header>
+    <router-outlet name="liveAuction"></router-outlet>
+</div>
diff --git a/src/shared/auction/auction.component.scss b/src/shared/auction/auction.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/auction/auction.component.spec.ts b/src/shared/auction/auction.component.spec.ts
new file mode 100644
index 0000000..8bc27e7
--- /dev/null
+++ b/src/shared/auction/auction.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuctionComponent } from './auction.component';
+
+describe('AuctionComponent', () => {
+  let component: AuctionComponent;
+  let fixture: ComponentFixture<AuctionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuctionComponent]
+    });
+    fixture = TestBed.createComponent(AuctionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/shared/auction/auction.component.ts b/src/shared/auction/auction.component.ts
new file mode 100644
index 0000000..8a7dfc6
--- /dev/null
+++ b/src/shared/auction/auction.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataManagerService } from '../services/DataManager.service';
+
+@Component({
+  selector: 'app-auction',
+  templateUrl: './auction.component.html',
+  styleUrls: ['./auction.component.scss']
+})
+export class AuctionComponent implements OnInit {
+
+  constructor(private router: Router,
+    private route: ActivatedRoute,
+    private dataManagerService: DataManagerService) {
+
+  }
+
+  ngOnInit(): void {
+    // set navigation to supplier ot buyer
+    var userInfo = this.dataManagerService.getUserInfo();
+    if (userInfo && userInfo.isSupplier == "True") {
+      this.router.navigate([{ outlets: { liveAuction: ['supplierAuction'] } }], { relativeTo: this.route.parent, skipLocationChange: true });
+    } else {
+      this.router.navigate([{ outlets: { liveAuction: ['supplierAuction'] } }], { relativeTo: this.route.parent, skipLocationChange: true });
+    }
+  }
+}
diff --git a/src/shared/auction/auction.module.ts b/src/shared/auction/auction.module.ts
new file mode 100644
index 0000000..fc03a04
--- /dev/null
+++ b/src/shared/auction/auction.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuctionComponent } from './auction.component';
+import { AuctionHeaderComponent } from './auction-header/auction-header.component';
+import { Route, RouterModule } from '@angular/router';
+
+
+const routes: Route[] = [{
+  path: '',
+  component: AuctionComponent,
+  children : [
+    {
+      path: 'supplierAuction',
+      loadChildren: ()=> import('../../supplier/supplier-live/supplier-live.module').then(x=>x.SupplierLiveModule),
+      outlet: "liveAuction"
+    },
+    {
+      path: 'buyerAuction',
+      loadChildren: ()=> import('../../buyer/buyer-live/buyer-live.module').then(x=>x.BuyerLiveModule),
+      outlet: "liveAuction"
+    }
+  ]
+}]
+
+@NgModule({
+  declarations: [
+    AuctionComponent,
+    AuctionHeaderComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [ RouterModule ]
+})
+export class AuctionModule { }
diff --git a/src/shared/login/login-routing.module.ts b/src/shared/login/login-routing.module.ts
index c62123c..6117a7b 100644
--- a/src/shared/login/login-routing.module.ts
+++ b/src/shared/login/login-routing.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
 import { Router, RouterModule, Routes } from "@angular/router";
 import { AuthEntryComponent } from "./auth-entry/auth-entry.component";
 import { SignInComponent } from "./sign-in/sign-in.component";
@@ -25,6 +25,7 @@ const routes: Routes = [
 
 @NgModule({
     imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
+    exports: [RouterModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AuthRoutingModule { }
\ No newline at end of file
diff --git a/src/shared/login/sign-in/sign-in.component.ts b/src/shared/login/sign-in/sign-in.component.ts
index 49e4503..1a95396 100644
--- a/src/shared/login/sign-in/sign-in.component.ts
+++ b/src/shared/login/sign-in/sign-in.component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
 import { ToastrService } from 'ngx-toastr';
 import { AuthService } from 'src/shared/services/AuthService.service';
 import { DataManagerService } from 'src/shared/services/DataManager.service';
@@ -9,19 +10,22 @@ import { DataManagerService } from 'src/shared/services/DataManager.service';
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.scss']
 })
-export class SignInComponent {
+export class SignInComponent implements OnInit {
 
   email: string;
   password: string;
 
-  constructor(private router: Router, 
-    private route: ActivatedRoute, 
+  constructor(private router: Router,
+    private route: ActivatedRoute,
     private authService: AuthService,
     private toastr: ToastrService,
-    private dataManagerService: DataManagerService) {
+    private dataManagerService: DataManagerService,
+    private spinner: NgxSpinnerService) {
     this.email = "";
     this.password = "";
   }
+  ngOnInit(): void {
+  }
 
   signUpClicked() {
     this.router.navigate([{ outlets: { AuthOutlet: ['signup'] } }], { relativeTo: this.route.parent, skipLocationChange: true })
@@ -31,12 +35,20 @@ export class SignInComponent {
     // pass the username and password
     this.validateDetails();
     console.log(this.email, this.password);
+    this.spinner.show();
     this.authService.signIn(this.email, this.password).subscribe(result => {
+      this.spinner.hide();
       if (result && result.status) {
         this.dataManagerService.setToken(result.token);
-        this.router.navigate(['/buyerHome'], { relativeTo: this.route.parent })
+        this.toastr.success('LoggedIn', this.email + ' loggedIn successfully !!');
+        var userInfo = this.dataManagerService.getUserInfo();
+        if(userInfo && userInfo.isSupplier == 'True') {
+          this.router.navigate(['/supplierHome'], { relativeTo: this.route.parent })
+        } else {
+          this.router.navigate(['/buyerHome'], { relativeTo: this.route.parent })
+        }
       } else {
-        this.toastr.success('Hello world!', 'Toastr fun!');
+        this.toastr.error('Error', 'Invalid email and password');
       }
     });
   }
diff --git a/src/shared/login/sign-up/sign-up.component.ts b/src/shared/login/sign-up/sign-up.component.ts
index 11edd6b..0f14467 100644
--- a/src/shared/login/sign-up/sign-up.component.ts
+++ b/src/shared/login/sign-up/sign-up.component.ts
@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { User } from 'src/shared/models/User.model';
 import { AuthService } from '../../services/AuthService.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-sign-up',
@@ -15,7 +17,11 @@ export class SignUpComponent {
   isPasswordMatched: boolean = true;
   isEligibleToRegister = false;
 
-  constructor(private router: Router, private route: ActivatedRoute, private authService: AuthService) {
+  constructor(private router: Router, 
+    private route: ActivatedRoute, 
+    private authService: AuthService,
+    private spinnerService: NgxSpinnerService,
+    private toastr: ToastrService) {
     this.user = new User();
   }
 
@@ -28,9 +34,11 @@ export class SignUpComponent {
     if(!this.confirmPassword() || !this.isEmailAvailable){
       return;
     }
-
+    this.spinnerService.show();
     this.authService.signUp(this.user).subscribe(result=>{
-      console.log(result);
+      this.spinnerService.hide();
+      this.toastr.success("Registered Successfully!!")
+      this.signInClicked();
     })
     
   }
diff --git a/src/shared/models/Auction.model.ts b/src/shared/models/Auction.model.ts
index b78fb12..4deeb2c 100644
--- a/src/shared/models/Auction.model.ts
+++ b/src/shared/models/Auction.model.ts
@@ -1,10 +1,18 @@
 export interface Auction {
     name: string;
-    startdate: string;
-    startTime: string;
-    endTime: string;
-    endDate: string;
+    startdate?: string;
+    startTime?: string;
+    endTime?: string;
+    endDate?: string;
     description: string;
     id: number;
     statusCode: number;
+    displayStatusCode: string;
+}
+
+export interface SupplierAuction extends Auction{
+    createdBy?: any;
+    isAccepted: boolean;
+    isRejected: boolean;
+    isInvited: boolean;
 }
\ No newline at end of file
diff --git a/src/shared/models/AuctionStatus.enum.ts b/src/shared/models/AuctionStatus.enum.ts
new file mode 100644
index 0000000..19f13e0
--- /dev/null
+++ b/src/shared/models/AuctionStatus.enum.ts
@@ -0,0 +1,7 @@
+export enum AuctionStatus {
+    Draft = 1,
+    Invited = 2,
+    Live = 3,
+    Cancelled = 4,
+    Completed = 5
+}
\ No newline at end of file
diff --git a/src/shared/models/User.model.ts b/src/shared/models/User.model.ts
index 42ef079..6080e8d 100644
--- a/src/shared/models/User.model.ts
+++ b/src/shared/models/User.model.ts
@@ -5,6 +5,7 @@ export class User {
     public mobile: string;
     public email: string;
     public confirmPassword: string;
+    public isSupplier: boolean;
 
     constructor() {
         this.email = '';
@@ -13,5 +14,6 @@ export class User {
         this.mobile = "";
         this.password = "";
         this.confirmPassword = "";
+        this.isSupplier = false;
     }
 }
\ No newline at end of file
diff --git a/src/shared/models/supplier.ts b/src/shared/models/supplier.ts
index 3e97744..e32e213 100644
--- a/src/shared/models/supplier.ts
+++ b/src/shared/models/supplier.ts
@@ -1,4 +1,5 @@
 export interface Supplier {
+    id: number;
     name: string;
     partnerName: string;
     email: string;
diff --git a/src/shared/services/BuyerGaurd.ts b/src/shared/services/BuyerGaurd.ts
new file mode 100644
index 0000000..40135ca
--- /dev/null
+++ b/src/shared/services/BuyerGaurd.ts
@@ -0,0 +1,14 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from "@angular/router";
+import { Observable } from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BuyerGaurd implements CanActivate {
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
+        return true;
+    }
+    
+}
\ No newline at end of file
diff --git a/src/shared/services/EventService.service.ts b/src/shared/services/EventService.service.ts
index 0d186ae..867608f 100644
--- a/src/shared/services/EventService.service.ts
+++ b/src/shared/services/EventService.service.ts
@@ -14,35 +14,97 @@ export class EventService {
 
     createEvent(event: any) {
         let url = environment.baseUrl + "api/event/createevent";
-        return this.httpClient.post(url, event,{headers : {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${this.dms.getToken()}`
-          }});
+        return this.httpClient.post(url, event, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
     }
 
     updateEvent(event: any) {
         let url = environment.baseUrl + "api/event/updateevent";
-        return this.httpClient.post(url, event,{headers : {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${this.dms.getToken()}`
-          }});
+        return this.httpClient.post(url, event, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
     }
 
     getAllEvents() {
         let url = environment.baseUrl + "api/event/getallevents";
-        return this.httpClient.get(url, {headers : {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${this.dms.getToken()}`
-          }});
+        return this.httpClient.get(url, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
     }
 
-    getEventById(eventId:number) {
-        let url = environment.baseUrl +`api/event/geteventid/geteventbyid/${eventId}`
-        return this.httpClient.get(url, {headers : {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${this.dms.getToken()}`
-        }});
+    getEventById(eventId: number) {
+        let url = environment.baseUrl + `api/event/geteventbyid/${eventId}`
+        return this.httpClient.get(url, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
     }
 
+    addSuppliers(selectedSuppliers: any[], eventId: number) {
+        let url = environment.baseUrl + `api/event/addsupplier/${eventId}`;
+        return this.httpClient.post(url, selectedSuppliers, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
+    }
+
+    getAddedSuppliers(eventId: any) {
+        let url = environment.baseUrl + `api/supplier/getaddedsuppliers/${eventId}`;
+        return this.httpClient.get(url, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
+    }
+
+    submitAuction(eventId: number) {
+        let url = environment.baseUrl + `api/event/submitauction/${eventId}`;
+        return this.httpClient.post(url, {}, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
+    }
+
+    acceptEvent(eventId: number) {
+        let url = environment.baseUrl + `api/event/acceptevent/${eventId}`;
+        return this.httpClient.post(url, {}, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
+    }
+
+    rejectEvent(eventId: number) {
+        let url = environment.baseUrl + `api/event/rejectevent/${eventId}`;
+        return this.httpClient.post(url, {}, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        });
+    }
+
+    
+
+
+
 }
 
diff --git a/src/shared/services/LotService.service.ts b/src/shared/services/LotService.service.ts
index 514bcfe..9f5ba35 100644
--- a/src/shared/services/LotService.service.ts
+++ b/src/shared/services/LotService.service.ts
@@ -57,7 +57,17 @@ export class LotService {
 
     deleteItem(id:any) {
         let url = environment.baseUrl + `api/lots/deleteitem/${id}`;
-        return this.httpClient.get(url, {
+        return this.httpClient.get(url,{
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.dms.getToken()}`
+            }
+        }); 
+    }
+
+    deleteLot(ids:any[]) {
+        let url = environment.baseUrl + `api/lots/deletelot`;
+        return this.httpClient.post(url,ids,{
             headers: {
                 'Content-Type': 'application/json',
                 'Authorization': `Bearer ${this.dms.getToken()}`
diff --git a/src/shared/services/SupplierGaurd.ts b/src/shared/services/SupplierGaurd.ts
new file mode 100644
index 0000000..b8ef3aa
--- /dev/null
+++ b/src/shared/services/SupplierGaurd.ts
@@ -0,0 +1,24 @@
+import { ActivatedRoute, ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from "@angular/router";
+import { Observable } from "rxjs";
+import { DataManagerService } from "./DataManager.service";
+import { Injectable } from "@angular/core";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SupplierGaurd implements CanActivate {
+
+    constructor(private router: Router,private route_: ActivatedRoute
+        ,private dataManagerService: DataManagerService) {}
+        
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
+        var userInfo = this.dataManagerService.getUserInfo();
+        if (userInfo && userInfo.isSupplier == 'True') {
+            return true;
+        } else {
+            this.router.navigate(['/auth'], {relativeTo: this.route_.parent})
+            return false;
+        }
+    }
+    
+}
\ No newline at end of file
diff --git a/src/shared/services/SupplierService.service.ts b/src/shared/services/SupplierService.service.ts
new file mode 100644
index 0000000..cdacd06
--- /dev/null
+++ b/src/shared/services/SupplierService.service.ts
@@ -0,0 +1,31 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { environment } from "src/environment";
+import { DataManagerService } from "./DataManager.service";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SupplierService {
+    constructor(private httpClient: HttpClient, private dms: DataManagerService){
+
+    }
+
+    getAllSuppliers() {
+        let url = environment.baseUrl + 'api/supplier';
+        return this.httpClient.get(url, {headers : {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.dms.getToken()}`
+          }});
+    }
+
+    getInvitedEvents() {
+        let url = environment.baseUrl + 'api/event/getinvitedsuppliers';
+        return this.httpClient.get(url, {headers : {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.dms.getToken()}`
+          }});
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index c8c97ba..d720b1d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,6 +2,8 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-quartz.css';
 // @import 'ngx-toastr/toastr';
 // @import 'ngx-toastr/toastr-bs4-alert';
 // @import 'bootstrap/scss/functions';
diff --git a/src/supplier/supplier-auctions/supplier-auction.component.html b/src/supplier/supplier-auctions/supplier-auction.component.html
new file mode 100644
index 0000000..d4fe6db
--- /dev/null
+++ b/src/supplier/supplier-auctions/supplier-auction.component.html
@@ -0,0 +1,65 @@
+<app-page-header [config]="headerCofig"></app-page-header>
+<div class="p-5">
+    <div class="flex w-full items-center justify-center">
+        <div class="flex flex-wrap justify-around" id="idSection">
+            <div (click)="onFilterClicked('All')"
+                class="px-[4vh] py-[2vh] bg-primary rounded-xl text-white font-sans font-semibold mr-10 cursor-pointer">
+                All
+            </div>
+
+            <div class="px-[4vh] py-[2vh] bg-white rounded-xl text-black font-sans font-semibold mr-10 cursor-pointer" (click)="onFilterClicked('isAccepted')">
+                Accepted
+            </div>
+
+            <div class="px-[4vh] py-[2vh] bg-white rounded-xl text-black font-sans font-semibold mr-10 cursor-pointer" (click)="onFilterClicked('isRejected')">
+                Rejected
+            </div>
+        </div>
+    </div>
+
+    <div class="p-10" id="gridSection">
+        <div>
+            <table mat-table [dataSource]="dataSource">
+
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef> Name </th>
+                    <td mat-cell *matCellDef="let element"> <span class="text-black cursor-pointer hover:underline hover:font-medium">{{element.name}}</span></td>
+                </ng-container>
+
+                <ng-container matColumnDef="displayStatusCode">
+                    <th mat-header-cell *matHeaderCellDef> Status </th>
+                    <td mat-cell *matCellDef="let element"> {{element.displayStatusCode}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="action">
+                    <th mat-header-cell *matHeaderCellDef> </th>
+                    <td mat-cell *matCellDef="let element">
+                        <div class="flex justify-center items-center" *ngIf="element.isInvited && !element.isAccepted && !element.isRejected && element.statusCode != 2">
+                            <button class="bg-green-600 text-white font-medium p-2 mr-2 pr-[20px] rounded-md flex justify-center items-center" (click)="accepted(element)">
+                                <mat-icon class="cursor-pointer text-base" aria-hidden="false"
+                                aria-label="edit" fontIcon="done"></mat-icon>
+                                <span class="ml-1"> Accept </span>
+                            </button>
+                            <button class="bg-red-600 text-white font-medium p-2 mr-2 pr-[20px] rounded-md flex justify-center items-center" (click)="rejected(element)">
+                                <mat-icon class="cursor-pointer text-base" aria-hidden="false"
+                                aria-label="edit" fontIcon="close"></mat-icon>
+                                <span class="ml-1"> Reject </span>
+                            </button>
+                        </div>
+                        <div class="flex justify-center items-center" *ngIf="element.isAccepted && element.statusCode == 3">
+                            <button class="bg-white text-green-500 font-medium p-2 pr-[20px] mr-2 rounded-md flex justify-center items-center border-green-500 border-[3px]" (click)="openAuction(element)">
+                                <div class="dot dot--basic" aria-hidden="false"></div> 
+                                <span class="ml-1"> Live </span>
+                            </button>
+                        </div>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;">
+                </tr>
+            </table>
+            <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> -->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/supplier/supplier-auctions/supplier-auction.component.scss b/src/supplier/supplier-auctions/supplier-auction.component.scss
new file mode 100644
index 0000000..364799a
--- /dev/null
+++ b/src/supplier/supplier-auctions/supplier-auction.component.scss
@@ -0,0 +1,21 @@
+:root {
+    --dot-size: 1rem;
+    --animation-duration: 2s;
+}
+
+.dot {
+    width: 0.7rem;
+    height: 0.7rem;
+    background-color: rgb(34 197 94);
+    border-radius: 50%;
+    margin: 2px;
+  }
+
+  @keyframes blink {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+  }
+  
+  .dot--basic {
+    animation: blink 2s infinite;
+  }
\ No newline at end of file
diff --git a/src/supplier/supplier-auctions/supplier-auction.component.spec.ts b/src/supplier/supplier-auctions/supplier-auction.component.spec.ts
new file mode 100644
index 0000000..6f25893
--- /dev/null
+++ b/src/supplier/supplier-auctions/supplier-auction.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SupplierAuctionComponent } from './supplier-auction.component';
+
+describe('SupplierAuctionComponent', () => {
+  let component: SupplierAuctionComponent;
+  let fixture: ComponentFixture<SupplierAuctionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupplierAuctionComponent]
+    });
+    fixture = TestBed.createComponent(SupplierAuctionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/supplier/supplier-auctions/supplier-auction.component.ts b/src/supplier/supplier-auctions/supplier-auction.component.ts
new file mode 100644
index 0000000..f6db44c
--- /dev/null
+++ b/src/supplier/supplier-auctions/supplier-auction.component.ts
@@ -0,0 +1,98 @@
+import { Component } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { environment } from 'src/environment';
+import { Auction, SupplierAuction } from 'src/shared/models/Auction.model';
+import { AuctionStatus } from 'src/shared/models/AuctionStatus.enum';
+import { DataManagerService } from 'src/shared/services/DataManager.service';
+import { EventService } from 'src/shared/services/EventService.service';
+import { SupplierService } from 'src/shared/services/SupplierService.service';
+
+@Component({
+  selector: 'app-supplier-auction',
+  templateUrl: './supplier-auction.component.html',
+  styleUrls: ['./supplier-auction.component.scss']
+})
+export class SupplierAuctionComponent {
+
+  dataSource = new MatTableDataSource<Auction>();
+  auctions: SupplierAuction[] = [];
+  masterAuctions: SupplierAuction[] = [];
+  displayedColumns: string[] = ['name', 'displayStatusCode', "action"];
+
+  headerCofig: any = {
+    title: "Auctions",
+    subTitle: "",
+    enableSubTitle: false
+  }
+
+  constructor(private supplierService: SupplierService, private router: Router,
+    private toasterService: ToastrService,
+    private route: ActivatedRoute,
+    private dataService: DataManagerService,
+    private eventservice: EventService,
+    private spinnerService: NgxSpinnerService) {
+
+  }
+
+  ngOnInit(): void {
+    this.spinnerService.show();
+    this.supplierService.getInvitedEvents().subscribe((events: any) => {
+
+      if (events && events.length > 0) {
+        events.forEach((event: any) => {
+          var event_: SupplierAuction = {
+            name: event.name,
+            description: event.description,
+            statusCode: event.statusCode,
+            displayStatusCode: AuctionStatus[event.statusCode],
+            id: event.eventId,
+            createdBy: event.createdBy,
+            isInvited: event.isInvited,
+            isRejected: event.isRejected,
+            isAccepted: event.isAccepted
+          }
+          this.auctions.push(event_);
+        })
+      }
+      this.dataSource.data = this.auctions;
+      this.masterAuctions = this.auctions;
+      this.spinnerService.hide();
+    })
+
+  }
+
+  accepted(auction: any) {
+    this.eventservice.acceptEvent(auction.id).subscribe(result => {
+      if (result && result != 0) {
+        auction.isAccepted = true;
+        this.toasterService.success("Accepted Invite Successfully !!")
+      }
+    });
+  }
+
+  rejected(auction: any) {
+    this.eventservice.rejectEvent(auction.id).subscribe(result => {
+      if (result && result != 0) {
+        auction.isAccepted = true;
+        this.toasterService.success("Rejected Invite Successfully !!")
+      }
+    })
+  }
+
+  onFilterClicked(filterParam: string) {
+    if (filterParam == "All") {
+      this.auctions = this.masterAuctions;
+    } else {
+      this.auctions = this.masterAuctions.filter((x: any) => x[filterParam] == true);
+    }
+    this.dataSource.data = this.auctions;
+  }  
+
+  openAuction(auction: any){
+    var targetUrl = window.location.origin + '/auction'
+    window.open(targetUrl, "_blank");
+  }   
+}
diff --git a/src/supplier/supplier-auctions/supplier-auctions.module.ts b/src/supplier/supplier-auctions/supplier-auctions.module.ts
new file mode 100644
index 0000000..a0d5be5
--- /dev/null
+++ b/src/supplier/supplier-auctions/supplier-auctions.module.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SupplierAuctionComponent } from './supplier-auction.component';
+import { RouterModule, Routes } from '@angular/router';
+import { UiComponentsModule } from 'src/shared/ui-components/ui-components.module';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTableModule } from '@angular/material/table';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
+import { EventService } from 'src/shared/services/EventService.service';
+
+
+const routes: Routes = [
+  {
+    path : "",
+    component : SupplierAuctionComponent
+  }
+]
+
+@NgModule({
+  declarations: [
+    SupplierAuctionComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    UiComponentsModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatCheckboxModule,
+    MatTableModule,
+    MatIconModule,
+    MatDialogModule,
+  ],
+  exports: [RouterModule],
+  providers: [EventService]
+})
+export class SupplierAuctionsModule { }
diff --git a/src/supplier/supplier-dashboard/supplier-dashboard.component.html b/src/supplier/supplier-dashboard/supplier-dashboard.component.html
new file mode 100644
index 0000000..b387790
--- /dev/null
+++ b/src/supplier/supplier-dashboard/supplier-dashboard.component.html
@@ -0,0 +1,6 @@
+<div class="flex min-h-screen justify-center">
+    <div class="flex flex-wrap p-10 justify-center items-center">
+        <app-dashboard-cards routerLink="{{config.route}}" [queryParams]="config.params" class="w-[250px] h-[200px]" *ngFor="let config of dashboardConfig" [config]="config" (click)="config.callback()" skipLocationChange></app-dashboard-cards>
+    </div>
+</div>
+
diff --git a/src/supplier/supplier-dashboard/supplier-dashboard.component.scss b/src/supplier/supplier-dashboard/supplier-dashboard.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/supplier/supplier-dashboard/supplier-dashboard.component.spec.ts b/src/supplier/supplier-dashboard/supplier-dashboard.component.spec.ts
new file mode 100644
index 0000000..621184e
--- /dev/null
+++ b/src/supplier/supplier-dashboard/supplier-dashboard.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SupplierDashboardComponent } from './supplier-dashboard.component';
+
+describe('SupplierDashboardComponent', () => {
+  let component: SupplierDashboardComponent;
+  let fixture: ComponentFixture<SupplierDashboardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupplierDashboardComponent]
+    });
+    fixture = TestBed.createComponent(SupplierDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/supplier/supplier-dashboard/supplier-dashboard.component.ts b/src/supplier/supplier-dashboard/supplier-dashboard.component.ts
new file mode 100644
index 0000000..a641290
--- /dev/null
+++ b/src/supplier/supplier-dashboard/supplier-dashboard.component.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataManagerService } from 'src/shared/services/DataManager.service';
+
+@Component({
+  selector: 'app-supplier-dashboard',
+  templateUrl: './supplier-dashboard.component.html',
+  styleUrls: ['./supplier-dashboard.component.scss']
+})
+export class SupplierDashboardComponent {
+
+    public dashboardConfig: any = [
+      {
+        icon: "bid.png",
+        name: "Auction Invitations",
+        route: "../auctions",
+        callback: ()=>{},
+        params: {
+        }
+      },
+      {
+        icon: "gear.png",
+        name: "Settings",
+        route: "../settings",
+        callback: ()=>{},
+        params: {
+        }
+      }
+    ];
+  
+  
+    constructor(private router: Router,
+      private route: ActivatedRoute,
+      private dms:DataManagerService) {
+      console.log("Hello world");
+    }
+  
+    onCreateAuctionCicked() {
+      this.dms.setDataStoreValue("eventCode", 0);
+    }
+}
diff --git a/src/supplier/supplier-dashboard/supplier-dashboard.module.ts b/src/supplier/supplier-dashboard/supplier-dashboard.module.ts
new file mode 100644
index 0000000..49e2891
--- /dev/null
+++ b/src/supplier/supplier-dashboard/supplier-dashboard.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SupplierDashboardComponent } from './supplier-dashboard.component';
+import { RouterModule, Routes } from '@angular/router';
+import { UiComponentsModule } from 'src/shared/ui-components/ui-components.module';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: SupplierDashboardComponent
+  }
+];
+
+@NgModule({
+  declarations: [
+    SupplierDashboardComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    UiComponentsModule
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class SupplierDashboardModule { }
diff --git a/src/supplier/supplier-home/supplier-home.component.html b/src/supplier/supplier-home/supplier-home.component.html
index 46a5a12..67655e7 100644
--- a/src/supplier/supplier-home/supplier-home.component.html
+++ b/src/supplier/supplier-home/supplier-home.component.html
@@ -1 +1,26 @@
-<p>supplier-home works!</p>
+<div class="flex min-h-screen min-w-screen bg-white">
+    <div class="bg-white rounded-3xl w-[17%] flex flex-col relative">
+        <div class="fixed">
+            <div>
+                <img class="py-[5vh] px-[2vh]" width="230vh" height="100px"
+                    src="../../assets/icons/procure-hub-high-resolution-logo-transparent.png" />
+            </div>
+            <div class="flex-grow">
+                <ul class="flex flex-col h-full">
+                    <li class="text-black p-5 text-xl font-bold" (click)="dashboardClicked()">
+                        <a class="cursor-pointer"> Dashboard</a>
+                    </li>
+                    <li class="text-black p-5 text-xl font-bold" (click)="settingsClicked()">
+                        <a class="cursor-pointer">Settings</a>
+                    </li>
+                    <li class="flex-grow flex flex-col-reverse text-black font-bold">
+                        <div class=" p-8 text-xl cursor-pointer" (click)="logOut()">Log Out</div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="bg-slate-100 w-full">
+        <router-outlet name="supplierHome"></router-outlet>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/supplier/supplier-home/supplier-home.component.ts b/src/supplier/supplier-home/supplier-home.component.ts
index 7c92478..53191cc 100644
--- a/src/supplier/supplier-home/supplier-home.component.ts
+++ b/src/supplier/supplier-home/supplier-home.component.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataManagerService } from 'src/shared/services/DataManager.service';
 
 @Component({
   selector: 'app-supplier-home',
@@ -7,4 +9,33 @@ import { Component } from '@angular/core';
 })
 export class SupplierHomeComponent {
 
+  constructor(private router: Router,
+    private route: ActivatedRoute,
+    private dataService: DataManagerService) {
+    console.log("Hellow Buyer Module!!")
+  }
+
+  ngOnInit(): void {
+    this.dashboardClicked();
+  }
+
+  dashboardClicked() {
+    this.router.navigate([{ outlets: { supplierHome: ['dashboard'] } }], { relativeTo: this.route.parent, skipLocationChange: true });
+  }
+
+  settingsClicked() {
+    this.router.navigate([{ outlets: { supplierHome: ['settings'] } }], { relativeTo: this.route.parent, skipLocationChange: true });
+  }
+
+  createAuctionClicked() {
+    this.dataService.setDataStoreValue("eventCode", 0);
+    this.router.navigate([{ outlets: { supplierHome: ['createauction'] } }], { relativeTo: this.route.parent, skipLocationChange: true });
+  }
+
+  logOut() {
+    console.log("Logout clicked !!");
+    this.dataService.clearToken();
+    this.router.navigate(['/auth'], { relativeTo: this.route.parent});
+  }
+
 }
diff --git a/src/supplier/supplier-live/bid-header/bid-header.component.html b/src/supplier/supplier-live/bid-header/bid-header.component.html
new file mode 100644
index 0000000..3aea3fe
--- /dev/null
+++ b/src/supplier/supplier-live/bid-header/bid-header.component.html
@@ -0,0 +1,20 @@
+<div class="flex flex-col bg-white">
+    <div class="flex flex-col p-2 border-[1px] border-slate-200">
+        <span class="text-xs">Auction Name</span>
+        <span class="text-lg">Walmart Logistics</span>
+    </div>
+    <div class="flex justify-between">
+        <div class="flex flex-col p-2 border-[1px] border-slate-200 flex-grow">
+            <span class="text-xs">Rank</span>
+            <span class="text-lg">1</span>
+        </div>
+        <div class="flex flex-col p-2 border-[1px] border-slate-200 flex-grow">
+            <span class="text-xs">Total Suppliers</span>
+            <span class="text-lg">10</span>
+        </div>
+        <div class="flex flex-col p-2 border-[1px] border-slate-200 flex-grow">
+            <span class="text-xs">Best Bid</span>
+            <span class="text-lg">300 USD</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/supplier/supplier-live/bid-header/bid-header.component.scss b/src/supplier/supplier-live/bid-header/bid-header.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/supplier/supplier-live/bid-header/bid-header.component.spec.ts b/src/supplier/supplier-live/bid-header/bid-header.component.spec.ts
new file mode 100644
index 0000000..677ad67
--- /dev/null
+++ b/src/supplier/supplier-live/bid-header/bid-header.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BidHeaderComponent } from './bid-header.component';
+
+describe('BidHeaderComponent', () => {
+  let component: BidHeaderComponent;
+  let fixture: ComponentFixture<BidHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BidHeaderComponent]
+    });
+    fixture = TestBed.createComponent(BidHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/supplier/supplier-live/bid-header/bid-header.component.ts b/src/supplier/supplier-live/bid-header/bid-header.component.ts
new file mode 100644
index 0000000..6cb4eaa
--- /dev/null
+++ b/src/supplier/supplier-live/bid-header/bid-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-bid-header',
+  templateUrl: './bid-header.component.html',
+  styleUrls: ['./bid-header.component.scss']
+})
+export class BidHeaderComponent {
+
+}
diff --git a/src/supplier/supplier-live/supplier-live.component.html b/src/supplier/supplier-live/supplier-live.component.html
new file mode 100644
index 0000000..8e066a8
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-live.component.html
@@ -0,0 +1,19 @@
+<div class="w-screen h-screen flex">
+    <div class="min-h-full w-[15%] bg-white overflow-y-scroll">
+        <div *ngFor="let element of lots">
+            <app-supplier-lot-card></app-supplier-lot-card>
+        </div>
+    </div>
+    <div class="min-h-full w-[90%]">
+        <!-- Bid Header -->
+        <app-bid-header></app-bid-header>
+
+        <!-- Bid Grid  -->
+        <div>
+            <ag-grid-angular class="ag-theme-quartz" style="height: 500px;" [rowData]="rowData" [columnDefs]="colDefs">
+            </ag-grid-angular>
+        </div>
+
+        <!-- Bid Footer -->
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/supplier/supplier-live/supplier-live.component.scss b/src/supplier/supplier-live/supplier-live.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/supplier/supplier-live/supplier-live.component.spec.ts b/src/supplier/supplier-live/supplier-live.component.spec.ts
new file mode 100644
index 0000000..9713d76
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-live.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SupplierLiveComponent } from './supplier-live.component';
+
+describe('SupplierLiveComponent', () => {
+  let component: SupplierLiveComponent;
+  let fixture: ComponentFixture<SupplierLiveComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupplierLiveComponent]
+    });
+    fixture = TestBed.createComponent(SupplierLiveComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/supplier/supplier-live/supplier-live.component.ts b/src/supplier/supplier-live/supplier-live.component.ts
new file mode 100644
index 0000000..a7c2edb
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-live.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-supplier-live',
+  templateUrl: './supplier-live.component.html',
+  styleUrls: ['./supplier-live.component.scss']
+})
+export class SupplierLiveComponent {
+  lots: any[] = [1,2,34,4,56,67,8,9,0,7,6,54,7,9,7,6,56]
+
+  rowData = [
+    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+    { make: "Ford", model: "F-Series", price: 33850, electric: false },
+    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+  ];
+ 
+  colDefs: ColDef[] = [
+    { field: "make" },
+    { field: "model" },
+    { field: "price" },
+    { field: "electric" }
+  ];
+} 
diff --git a/src/supplier/supplier-live/supplier-live.module.ts b/src/supplier/supplier-live/supplier-live.module.ts
new file mode 100644
index 0000000..4814da7
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-live.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SupplierLiveComponent } from './supplier-live.component';
+import { Route, RouterModule } from '@angular/router';
+import { SupplierLotCardComponent } from './supplier-lot-card/supplier-lot-card.component';
+import { BidHeaderComponent } from './bid-header/bid-header.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { AgGridModule } from 'ag-grid-angular';
+
+const routes: Route [] = [
+  {
+    path: '',
+    component: SupplierLiveComponent
+  }
+]
+
+
+@NgModule({
+  declarations: [
+    SupplierLiveComponent,
+    SupplierLotCardComponent,
+    BidHeaderComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule.forChild(routes),
+    AgGridModule,
+  ], 
+  exports: [RouterModule]
+})
+export class SupplierLiveModule { }
diff --git a/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.html b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.html
new file mode 100644
index 0000000..7b1e35a
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.html
@@ -0,0 +1,10 @@
+<div class="flex flex-col px-5 pt-3 h-[10vh] border-b-[1px] border-slate-200">
+    <div class="text-lg font-medium">
+        Lot Name
+    </div>
+    <div class="flex justify-end items-end flex-grow">
+        <div>
+            Your price: 100 USD 
+        </div>
+    </div>
+</div>
diff --git a/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.scss b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.spec.ts b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.spec.ts
new file mode 100644
index 0000000..c9f16cf
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SupplierLotCardComponent } from './supplier-lot-card.component';
+
+describe('SupplierLotCardComponent', () => {
+  let component: SupplierLotCardComponent;
+  let fixture: ComponentFixture<SupplierLotCardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupplierLotCardComponent]
+    });
+    fixture = TestBed.createComponent(SupplierLotCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.ts b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.ts
new file mode 100644
index 0000000..5ddf2f3
--- /dev/null
+++ b/src/supplier/supplier-live/supplier-lot-card/supplier-lot-card.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-supplier-lot-card',
+  templateUrl: './supplier-lot-card.component.html',
+  styleUrls: ['./supplier-lot-card.component.scss']
+})
+export class SupplierLotCardComponent {
+
+}
diff --git a/src/supplier/supplier.module.ts b/src/supplier/supplier.module.ts
index 8732224..df71d46 100644
--- a/src/supplier/supplier.module.ts
+++ b/src/supplier/supplier.module.ts
@@ -2,11 +2,29 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SupplierHomeComponent } from './supplier-home/supplier-home.component';
 import { RouterModule, Routes } from '@angular/router';
+import { SupplierService } from 'src/shared/services/SupplierService.service';
 
 const routes: Routes = [
   {
     path: '',
-    component: SupplierHomeComponent
+    component: SupplierHomeComponent,
+    children: [
+      {
+        path: 'dashboard',
+        loadChildren: () => import('./supplier-dashboard/supplier-dashboard.module').then(x => x.SupplierDashboardModule),
+        outlet: "supplierHome"
+      },
+      {
+        path: 'auctions',
+        loadChildren: () => import('./supplier-auctions/supplier-auctions.module').then(m=>m.SupplierAuctionsModule),
+        outlet: "supplierHome"
+      },
+      {
+        path: 'settings',
+        loadChildren: ()=> import('../buyer/settings/setting.module').then(m=>m.SettingModule),
+        outlet: "supplierHome"
+      }
+    ]
   }
 ]
 
@@ -20,6 +38,7 @@ const routes: Routes = [
   ],
   exports: [
     RouterModule
-  ]
+  ],
+  providers: [SupplierService]
 })
 export class SupplierModule { }