diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e8fd477..5d39932 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -59,6 +59,14 @@ const routes: Routes = [
     path: 'merms-opencare',
     loadChildren: () => import('./care/merms-opencare/merms-opencare.module').then( m => m.MermsOpencarePageModule)
   },
+  {
+    path: 'add-practice',
+    loadChildren: () => import('./modal/add-practice/add-practice.module').then( m => m.AddPracticePageModule)
+  },
+  {
+    path: 'consult-billing',
+    loadChildren: () => import('./modal/consult-billing/consult-billing.module').then( m => m.ConsultBillingPageModule)
+  },
 ];
 
 @NgModule({
diff --git a/src/app/merms-patient/merms-patient.page.ts b/src/app/merms-patient/merms-patient.page.ts
index 1c5b9df..ebc2751 100644
--- a/src/app/merms-patient/merms-patient.page.ts
+++ b/src/app/merms-patient/merms-patient.page.ts
@@ -3,9 +3,12 @@ import { Router, NavigationExtras, ActivatedRoute } from '@angular/router'
 import {
   NavController,
   AlertController,
+  ModalController,
   LoadingController,
 } from '@ionic/angular'
 
+import { ConsultBillingPage } from './../modal/consult-billing/consult-billing.page';
+
 
 @Component({
   selector: 'app-merms-patient',
@@ -25,7 +28,8 @@ export class MermsPatientPage implements OnInit {
   profile_picture: string = "../../assets/imgs/merms-signup.jpg";
 
 
-  constructor(public navCtrl: NavController, private router: Router, private route: ActivatedRoute) {
+  constructor(public navCtrl: NavController, private router: Router, private route: ActivatedRoute,
+    public modalController: ModalController) {
     console.log('-----------------------------xxxx-----------------------------');
     console.log(this.router.getCurrentNavigation().extras.queryParams);
     this.patientData = this.router.getCurrentNavigation().extras.queryParams;
@@ -64,7 +68,10 @@ export class MermsPatientPage implements OnInit {
     this.router.navigateByUrl('/merms-dash')
   }
 
-  goConsultBillProfine() {
-
+  async goConsultBillProfine() {
+    const modal = await this.modalController.create({
+      component: ConsultBillingPage
+    });
+    return await modal.present();
   }
 }
diff --git a/src/app/merms-practice/merms-practice.page.ts b/src/app/merms-practice/merms-practice.page.ts
index d5861f5..32f66e2 100644
--- a/src/app/merms-practice/merms-practice.page.ts
+++ b/src/app/merms-practice/merms-practice.page.ts
@@ -1,8 +1,10 @@
+import { AddPracticePage } from './../modal/add-practice/add-practice.page';
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationExtras } from '@angular/router'
 import {
   NavController,
   AlertController,
+  ModalController,
   LoadingController,
 } from '@ionic/angular'
 
@@ -19,7 +21,8 @@ export class MermsPracticePage implements OnInit {
 
   constructor(public navCtrl: NavController, private router: Router,
     private mermsServiceProviderService: MermsServiceProviderService,
-    private mermsSessionService: MermsSessionService
+    private mermsSessionService: MermsSessionService,
+    public modalController: ModalController
   ) {
     this.getPracticeData();
   }
@@ -63,7 +66,10 @@ export class MermsPracticePage implements OnInit {
 
 
   }
-  goAddPractice() {
-
+  async goAddPractice() {
+    const modal = await this.modalController.create({
+      component: AddPracticePage
+    });
+    return await modal.present();
   }
 }
diff --git a/src/app/modal/add-practice/add-practice-routing.module.ts b/src/app/modal/add-practice/add-practice-routing.module.ts
new file mode 100644
index 0000000..3881605
--- /dev/null
+++ b/src/app/modal/add-practice/add-practice-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AddPracticePage } from './add-practice.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AddPracticePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AddPracticePageRoutingModule {}
diff --git a/src/app/modal/add-practice/add-practice.module.ts b/src/app/modal/add-practice/add-practice.module.ts
new file mode 100644
index 0000000..d243e30
--- /dev/null
+++ b/src/app/modal/add-practice/add-practice.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AddPracticePageRoutingModule } from './add-practice-routing.module';
+
+import { AddPracticePage } from './add-practice.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AddPracticePageRoutingModule
+  ],
+  declarations: [AddPracticePage]
+})
+export class AddPracticePageModule {}
diff --git a/src/app/modal/add-practice/add-practice.page.html b/src/app/modal/add-practice/add-practice.page.html
new file mode 100644
index 0000000..d271996
--- /dev/null
+++ b/src/app/modal/add-practice/add-practice.page.html
@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>addPractice</ion-title> 
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-button color="success" (click)="dismiss()">Close</ion-button>
+</ion-content>
diff --git a/src/app/modal/add-practice/add-practice.page.scss b/src/app/modal/add-practice/add-practice.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modal/add-practice/add-practice.page.spec.ts b/src/app/modal/add-practice/add-practice.page.spec.ts
new file mode 100644
index 0000000..c075bff
--- /dev/null
+++ b/src/app/modal/add-practice/add-practice.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AddPracticePage } from './add-practice.page';
+
+describe('AddPracticePage', () => {
+  let component: AddPracticePage;
+  let fixture: ComponentFixture<AddPracticePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddPracticePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddPracticePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modal/add-practice/add-practice.page.ts b/src/app/modal/add-practice/add-practice.page.ts
new file mode 100644
index 0000000..86e9d2e
--- /dev/null
+++ b/src/app/modal/add-practice/add-practice.page.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-add-practice',
+  templateUrl: './add-practice.page.html',
+  styleUrls: ['./add-practice.page.scss'],
+})
+export class AddPracticePage implements OnInit {
+
+  constructor(private modalCtrl:ModalController) { }
+
+  ngOnInit() {
+  }
+  
+  dismiss() {
+    // using the injected ModalController this page
+    // can "dismiss" itself and optionally pass back data
+    this.modalCtrl.dismiss({
+      'dismissed': true
+    });
+  }
+}
diff --git a/src/app/modal/consult-billing/consult-billing-routing.module.ts b/src/app/modal/consult-billing/consult-billing-routing.module.ts
new file mode 100644
index 0000000..4fb2ae2
--- /dev/null
+++ b/src/app/modal/consult-billing/consult-billing-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ConsultBillingPage } from './consult-billing.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ConsultBillingPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ConsultBillingPageRoutingModule {}
diff --git a/src/app/modal/consult-billing/consult-billing.module.ts b/src/app/modal/consult-billing/consult-billing.module.ts
new file mode 100644
index 0000000..6f08003
--- /dev/null
+++ b/src/app/modal/consult-billing/consult-billing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ConsultBillingPageRoutingModule } from './consult-billing-routing.module';
+
+import { ConsultBillingPage } from './consult-billing.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ConsultBillingPageRoutingModule
+  ],
+  declarations: [ConsultBillingPage]
+})
+export class ConsultBillingPageModule {}
diff --git a/src/app/modal/consult-billing/consult-billing.page.html b/src/app/modal/consult-billing/consult-billing.page.html
new file mode 100644
index 0000000..ad3c316
--- /dev/null
+++ b/src/app/modal/consult-billing/consult-billing.page.html
@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>consultBilling</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-button color="success" (click)="dismiss()">Close</ion-button>
+</ion-content>
diff --git a/src/app/modal/consult-billing/consult-billing.page.scss b/src/app/modal/consult-billing/consult-billing.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modal/consult-billing/consult-billing.page.spec.ts b/src/app/modal/consult-billing/consult-billing.page.spec.ts
new file mode 100644
index 0000000..624b902
--- /dev/null
+++ b/src/app/modal/consult-billing/consult-billing.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ConsultBillingPage } from './consult-billing.page';
+
+describe('ConsultBillingPage', () => {
+  let component: ConsultBillingPage;
+  let fixture: ComponentFixture<ConsultBillingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConsultBillingPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ConsultBillingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modal/consult-billing/consult-billing.page.ts b/src/app/modal/consult-billing/consult-billing.page.ts
new file mode 100644
index 0000000..5dd818d
--- /dev/null
+++ b/src/app/modal/consult-billing/consult-billing.page.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-consult-billing',
+  templateUrl: './consult-billing.page.html',
+  styleUrls: ['./consult-billing.page.scss'],
+})
+export class ConsultBillingPage implements OnInit {
+
+  constructor(private modalCtrl:ModalController) { }
+
+  ngOnInit() {
+  }
+  dismiss() {
+    // using the injected ModalController this page
+    // can "dismiss" itself and optionally pass back data
+    this.modalCtrl.dismiss({
+      'dismissed': true
+    });
+  }
+}