diff --git a/ng-seed/src/app/app.routing.ts b/ng-seed/src/app/app.routing.ts
index d44d5cf..c03f17e 100644
--- a/ng-seed/src/app/app.routing.ts
+++ b/ng-seed/src/app/app.routing.ts
@@ -48,6 +48,10 @@ export const AppRoutes: Routes = [{
   {
     path: 'consultant-list',
     loadChildren: () => import('./appoinment/front-desk/front-desk.module').then(m => m.FrontDeskModule)
+  },
+  {
+    path: 'mail-log',
+    loadChildren: () => import('./appoinment/mail/mail.module').then(m => m.MailModule)
   }
  
   
diff --git a/ng-seed/src/app/appoinment/appoinment.module.ts b/ng-seed/src/app/appoinment/appoinment.module.ts
index 09e851e..2f00f51 100644
--- a/ng-seed/src/app/appoinment/appoinment.module.ts
+++ b/ng-seed/src/app/appoinment/appoinment.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AppoinmentRoutingModule } from './appoinment-routing.module'; 
 import { DemoMaterialModule } from 'app/shared/demo.module'; 
-import { NgScrollbarModule } from 'ngx-scrollbar'; 
+import { NgScrollbarModule } from 'ngx-scrollbar';
 
 @NgModule({
   declarations: [ 
diff --git a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.html b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.html
new file mode 100644
index 0000000..80c7378
--- /dev/null
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.html
@@ -0,0 +1,62 @@
+<h3>Mail Details</h3>
+<mat-form-field style="width:30%">
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
+  </mat-form-field>
+
+  <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
+    <ng-scrollbar class="scrollHV">
+        <div class="main-content" fxLayout="row" fxLayoutAlign="center start">
+            <div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
+                <div class="messages-list material fullscreen">
+                    <table mat-table [dataSource]="dataSource" #mytable  class="my-table mat-elevation-z8 len-table">
+
+                        <ng-container matColumnDef="report">
+                          <th mat-header-cell *matHeaderCellDef class="font-color mat-no">Report </th>
+                          <td mat-cell *matCellDef="let element" class="element-spc"> {{element.report}} </td>
+                        </ng-container>
+                      
+                        <ng-container matColumnDef="subject">
+                          <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> Subject </th>
+                          <td mat-cell *matCellDef="let element" class="element-spc"> {{element.subject}} </td>
+                        </ng-container>
+                      
+                        <ng-container matColumnDef="recipients">
+                          <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> Recipients </th>
+                          <td mat-cell *matCellDef="let element" class="element-spc"> {{element.recipients}} </td>
+                        </ng-container>
+           
+                        <ng-container matColumnDef="content">
+                          <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> Content Page </th>
+                          <td mat-cell *matCellDef="let element" class="element-spc"> {{element.content}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="status">
+                            <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> Status </th>
+                            <td mat-cell *matCellDef="let element" class="element-spc"> {{element.status}} </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="time">
+                            <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> Time Sent</th>
+                            <td mat-cell *matCellDef="let element" class="element-spc"> {{element.time}} </td>
+                          </ng-container>
+                      
+                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                      </table>
+                      <!-- <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+                        <mat-progress-spinner 
+                          color="primary" 
+                          mode="indeterminate">
+                        </mat-progress-spinner>
+                      </mat-card> -->
+                      <div [hidden]="recordStatus">
+                        <mat-paginator  #paginator class="mat-elevation-z1" [length]="" [pageIndex]="pageIndex" [pageSize]="pageSize"
+                        [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
+                      </mat-paginator>      
+                    </div>
+                    </div>
+            </div>
+            </div>
+        </ng-scrollbar>
+  </mat-sidenav-container>
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.scss b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.scss
new file mode 100644
index 0000000..0d941a6
--- /dev/null
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.scss
@@ -0,0 +1,18 @@
+.scrollHV {
+  height: calc(100vh - 0px);
+}
+.fullscreen{
+  position: absolute !important;
+  height: auto !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.my-table{
+  width: 100%;
+}
+.font-color{
+  font-weight: 600;
+  font-size: 14px;
+}
diff --git a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.spec.ts b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.spec.ts
new file mode 100644
index 0000000..c9e3f86
--- /dev/null
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MailLogComponent } from './mail-log.component';
+
+describe('MailLogComponent', () => {
+  let component: MailLogComponent;
+  let fixture: ComponentFixture<MailLogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MailLogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MailLogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.ts b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.ts
new file mode 100644
index 0000000..2b8556b
--- /dev/null
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.ts
@@ -0,0 +1,55 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable } from '@angular/material/table';
+
+export interface PeriodicElement {
+  report: string;
+  subject: string;
+  recipients: string;
+  content: string;
+  status: string;
+  time: string;
+
+}
+const ELEMENT_DATA: PeriodicElement[] = [
+  {report: 'May 2020', subject: 'Monthly Report - May 2020', recipients: 'Test-Email', content: 'Monthly Report - May 2020', status: 'Sent', time: '6/7/2020 14:20'},
+  {report: 'June 2021', subject: 'Monthly Report - May 2020', recipients: 'Test-Email', content: 'Monthly Report - May 2020', status: 'Sent', time: '8/7/2020 14:20'},
+  {report: 'July 2020', subject: 'Monthly Report - May 2020', recipients: 'Test-Email', content: 'Monthly Report - May 2020', status: 'Not Sent', time: '10/7/2020 14:20'},
+  {report: 'August 2021', subject: 'Monthly Report - May 2020', recipients: 'Test-Email', content: 'Monthly Report - May 2020', status: 'Sent', time: '13/7/2020 14:20'}
+];
+
+@Component({
+  selector: 'app-mail-log',
+  templateUrl: './mail-log.component.html',
+  styleUrls: ['./mail-log.component.scss']
+})
+export class MailLogComponent implements OnInit {
+
+  displayedColumns: string[] = ['report', 'subject', 'recipients', 'content', 'status', 'time'];
+  dataSource = ELEMENT_DATA;
+  length = 5;
+  pageIndex = 0;
+  pageSize = 5;
+  pageEvent: PageEvent;
+  customersList: any[] = [];
+  isLoading = true
+  recordStatus: boolean;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatTable,{static:true}) table: MatTable<any>
+  constructor() { }
+
+  pageChange(e) {
+    console.log(e);
+  }
+  ngOnInit(): void {
+    this.recordStatus=false;
+  }
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim();
+    filterValue = filterValue.toLowerCase();
+    // this.customersListSource.filter = filterValue;
+  }
+
+}
diff --git a/ng-seed/src/app/appoinment/mail/mail-routing.module.ts b/ng-seed/src/app/appoinment/mail/mail-routing.module.ts
new file mode 100644
index 0000000..969ae0a
--- /dev/null
+++ b/ng-seed/src/app/appoinment/mail/mail-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MailLogComponent } from './mail-log/mail-log.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MailLogComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MailRoutingModule { }
diff --git a/ng-seed/src/app/appoinment/mail/mail.module.ts b/ng-seed/src/app/appoinment/mail/mail.module.ts
new file mode 100644
index 0000000..b791b87
--- /dev/null
+++ b/ng-seed/src/app/appoinment/mail/mail.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MailRoutingModule } from './mail-routing.module';
+import { MailLogComponent } from './mail-log/mail-log.component';
+import { SharedModule } from 'app/shared/shared.module';
+import { DemoMaterialModule } from 'app/shared/demo.module';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+
+
+@NgModule({
+  declarations: [
+    MailLogComponent
+  ],
+  imports: [
+    CommonModule,
+    MailRoutingModule,
+    SharedModule,
+    DemoMaterialModule,
+    NgScrollbarModule
+  ]
+})
+export class MailModule { }
diff --git a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html
index 4013e1b..021b4e5 100644
--- a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html
+++ b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html
@@ -59,33 +59,6 @@
                </div>
             </div>
             <div fxLayout="row wrap" style="height:100%;">
-               <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="35"  fxFlex.lg="35" fxFlex.xl="35" class="p-gap">
-                  <div class="inline">
-                     <p class="text-color">Teero would like to schedule an interview with you! Pick a time & date.</p>
-                  </div>
-                  <div class="">
-                     <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Business </p>
-                     <span class="span-text">{{busName}}</span>
-                     <p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img"> Practitioner </p>
-                     <span class="span-text">Dr. {{doctor}}</span>
-                     <p class="param"><img src="assets/images/information.svg" alt="Avatar" class="img"> Service </p>
-                     <span class="span-text"> {{servicesName.servicesName}} ({{serviceMapdetails[0].duration.length>0 ? serviceMapdetails[0].duration[0].durationNew:serviceMapdetails[0].service[0].duration
-                     }} Mins)</span>
-                     <!-- <p  class="text-color d-flex align-items-start" >
-                        <img src="assets/images/information.svg" alt="Avatar" class="img" /> 
-                        <span>Date:{{date | date:'longDate'}}</span><br />
-                        <span style="margin-left: 10px;">Time :{{slotTime |  date:'shortTime'}}</span>
-                     </p>  -->
-                     <p class="param"><img src="assets/images/Languages.svg" alt="Avatar" class="img">Date : </p>
-                     <span class="span-text"> {{date | date:'longDate'}}</span> 
-                     <p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time : </p>
-                     <span class="span-text">{{slotTime |  date:'shortTime'}}</span> 
-                     <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount : </p>
-                     <span class="span-text"><span class="ex" style="font-size: 17px;padding-bottom: 10px;line-height: 17px;">&#x20b9;</span> {{   serviceMapdetails[0].duration.length>0 ? serviceMapdetails[0].duration[0].fees:serviceMapdetails[0].service[0].fees}}</span>
-                     
-                  </div>
-               </div>
-               <div style="border: 1px solid #ccc;" fxFlex.md="1"></div>
                <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="64"  fxFlex.lg="64" fxFlex.xl="64" class="p-gap">
                   <div fxLayout="row wrap  mt-2" fxLayoutAlign="center center">
                      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="p-gap">
@@ -104,9 +77,6 @@
                  </div> </div>
                       
                    </div> -->
-                   <div>
-                     <button mat-raised-button mat-button-sm  class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>
-                  </div>
                   <!-- <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
                      <mat-tab [label]="tab | date:'longDate' " *ngFor="let tab of days">
                        <div  style="margin: 1%;"> 
@@ -197,6 +167,35 @@
                 </div> 
                 </div> -->
                </div>
+               <div style="border: 1px solid #ccc;" fxFlex.md="1"></div>
+               <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="35"  fxFlex.lg="35" fxFlex.xl="35" class="p-gap">
+                  <div class="inline">
+                     <p class="text-color">Teero would like to schedule an interview with you! Pick a time & date.</p>
+                  </div>
+                  <div class="">
+                     <!-- <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Business </p>
+                     <span class="span-text">{{busName}}</span> -->
+                     <p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img"> Practitioner </p>
+                     <span class="span-text">Dr. {{doctor}}</span>
+                     <p class="param"><img src="assets/images/information.svg" alt="Avatar" class="img"> Service </p>
+                     <span class="span-text"> {{servicesName.servicesName}} ({{serviceMapdetails[0].duration.length>0 ? serviceMapdetails[0].duration[0].durationNew:serviceMapdetails[0].service[0].duration
+                     }} Mins)</span>
+                     <!-- <p  class="text-color d-flex align-items-start" >
+                        <img src="assets/images/information.svg" alt="Avatar" class="img" /> 
+                        <span>Date:{{date | date:'longDate'}}</span><br />
+                        <span style="margin-left: 10px;">Time :{{slotTime |  date:'shortTime'}}</span>
+                     </p>  -->
+                     <p class="param"><img src="assets/images/Languages.svg" alt="Avatar" class="img">Date : </p>
+                     <span class="span-text"> {{date | date:'longDate'}}</span> 
+                     <p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time : </p>
+                     <span class="span-text">{{slotTime |  date:'shortTime'}}</span> 
+                     <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount : </p>
+                     <span class="span-text"><span class="ex" style="font-size: 17px;padding-bottom: 10px;line-height: 17px;">&#x20b9;</span> {{   serviceMapdetails[0].duration.length>0 ? serviceMapdetails[0].duration[0].fees:serviceMapdetails[0].service[0].fees}}</span>
+                     <div>
+                        <button mat-raised-button mat-button-sm  class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>
+                     </div>
+                  </div>
+               </div>
             </div> 
          </mat-card>
       </div>
diff --git a/ng-seed/src/app/shared/menu-items/menu-items.ts b/ng-seed/src/app/shared/menu-items/menu-items.ts
index e82b45f..e585ff7 100644
--- a/ng-seed/src/app/shared/menu-items/menu-items.ts
+++ b/ng-seed/src/app/shared/menu-items/menu-items.ts
@@ -83,6 +83,15 @@ const MENUITEMS : Menu[] = [
     // //  {state: 'add-user-list', name: 'Add Users '},
     // ]
   }, 
+  {
+    state: 'mail-log',
+    name: 'Mail',
+    type: 'link',
+    icon: 'directions_walk',
+    // children: [
+    //   {state: 'customers-list', name: 'Customers List'},
+    // ]
+  },
   {
     state: 'services',
     name: 'Services List',