diff --git a/ng-seed/src/app/app.routing.ts b/ng-seed/src/app/app.routing.ts
index fd8413b..794a814 100644
--- a/ng-seed/src/app/app.routing.ts
+++ b/ng-seed/src/app/app.routing.ts
@@ -25,8 +25,6 @@ export const AppRoutes: Routes = [{
     loadChildren: () => import('./appoinment/appoinments/appoinments.module').then(m => m.AppoinmentsModule)
     
   },
- 
- 
   {
     path: 'customers',
     loadChildren: () => import('./appoinment/customers/customers.module').then(m => m.CustomersModule)
@@ -43,6 +41,10 @@ export const AppRoutes: Routes = [{
     path: 'consultant-setting',
     loadChildren: () => import('./appoinment/consultant-setting/consultant-setting.module').then(m => m.ConsultantSettingModule)
   },
+  {
+    path: 'customer-info',
+    loadChildren: () => import('./appoinment/appoinment.module').then(m => m.AppoinmentModule)
+  },
  
   
 ]
diff --git a/ng-seed/src/app/appoinment/appoinment-routing.module.ts b/ng-seed/src/app/appoinment/appoinment-routing.module.ts
index 57f0326..2666761 100644
--- a/ng-seed/src/app/appoinment/appoinment-routing.module.ts
+++ b/ng-seed/src/app/appoinment/appoinment-routing.module.ts
@@ -9,15 +9,19 @@ const routes: Routes = [
 //   component: AddBusinessListComponent
 // },
 
-{
-  path: 'add-user-list',
-  component: UserListComponent
-},
 // {
-//   path: 'user-list',
+//   path: 'add-user-list',
 //   component: UserListComponent
 // },
 // {
+//   path: '',
+//   component: CustomerInfoComponent
+// },
+// {
+//   path: '',
+//   component: PaymentComponent
+// },
+// {
 //   path: 'appoinments-list',
 //   component: AppoinmentsListComponent
 // },
diff --git a/ng-seed/src/app/appoinment/appoinment.module.ts b/ng-seed/src/app/appoinment/appoinment.module.ts
index f1e1b07..09e851e 100644
--- a/ng-seed/src/app/appoinment/appoinment.module.ts
+++ b/ng-seed/src/app/appoinment/appoinment.module.ts
@@ -2,15 +2,16 @@ 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'; 
 
 @NgModule({
-  declarations: [
+  declarations: [ 
   ],
   imports: [
     DemoMaterialModule,
     CommonModule,
     AppoinmentRoutingModule,
-  
+    NgScrollbarModule
     // UserModule,
     // AppoinmentsModule,
     // CustomersModule,
diff --git a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html
index ac1eff8..6faf345 100644
--- a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html
+++ b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html
@@ -3,12 +3,21 @@
     ><mat-icon>close</mat-icon></button></h5>
     <form [formGroup]="form" (ngSubmit)="submit()">
         <div mat-dialog-content class="my-table">
-
-            <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+              <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
                 <input placeholder="servicesName" matInput  formControlName="servicesName">
                 <mat-error *ngIf="myError('servicesName', 'required')">ServiceName is required</mat-error>
                 <mat-error *ngIf="myError('servicesName', 'maxlength')">Limit exceed</mat-error>
               </mat-form-field> 
+              <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+                <mat-label>Duration</mat-label>
+                <mat-select placeholder="Select Role" formControlName="duration" required>
+                  <mat-option>--</mat-option>
+                  <mat-option *ngFor="let data of durationTime" [value]="data.time">
+                      {{data.time}} Mins
+                  </mat-option>
+                </mat-select>
+              <mat-error *ngIf="myError('duration', 'required')">Duration is required</mat-error> 
+              </mat-form-field>
               <ng-template #elseTemplate>
                 Sure to delete <b>{{local_data.servicesName}}</b>?
               </ng-template>
diff --git a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
index ffbbd48..9687873 100644
--- a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
+++ b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
@@ -17,6 +17,7 @@ export class AddServiceComponent implements OnInit {
   form: FormGroup;
   local_data:any;
   action:string;
+ public durationTime = [{'time':'10'},{'time':'15'},{'time':'20'},{'time':'25'},{'time':'30'},{'time':'35'},{'time':'45'},{'time':'50'},{'time':'55'},{'time':'60'}]
   constructor(private router: Router,private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<AddServiceComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
@@ -38,6 +39,7 @@ closeDialog(){
 ngOnInit() {
   this.form = new FormGroup({
     servicesName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    duration: new FormControl('',[Validators.required])
  });
   this.form.patchValue(this.local_data)
   }
diff --git a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html
index 88dfcea..c2653ec 100644
--- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html
+++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html
@@ -1,26 +1,63 @@
-<button mat-button (click)="openDialog('Add',{})"   class="buttons">Add Services</button><br>
-<div fxLayout="row wrap" >
-    <div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" class="m-gap p-gap flx" *ngFor="let serviceListDetails of servicesList">
-        <div class="Specialties-list-card">
-        <mat-card class="mb-2 example-card d-flex Specialties-spContent">
-            <div class="consultant-card-cover">
-                <div>
-                   <div class="text-center consultant-thumb">
-                      <img class="img-responsive img-circle"  src="https://prodaphstorage.blob.core.windows.net/specialties/bdf0cf0d-754e-4254-aaf7-fdc7aedd7c35.jpg" alt="Online Doctor Consultation - Allergist and Clinical Immunologist" width="120" height="120" alt="user list image">
-                   </div>
-                </div>
-             </div>
-            <mat-card-title-group>   
-            <mat-card-title class="service-info mb">{{serviceListDetails.servicesName}}</mat-card-title>
-            <mat-card-title class="info service-list">{{serviceListDetails.info}}</mat-card-title>
-            <a (click)="openDialog('Update',serviceListDetails)" class="Specialties-rightUpdate"><span class="material-icons edit-color">edit</span></a> 
-            <a (click)="confirmBox('Delete',serviceListDetails)" class="Specialties-rightArrow"><span class="material-icons edit-color delete">delete</span></a> 
-            <!-- <span class="Specialties-rightArrow"><img src="https://newassets.apollo247.com/images/ic_arrow_right.svg" alt="Arrow Right - Online Doctor Consultation"></span> -->
-            <mat-card-subtitle class="service-Specialties">{{serviceListDetails.specialties}}</mat-card-subtitle>
-            
-        </mat-card-title-group>
-        </mat-card>
-     
-    </div>
- </div>
- </div>
+<h3>Services 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 Services</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 >
+                  <div class="example-container mat-elevation-z8 ">
+                  <table mat-table [dataSource]="servicesList" #mytable class="my-table mat-elevation-z8 len-table">
+    
+                    <ng-container matColumnDef="serviceId">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
+                      <td mat-cell *matCellDef="let element" class="element-spc"> {{element.serviceId}} </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="servicesName">
+                      <th mat-header-cell *matHeaderCellDef class="font-color">Service  Name </th>
+                      <td mat-cell *matCellDef="let element" class="element-spc"> {{element.servicesName}} </td>
+                    </ng-container>
+                   
+                    <ng-container matColumnDef="duration">
+                      <th mat-header-cell *matHeaderCellDef class="font-color"> Duration </th>
+                      <td mat-cell *matCellDef="let element"> {{element.duration}} </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; sticky: true"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                  </table>
+                  </div>
+                  </mat-expansion-panel-header>
+                  </mat-expansion-panel>
+                  </mat-accordion>
+                  <!-- <div [hidden]="recordStatus">
+                    <mat-paginator  #paginator class="mat-elevation-z1" [length]="customersList.length" [pageIndex]="pageIndex"
+                        [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
+                    </mat-paginator>
+                    </div> -->
+                    
+                  <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/service-list-details/service-list/service-list.component.scss b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss
index 7b2ec62..7f0f260 100644
--- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss
+++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss
@@ -1,92 +1,53 @@
-$white: #fff;
-$black_10: rgba(0, 0, 0, 0.1);
-$black_30: rgba(0, 0, 0, 0.3);
-$icon-size: 3rem;
-$icon-color: #D8D8D8;
-$main-color: #f44336;
-.Specialties-list-card {
-    background: $white;
-    box-shadow: 0 2px 6px $black_10;
-    transition: all 0.3s ease-in-out 0s;
-    &:hover {
-        box-shadow: 0 0 21px $black_30;
-        cursor: pointer;
-        transform: scale(1.04);
-    }
-}
-.consultant-card-cover {
-    // padding: 0rem 6rem;
-    position: relative;
-    background-size: cover;
-    margin-left: 0.5rem;
-    margin-right: 1rem;
-}
-.consultant-thumb {
-    // position: absolute;
-    // margin-top: 20px;
-    // margin-left: -45rem;
-    img {
-        border: 5px solid #fff;;
-        border-radius: 100%;
-        height: 50px;
-        width: 50px;
-        // margin-right: -8rem;
-    }
-}
-.service-info{
-    line-height: 1.5rem!important;
-}
-.info{
-    font-size: 12px!important;
-    font-weight: 500;
-    color: rgba(2,71,91,.6);
-    padding: 0 0 10px;
-    max-height: 38px;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-.service-Specialties{
-    font-size: 10px;
-    font-weight: 600;
-    color: #02475b;
-    padding: 10px 0 0;
-    // border-top: 1px solid rgba(2,71,91,.3);
-}
-
-.Specialties-rightArrow{
-    top: 1rem;
-    right: 0;
-    position: absolute;
-    padding-right: 0.5rem;
-}
-.flx{
-    width: 47%;
-}
-.Specialties-spContent{
+.my-table{
     width: 100%;
-    padding: 0 10px 0 0;
-    position: relative;
-    // min-height: 60px;
-    height: 65px;
 }
-.mb{
-    margin-bottom: 0.60rem;
-}
-::ng-deep body .mat-card .mat-card-title {
-     padding-left: 0rem!important; 
-}
-::ng-deep body .mat-card .mat-card-subtitle {
-    padding-left: 0rem!important; 
-}
-.buttons{
+.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: hidden;
+//     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: white;
+    color: rgba(0, 0, 0, 0.54);
 }
 .edit-color:hover {
     color: #4caf50;
@@ -94,12 +55,31 @@ $main-color: #f44336;
   .delete:hover {
     color:#ff0000;
   }
-  .icon-lft{
-    margin-left: 6rem;
-  }
-  .Specialties-rightUpdate{
-    top: 1rem;
-    right: 0;
-    position: absolute;
-    padding-right: 2.5rem;
+//   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+//     width: 180%;
+// }
+
+::ng-deep .mat-content {
+    display: block!important;
+    flex: 1;
+    /* flex-direction: row; */
+    /* overflow: hidden; */
+    overflow-x: auto!important;
+    overflow-y: auto!important;
 }
+::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
+  }
+  .example-container {
+    display: block;
+    height: 348px;
+    /* overflow: auto; */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts
index a047760..05f58c3 100644
--- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts
+++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts
@@ -20,6 +20,7 @@ export class ServiceListComponent implements OnInit {
   addFormData: any;
   push: any;
   id: number;
+  displayedColumns: string[] = ['serviceId','servicesName','duration','action'];
   serviceId: number;
   public servicesList:any = new MatTableDataSource();
   constructor(public _api:ApiServiceService, public dialog: MatDialog) { }
@@ -100,7 +101,7 @@ export class ServiceListComponent implements OnInit {
   openDialog(action,obj) {
     obj.action = action;
     const dialogRef = this.dialog.open(AddServiceComponent, {
-      width: '39%',
+      width: '30%',
       height: '100%',
       // maxWidth: '38vw',
       position: { right: '0' },
@@ -122,7 +123,7 @@ export class ServiceListComponent implements OnInit {
       let addFormData =   { 
         // busId: 'abc123', 
         // id: row_obj.id, 
-
+        duration:row_obj.duration,
         serviceId: row_obj.serviceId, 
         servicesName: row_obj.servicesName   
       };
@@ -130,8 +131,11 @@ export class ServiceListComponent implements OnInit {
      }else if(result.event == 'Update'){  
       console.log(row_obj)
       console.log('Update')
-let updatevalue = {  serviceId: row_obj.serviceId, 
-  servicesName: row_obj.servicesName  }
+    let updatevalue = { 
+       serviceId: row_obj.serviceId, 
+       duration:row_obj.duration,
+       servicesName: row_obj.servicesName 
+    }
       formValue.push(updatevalue);
      }
      else if(result == 'Delete'){
@@ -164,4 +168,12 @@ let updatevalue = {  serviceId: row_obj.serviceId,
     });
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.servicesList.filter = filterValue.trim().toLowerCase();
+    if (this.servicesList.paginator) {
+      this.servicesList.paginator.firstPage();
+    }
+  }
+
 }
diff --git a/ng-seed/src/app/layouts/role-menu-items.pipe.ts b/ng-seed/src/app/layouts/role-menu-items.pipe.ts
index 206aec7..378dcb4 100644
--- a/ng-seed/src/app/layouts/role-menu-items.pipe.ts
+++ b/ng-seed/src/app/layouts/role-menu-items.pipe.ts
@@ -10,8 +10,8 @@ export class RoleMenuItemsPipe implements PipeTransform {
     // // this is for horizontal menu filter 
     // if(type=="1"){
       switch(localStorage.getItem('user_role')){
-        case 'SADMIN': return value.filter(val=>val.state!="appoinments" && val.state!="customers" && val.state != "consultant-setting"); 
-        case 'BADMIN': return value.filter(val=>val.state !="business" && val.state!="appoinments" && val.state!="customers" && val.state!="consultants" && val.state != "consultant-setting");
+        case 'SADMIN': return value.filter(val=>val.state!="appoinments" && val.state!="customers" && val.state != "consultant-setting" && val.state!="consultants" && val.state!="services"); 
+        case 'BADMIN': return value.filter(val=>val.state !="business" && val.state != "consultant-setting");
         case 'PRACTITIONER': return value.filter(val=>val.state !="business" && val.state!="consultants" && val.state!="users" && val.state!="services");
         // case 'PRACTITIONER': 
     //     case '3': return value.filter(val=>val.state!="settings");
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 51a3725..8f4dd30 100644
--- a/ng-seed/src/app/shared/menu-items/menu-items.ts
+++ b/ng-seed/src/app/shared/menu-items/menu-items.ts
@@ -93,12 +93,12 @@ const MENUITEMS : Menu[] = [
     // //  {state: 'add-user-list', name: 'Add Users '},
     // ]
   },
-  // {
-  //   state: 'consultant-setting',
-  //   name: 'My Settings',
-  //   type: 'link',
-  //   icon: 'settings_system_daydream'
-  // },
+  {
+    state: 'consultant-setting',
+    name: 'My Settings',
+    type: 'link',
+    icon: 'settings_system_daydream'
+  },
   // {
   //   state: 'business-centers',
   //   name: 'Centers',
@@ -110,13 +110,7 @@ const MENUITEMS : Menu[] = [
   //   name: 'search Category',
   //   type: 'link',
   //   icon: 'settings_system_daydream'
-  // },
-  // {
-  //   state: 'slot-booking',
-  //   name: 'Slot Booking',
-  //   type: 'link',
-  //   icon: 'settings_system_daydream'
-  // }
+  // }, 
 
 ];