diff --git a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
index 7068e28..f34524e 100644
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
@@ -25,40 +25,39 @@
                         </ng-container> -->
                      <ng-container matColumnDef="time">
                         <th mat-header-cell *matHeaderCellDef class="font-color">Time </th>
-                        
-                        <td mat-cell *matCellDef="let element"> {{element.time}}  </td>
+                        <td mat-cell *matCellDef="let element"> <div class="label">{{element.date}}</div> <br> {{element.time}}  </td>
                      </ng-container>
                      <ng-container matColumnDef="booking">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
-                        <td mat-cell *matCellDef="let element"> {{element.booking}} </td>
+                        <td mat-cell *matCellDef="let element"> <br>{{element.booking}} </td>
                      </ng-container>
                      <ng-container matColumnDef="workspace">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Workspace </th>
-                        <td mat-cell *matCellDef="let element" class="element-spc"> {{element.workspace}} </td>
+                        <td mat-cell *matCellDef="let element" class="element-spc"> <br> {{element.workspace}} </td>
                      </ng-container>
                      <ng-container matColumnDef="service">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Service </th>
-                        <td mat-cell *matCellDef="let element" class="element-spc"><img src="assets/images/1.jpg" /> {{element.service}} </td>
+                        <td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/1.jpg" /> {{element.service}} </td>
                      </ng-container>
                      <ng-container matColumnDef="staff">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Staff </th>
-                        <td mat-cell *matCellDef="let element" class="element-spc"><img src="assets/images/2.jpg" /> {{element.staff}} </td>
+                        <td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/2.jpg" /> {{element.staff}} </td>
                      </ng-container>
                      <ng-container matColumnDef="customer">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th>
-                        <td mat-cell *matCellDef="let element"> {{element.customer}} </td>
+                        <td mat-cell *matCellDef="let element"> <br> {{element.customer}} </td>
                      </ng-container>
                      <ng-container matColumnDef="payment">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Payment </th>
-                        <td mat-cell *matCellDef="let element"> {{element.payment}} </td>
+                        <td mat-cell *matCellDef="let element">  <br>{{element.payment}} </td>
                      </ng-container>
                      <ng-container matColumnDef="status">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Status </th>
-                        <td mat-cell *matCellDef="let element"> {{element.status}} </td>
+                        <td mat-cell *matCellDef="let element">  <br>{{element.status}} </td>
                      </ng-container>
                      <ng-container matColumnDef="action">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
-                        <td mat-cell *matCellDef="let element" class="action-link"> 
+                        <td mat-cell *matCellDef="let element" class="action-link">  <br>
                            <a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> 
                            <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
                         </td>
diff --git a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss
index 54b26d3..be748ee 100644
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss
@@ -72,4 +72,23 @@ img {
     margin-left: 1rem;
     padding-top: 6px;
     cursor: pointer;
-}
\ No newline at end of file
+}
+::ng-deep .mat-paginator {
+    margin-top: -22px!important;
+}
+::ng-deep .mat-select-arrow {
+    margin: 0 15px!important;
+}
+::ng-deep tr.mat-row, tr.mat-footer-row {
+    height: 80px!important;
+}
+.label{
+    color: #111;
+    font-weight: 600;
+    margin-bottom: -9px;
+    white-space: nowrap;
+    margin-top: -12px;
+}
+::ng-deep  body.swal2-height-auto {
+    height: 100% !important
+  }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
index 25e4555..5283c63 100644
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
@@ -15,19 +15,20 @@ export interface UsersData {
   payment: string;
   status: string;
   date: string;
+  note: string;
 }
 const ELEMENT_DATA: UsersData[] = [
-  {time: '12:00 pm - 12:30 pm', booking: '#SA-00001', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
-  {time: '01:00 pm - 01:30 pm', booking: '#SA-00002', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'B', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
-  {time: '02:00 pm - 02:30 pm', booking: '#SA-00003', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
-  {time: '03:00 pm - 03:30 pm', booking: '#SA-00004', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'A', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
-  {time: '04:00 pm - 04:30 pm', booking: '#SA-00005', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
-  {time: '05:00 pm - 05:30 pm', booking: '#SA-00006', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'C', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
-  {time: '09:00 am - 09:30 am', booking: '#SA-00007', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
-  {time: '10:00 am - 10:30 am', booking: '#SA-00008', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'B', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
-  {time: '11:00 am - 11:30 am', booking: '#SA-00009', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
-  {time: '12:00 am - 12:30 am', booking: '#SA-000010', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'A', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
-  {time: '01:00 pm - 01:30 pm', booking: '#SA-000011', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
+  {time: '11:00', booking: '#SA-00001', workspace: 'Sample', service: 'Hospital', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'01 Mar 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '12:00', booking: '#SA-00002', workspace: 'Test', service: 'School', staff: 'Devi.k', customer:'B', payment:'Paid', status: 'Completed', date:'22 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '13:00', booking: '#SA-00003', workspace: 'Sample', service: 'Sports', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'21 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '14:00', booking: '#SA-00004', workspace: 'Test', service: 'Hospital', staff: 'Devi.k', customer:'A', payment:'Paid', status: 'Completed', date:'20 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '15:00', booking: '#SA-00005', workspace: 'Sample', service: 'School', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'17 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '16:00', booking: '#SA-00006', workspace: 'Test', service: 'Sports', staff: 'Devi.k', customer:'C', payment:'Paid', status: 'Completed', date:'16 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '17:00', booking: '#SA-00007', workspace: 'Sample', service: 'Hospital', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'15 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '18:00', booking: '#SA-00008', workspace: 'Test', service: 'School', staff: 'Devi.k', customer:'B', payment:'Paid', status: 'Completed', date:'14 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '10:00', booking: '#SA-00009', workspace: 'Sample', service: 'Sports', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'13 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '09:00', booking: '#SA-000010', workspace: 'Test', service: 'Hospital', staff: 'Devi.k', customer:'A', payment:'Paid', status: 'Completed', date:'12 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
+  {time: '08:00', booking: '#SA-000011', workspace: 'Sample', service: 'School', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'11 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
 
 ];
 @Component({
@@ -38,7 +39,7 @@ const ELEMENT_DATA: UsersData[] = [
 export class AppoinmentsListComponent implements OnInit {
 
   push: any;
-  displayedColumns: string[] = [ 'time', 'booking', 'workspace', 'service', 'staff', 'customer', 'payment', 'status','action'];
+  displayedColumns: string[] = [  'time', 'booking', 'workspace', 'service', 'staff', 'customer', 'payment', 'status','action'];
   dataSource: any;
   // dataSource: any = new MatTableDataSource(ELEMENT_DATA);
   @ViewChild(MatTable,{static:true}) table: MatTable<any>;
@@ -119,6 +120,7 @@ export class AppoinmentsListComponent implements OnInit {
       payment: row_obj.payment,
       status: row_obj.status,
       date: row_obj.date,
+      note: row_obj.note,
     
     });
     this.table.renderRows();
@@ -136,6 +138,7 @@ export class AppoinmentsListComponent implements OnInit {
         value.payment = row_obj.payment;
         value.status = row_obj.status;
         value.date = row_obj.date;
+        value.note = row_obj.note;
       }
       return true;
     });
@@ -143,7 +146,7 @@ export class AppoinmentsListComponent implements OnInit {
   deleteRowData(row_obj){
     console.log(this.dataSource.data,row_obj)
     this.dataSource.data = this.dataSource.data.filter((value,key)=>{
-      return value.id != row_obj.id
+      return value.booking != row_obj.booking
     });
     console.log(this.dataSource)
   }
diff --git a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
index d4cba9b..7d2f2d0 100644
--- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
+++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
@@ -1,6 +1,6 @@
 <mat-card class="settings-panel" >
   <h5 mat-dialog-title>
-     <strong> New Appoinment</strong> 
+     <strong>{{action}}  Appoinment</strong> 
      <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
         >
         <mat-icon>close</mat-icon>
@@ -43,7 +43,7 @@
         Assign Staff
         </label>
         <mat-form-field appearance="outline" class="mat-pane">
-           <mat-select placeholder="Assign Staff" formControlName="staff" required>
+           <mat-select placeholder="Select Staff" formControlName="staff" required>
               <mat-option>--</mat-option>
               <mat-option *ngFor="let business of staffs" [value]="business.staff">
               {{business.staff}}
diff --git a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
index bba6576..1bc0a5e 100644
--- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
+++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
@@ -79,3 +79,6 @@
 .field-inline{
     display: inline-flex;
 }
+::ng-deep .swal2-height-auto {
+    // height: auto!important;
+}
diff --git a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
index 863e14f..d84c0fd 100644
--- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
+++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
@@ -41,17 +41,15 @@ export class DialogBoxComponent implements OnInit {
   ];
   staff = new FormControl('', [Validators.required]);
   staffs = [
-    {staff: 'A'},
-    {staff: 'B'},
-    {staff: 'C'},
-    {staff: 'D'},
+    {staff: 'Kumar.S'},
+    {staff: 'Devi.k'},
   ];
   customer = new FormControl('', [Validators.required]);
   customers = [
-    {customer: 'Sample'},
-    {customer: 'Test'},
-    {customer: 'CSample'},
-    {customer: 'TestD'},
+    {customer: 'A'},
+    {customer: 'B'},
+    {customer: 'C'},
+    {customer: 'B'},
   ];
   constructor(private router: Router,private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<DialogBoxComponent>,
@@ -98,6 +96,8 @@ export class DialogBoxComponent implements OnInit {
       customer: new FormControl('', [Validators.required]),
       note: new FormControl('', [Validators.required]),
     });
+console.log(this.local_data, this.selects)
+// this.form.controls['note'].setValue('Sample')
     this.form.patchValue(this.local_data)
     }
     public myError = (controlName: string, errorName: string) =>{
diff --git a/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss b/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
index d11c184..a0c8d86 100644
--- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
+++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
@@ -66,4 +66,13 @@ img {
     /* overflow: hidden; */
     overflow-x: auto!important;
     overflow-y: auto!important;
-}
\ No newline at end of file
+}
+::ng-deep .mat-select-arrow {
+    margin: 0 15px!important;
+}
+::ng-deep .mat-paginator {
+    margin-top: -10px!important;
+}
+::ng-deep  body.swal2-height-auto {
+    height: 100% !important
+  }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html b/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html
index 647d057..91e2d0a 100644
--- a/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html
+++ b/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html
@@ -1,5 +1,5 @@
 <mat-card class="settings-panel" >
-<h5 mat-dialog-title> <strong>{{action}} New Business</strong> 
+<h5 mat-dialog-title> <strong>{{action}}  Business</strong> 
     <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
     ><mat-icon>close</mat-icon></button></h5>
    
diff --git a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html
index 02ddbfb..739a9c3 100644
--- a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html
+++ b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html
@@ -21,7 +21,7 @@
     <!-- <button class="btn btn-primary pull-right" (click)="addEvent()">
       Add new
     </button> -->
-    <button class="btn btn-primary pull-right"  mat-raised-button >Add Appoinment</button> 
+    <button class="btn btn-primary pull-right" (click)="openDialog('Add',{})" mat-raised-button >Add Appoinment</button> 
     <div class="clearfix"></div>
   </h3>
 <mat-toolbar color="primary">
diff --git a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts
index e22efb2..4764f48 100644
--- a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts
+++ b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts
@@ -6,6 +6,7 @@ import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMo
 import { Subject } from 'rxjs';
 import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent } from 'angular-calendar';
 import { CalendardialogComponent } from '../calendardialog/calendardialog.component';
+import { DialogBoxComponent } from 'app/appoinment/appoinments/dialog-box/dialog-box.component';
 
 const colors: any = {
   red: {
@@ -27,6 +28,7 @@ const colors: any = {
   styleUrls: ['./calendar-list.component.scss']
 })
 export class CalendarListComponent implements OnInit {
+  dataSource: any;
   private yesterday: Date;
   dialogRef: MatDialogRef<CalendardialogComponent>;
   lastCloseResult: string;
@@ -104,6 +106,7 @@ export class CalendarListComponent implements OnInit {
   }];
 
   activeDayIsOpen = true;
+  table: any;
 
   constructor(public dialog: MatDialog) {
     this.initializeYesterday();
@@ -146,7 +149,7 @@ export class CalendarListComponent implements OnInit {
       {
         title: 'Deletable event',
         color: colors.blue,
-        start: this.yesterday,
+        start: date,
         actions: [
           {
             label: '<i class="fa fa-fw fa-times"></i>',
@@ -198,7 +201,72 @@ this.addEvent(date)
       this.dialogRef = null;
     });
   }
-
+  openDialog(action,obj) {
+    obj.action = action;
+    const dialogRef = this.dialog.open(DialogBoxComponent, {
+      width: '45%',
+      height: '100%',
+      // maxWidth: '38vw',
+      position: { right: '0' },
+      data:obj
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result)
+      if(result.event == 'Add'){
+        this.addRowData(result.data);
+      }else if(result.event == 'Update'){
+        this.updateRowData(result.data);
+      }else if(result.event == 'Delete'){
+        this.deleteRowData(result.data);
+      }
+    });
+  }
+  addRowData(row_obj){
+    var d = this.dataSource.data.length+1
+    console.log(this.dataSource)
+    console.log(row_obj)
+    this.dataSource.data.push
+   ({
+      id: d,
+      time: row_obj.time,
+      booking: row_obj.booking,
+      workspace: row_obj.workspace,
+      service: row_obj.service,
+      staff: row_obj.staff,
+      customer: row_obj.customer,
+      payment: row_obj.payment,
+      status: row_obj.status,
+      date: row_obj.date,
+      note: row_obj.note,
+    
+    });
+    this.table.renderRows();
+  }
+  updateRowData(row_obj){
+    console.log(row_obj)
+    this.dataSource = this.dataSource.data.filter((value,key)=>{
+      if(value.id == row_obj.id){
+        value.time = row_obj.time;
+        value.booking = row_obj.booking;
+        value.workspace = row_obj.workspace;
+        value.service = row_obj.service;
+        value.staff = row_obj.staff;
+        value.customer = row_obj.customer;
+        value.payment = row_obj.payment;
+        value.status = row_obj.status;
+        value.date = row_obj.date;
+        value.note = row_obj.note;
+      }
+      return true;
+    });
+  }
+  deleteRowData(row_obj){
+    console.log(this.dataSource.data,row_obj)
+    this.dataSource.data = this.dataSource.data.filter((value,key)=>{
+      return value.booking != row_obj.booking
+    });
+    console.log(this.dataSource)
+  }
   addEvent(dates): void {
     console.log(startOfDay(new Date()));
     console.log(endOfDay(new Date()))
diff --git a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
index 5888edb..a3074a5 100644
--- a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
+++ b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
@@ -1 +1,80 @@
-<p>customers-list works!</p>
+<h3>Customers Details</h3>
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
+</mat-form-field>
+<button mat-button (click)="openDialog('Add',{})"   class="button">Add Customers</button>
+<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
+  <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">
+          <mat-accordion>
+             <mat-expansion-panel>
+                <mat-expansion-panel-header >
+                  <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
+    
+                    <ng-container matColumnDef="id">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
+                      <td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
+                    </ng-container>
+
+                    <!-- <ng-container matColumnDef="logo">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
+                      <td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
+                    </ng-container> -->
+                    
+                    <ng-container matColumnDef="name">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> Name </th>
+                      <td mat-cell *matCellDef="let element" class="element-spc"> {{element.name}} </td>
+                    </ng-container>
+                   
+                    <ng-container matColumnDef="email">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> Email </th>
+                      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="phone">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> Phone </th>
+                      <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="address" >
+                      <th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Address </th>
+                      <td mat-cell *matCellDef="let element"> {{element.address}} <br> {{element.city}} <br>  {{element.state}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="state">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> State </th>
+                      <td mat-cell *matCellDef="let element"> {{element.state}} </td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="city">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> City </th>
+                      <td mat-cell *matCellDef="let element"> {{element.city}} </td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="pincode">
+                        <th mat-header-cell *matHeaderCellDef class="font-color"> Pincode </th>
+                        <td mat-cell *matCellDef="let element"> {{element.pincode}} </td>
+                      </ng-container>
+                
+                    <ng-container matColumnDef="action">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
+                      <td mat-cell *matCellDef="let element" class="action-link"> 
+                        <a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> 
+                        <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
+                      </td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                  </table>
+                  </mat-expansion-panel-header>
+                  </mat-expansion-panel>
+                  </mat-accordion>
+                  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+                  </div>
+                  </div>
+                  </div>
+</mat-sidenav-container>
+
+
diff --git a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss
index e69de29..367c018 100644
--- a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss
+++ b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss
@@ -0,0 +1,84 @@
+.my-table{
+    width: 120%;
+}
+.button{
+    float: right;
+    background-color: #4caf50;
+    color: #ffff;
+}
+th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+    padding: 6px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+.mat-expansion-panel-header {
+    display: inline!important;
+}
+::ng-deep .mat-drawer-content {
+    overflow: hidden!important;
+    background-color: #ffff;
+}
+::ng-deep .body-container {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #ffff;
+}
+::ng-deep  .mat-expansion-panel:not([class*='mat-elevation-z']) {
+    box-shadow: none!important;
+}
+img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+  }
+  .fullscreen{
+    position: absolute !important;
+    height: auto !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  tr.mat-header-row {
+    height: 30px!important;
+}
+.font-color{
+    font-weight: 600;
+    font-size: 14px;
+}
+.edit-color{
+    color: rgba(0, 0, 0, 0.54);
+}
+.edit-color:hover {
+    color: #4caf50;
+  }
+  .delete:hover {
+    color:#ff0000;
+  }
+  ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+    width: 180%;
+}
+
+::ng-deep .mat-content {
+    display: flex;
+    flex: 1;
+    /* flex-direction: row; */
+    /* overflow: hidden; */
+    overflow-x: auto!important;
+    overflow-y: auto!important;
+}
+.th-mat{
+    width: 25%;
+}
+::ng-deep .mat-select-arrow {
+    margin: 0 15px!important;
+}
+mat-paginator{
+    margin-top: -8px;
+}
+::ng-deep .mat-paginator {
+    margin-top: -10px!important;
+}
+::ng-deep  body.swal2-height-auto {
+    height: 100% !important
+  }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
index f5422a8..f969c76 100644
--- a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
+++ b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
@@ -1,4 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
+import Swal from 'sweetalert2';
+import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
+
+export interface UsersData {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  state: string;
+  pincode: string;
+}
+const ELEMENT_DATA: UsersData[] = [
+  {id: 1, name: 'school management system ', email: 'management@gmail.com', phone: '8756453456', address:'14-20b/19 Vasantham Colony, Sangakiri.', state: 'Tamil Nadu', city: 'salem', pincode:'637301' },
+  {id: 2, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu' , pincode:'637301'},
+  {id: 3, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 4, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 5, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 6, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 7, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 8, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 9, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+  {id: 10,name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
+];
 
 @Component({
   selector: 'app-customers-list',
@@ -7,9 +35,112 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CustomersListComponent implements OnInit {
 
-  constructor() { }
+  push: any;
+  displayedColumns: string[] = ['id','name', 'email','phone', 'address', 'pincode',  'action'];
+  dataSource: any;
+  // dataSource: any = new MatTableDataSource(ELEMENT_DATA);
+  @ViewChild(MatTable,{static:true}) table: MatTable<any>;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
 
-  ngOnInit(): void {
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
   }
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+  constructor(public dialog: MatDialog) { }
 
+  confirmBox(name,element){  
+    console.log(name,element)
+    Swal.fire({  
+      title: 'Are you sure want to remove?',  
+      text: 'You will not be able to recover this file!',  
+      icon: 'warning',  
+      showCancelButton: true,  
+      confirmButtonText: 'Yes, delete it!',  
+      cancelButtonText: 'No, keep it'  
+    }).then((result) => {  
+      if (result.value) {  
+        this.deleteRowData(element);
+        Swal.fire(  
+          'Deleted!',  
+          'Your imaginary file has been deleted.',  
+          'success'  
+        )  
+      } else if (result.dismiss === Swal.DismissReason.cancel) {  
+        Swal.fire(  
+          'Cancelled',  
+          'Your imaginary file is safe :)',  
+          'error'  
+        )  
+      }  
+      
+    })   
+  } 
+  openDialog(action,obj) {
+    obj.action = action;
+    const dialogRef = this.dialog.open(DialogBoxComponent, {
+      // width: '30%',
+      height: '100%',
+      // maxWidth: '38vw',
+      position: { right: '0' },
+      data:obj
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result)
+      if(result.event == 'Add'){
+        this.addRowData(result.data);
+      }else if(result.event == 'Update'){
+        this.updateRowData(result.data);
+      }else if(result.event == 'Delete'){
+        this.deleteRowData(result.data);
+      }
+    });
+  }
+  addRowData(row_obj){
+    var d = this.dataSource.data.length+1
+    console.log(this.dataSource)
+    this.dataSource.data.push
+   ({
+      id: d,
+      name: row_obj.name,
+      email: row_obj.email,
+      phone: row_obj.phone,
+      address: row_obj.address,
+      city: row_obj.city,
+      state: row_obj.state,
+      pincode: row_obj.pincode
+    
+    });
+    this.table.renderRows();
+  }
+  updateRowData(row_obj){
+    console.log(row_obj)
+    this.dataSource = this.dataSource.data.filter((value,key)=>{
+      if(value.id == row_obj.id){
+        value.name = row_obj.name;
+        value.email = row_obj.email;
+        value.phone = row_obj.phone;
+        value.address = row_obj.address;
+        value.city = row_obj.city;
+        value.state = row_obj.state;
+        value.pincode = row_obj.pincode;
+      }
+      return true;
+    });
+  }
+  deleteRowData(row_obj){
+    console.log(this.dataSource.data,row_obj)
+    this.dataSource.data = this.dataSource.data.filter((value,key)=>{
+      return value.id != row_obj.id
+    });
+    console.log(this.dataSource)
+  }
+  ngOnInit(): void {
+    this.dataSource = new MatTableDataSource(ELEMENT_DATA)
+  }
 }
diff --git a/ng-seed/src/app/appoinment/customers/customers.module.ts b/ng-seed/src/app/appoinment/customers/customers.module.ts
index 0d99962..d7c048a 100644
--- a/ng-seed/src/app/appoinment/customers/customers.module.ts
+++ b/ng-seed/src/app/appoinment/customers/customers.module.ts
@@ -6,11 +6,13 @@ import { CustomersListComponent } from './customers-list/customers-list.componen
 import { MaterialModulesModule } from '../material-modules/material-modules.module';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { DialogBoxComponent } from './dialog-box/dialog-box.component';
 
 
 @NgModule({
   declarations: [
-    CustomersListComponent
+    CustomersListComponent,
+    DialogBoxComponent
   ],
   imports: [
     CommonModule,
diff --git a/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.html b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.html
new file mode 100644
index 0000000..3c485c4
--- /dev/null
+++ b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.html
@@ -0,0 +1,62 @@
+<mat-card class="settings-panel" >
+    <h5 mat-dialog-title> <strong>{{action}}  Customers</strong> 
+        <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
+        ><mat-icon>close</mat-icon></button></h5>
+       
+      <div mat-dialog-content class="my-table">
+        <form [formGroup]="form" (ngSubmit)="submit()">
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" Name" matInput  formControlName="name">
+          <mat-error *ngIf="myError('name', 'required')">Name is required</mat-error>
+          <mat-error *ngIf="myError('name', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field>  
+      
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
+          <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
+            Please enter a valid email address
+         </mat-error>
+         <mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
+            Email is required
+         </mat-error>
+        </mat-form-field>
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" Phone" matInput [(ngModel)]="local_data.phone" formControlName="contact_no">
+          <mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error>
+          <mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field> 
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
+          <mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
+          <mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field> 
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
+          <mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
+          <mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field> 
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
+          <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
+          <mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field>
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+            <input placeholder=" Pincode" matInput [(ngModel)]="local_data.pincode" formControlName="pincode">
+            <mat-error *ngIf="myError('pincode', 'required')">Pincode is required</mat-error>
+            <mat-error *ngIf="myError('pincode', 'maxlength')">Limit exceed</mat-error>
+          </mat-form-field>
+        <!-- <img  class="image" [src]="url" height="50">
+        <input type='file' (change)="onSelectFile($event)" formControlName="image"> -->
+      </form>
+      </div>
+      
+      <ng-template #elseTemplate>
+        Sure to delete <b>{{local_data.name}}</b>?
+      </ng-template><br>
+      <div mat-dialog-actions>
+        <button mat-button (click)="doAction()" class="mat-green"  mat-raised-button >{{action}}</button>
+        <button mat-button (click)="closeDialog()" >Cancel</button>
+      </div>
+      </mat-card>
+      
+      
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.scss b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.scss
new file mode 100644
index 0000000..0bad49d
--- /dev/null
+++ b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.scss
@@ -0,0 +1,48 @@
+// ::ng-deep .cdk-overlay-pane{
+//     width: 60%!important;
+// }
+.mat-pane{
+    width: 20rem;
+}
+.button{
+    // float: right; 
+    margin-bottom: 1rem;
+    background-color: #ffff;
+    margin-top: -1rem;
+    margin-left: 6rem;
+}
+::ng-deep .mat-card.settings-panel {
+     position: inherit; 
+     bottom: 0px; 
+     right: 0px; 
+     width: 350px; 
+    z-index: 9;
+     top: 58px; 
+}
+
+::ng-deep body .mat-card {
+    box-shadow:none!important; 
+}
+
+// @include media-breakpoint-down(lg) {
+//     padding-top: 150px;
+//     }
+//     @include media-breakpoint-down(md) {
+//      padding-top: 100px;
+//     }
+//     @include media-breakpoint-down(sm) {
+//      padding-top: 100px;
+//     }
+
+
+// @media only screen and (max-width: 600px) {
+//     .cdk-overlay-pane{
+//         width: 90%!important;
+//     }
+// }
+
+@media (max-width: 959px){
+    .cdk-overlay-pane{
+        width: 90%!important;
+    }
+}
diff --git a/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.spec.ts b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.spec.ts
new file mode 100644
index 0000000..ec05663
--- /dev/null
+++ b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogBoxComponent } from './dialog-box.component';
+
+describe('DialogBoxComponent', () => {
+  let component: DialogBoxComponent;
+  let fixture: ComponentFixture<DialogBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DialogBoxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.ts b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.ts
new file mode 100644
index 0000000..a6651a8
--- /dev/null
+++ b/ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.ts
@@ -0,0 +1,75 @@
+import { Component, Inject, OnInit, Optional } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+export interface UsersData {
+  name: string;
+  id: number;
+}
+@Component({
+  selector: 'app-dialog-box',
+  templateUrl: './dialog-box.component.html',
+  styleUrls: ['./dialog-box.component.scss']
+})
+export class DialogBoxComponent implements OnInit {
+  form: FormGroup;
+  fileToUpload: any;
+  imageUrl: any;
+  action:string;
+  local_data:any;
+  url: string | ArrayBuffer;
+  constructor(private router: Router,private formBuilder: FormBuilder,
+    public dialogRef: MatDialogRef<DialogBoxComponent>,
+    @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
+    console.log(data);
+    this.local_data = {...data};
+    this.action = this.local_data.action;
+  }
+  get f(){
+    return this.form.controls;
+  }
+  doAction(){
+    let tmp = this.form.value
+    tmp.id = this.local_data.id
+    this.dialogRef.close({event:this.action,data:tmp});
+    console.log(this.form.value);
+    console.log(this.action,this.local_data)
+  }
+  closeDialog(){
+    this.dialogRef.close({event:'Cancel'});
+  }
+  onSelectFile(event) {
+    if (event.target.files && event.target.files[0]) {
+      var reader = new FileReader();
+      reader.readAsDataURL(event.target.files[0]); 
+      reader.onload = (event) => { 
+        this.url = event.target.result;
+      }
+    }
+  }
+  close() {
+    this.dialogRef.close();
+}
+  ngOnInit() {
+    this.form = new FormGroup({
+    businessselect: new FormControl('', [Validators.required]),
+    image: new FormControl('', null),
+    name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
+    city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    pincode: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
+      '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
+    ),]),
+    contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    });
+    this.form.patchValue(this.local_data)
+    }
+    public myError = (controlName: string, errorName: string) =>{
+      return this.form.controls[controlName].hasError(errorName);
+      }
+      submit(){
+        console.log(this.form.value);
+      }
+}
diff --git a/ng-seed/src/app/appoinment/user/user-dialog-box/user-dialog-box.component.html b/ng-seed/src/app/appoinment/user/user-dialog-box/user-dialog-box.component.html
index 38aad0b..b77b5f7 100644
--- a/ng-seed/src/app/appoinment/user/user-dialog-box/user-dialog-box.component.html
+++ b/ng-seed/src/app/appoinment/user/user-dialog-box/user-dialog-box.component.html
@@ -1,5 +1,5 @@
 <mat-card class="settings-panel" >
-<h5 mat-dialog-title> <strong>{{action}} New Users</strong> 
+<h5 mat-dialog-title> <strong>{{action}}  Users</strong> 
     <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
     ><mat-icon>close</mat-icon></button></h5>
    
diff --git a/ng-seed/src/app/appoinment/user/user-list/user-list.component.scss b/ng-seed/src/app/appoinment/user/user-list/user-list.component.scss
index d11c184..f647261 100644
--- a/ng-seed/src/app/appoinment/user/user-list/user-list.component.scss
+++ b/ng-seed/src/app/appoinment/user/user-list/user-list.component.scss
@@ -66,4 +66,13 @@ img {
     /* overflow: hidden; */
     overflow-x: auto!important;
     overflow-y: auto!important;
-}
\ No newline at end of file
+}
+::ng-deep .mat-paginator {
+    margin-top: -15px!important;
+}
+::ng-deep .mat-select-arrow {
+    margin: 0 15px!important;
+}
+::ng-deep  body.swal2-height-auto {
+    height: 100% !important
+  }
\ No newline at end of file