diff --git a/src/app/merms-calendar/merms-calendar.page.html b/src/app/merms-calendar/merms-calendar.page.html
index 02a01c6..d962464 100644
--- a/src/app/merms-calendar/merms-calendar.page.html
+++ b/src/app/merms-calendar/merms-calendar.page.html
@@ -1,13 +1,37 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>merms-calendar</ion-title>
-  </ion-toolbar>
-</ion-header>
+<ion-content class="merms-calendar-page">
+  <div class="container">
+    <ion-grid class="top-container">
+      <ion-row>
+        <ion-col size="2" class="navigation">
+          <ion-back-button text="" (click)="goBack()"></ion-back-button>
+        </ion-col>
+        <ion-col size="8" class="page-title">Calendar</ion-col>
+      </ion-row>
+    </ion-grid>
+    <button ion-button (click)="openCalendar()">Open Calendar on Current Date</button>
+{{MyCalendar}}
+    
+<ion-list>
+  <ion-list-header>
+    <hr size="1">
+  </ion-list-header>
 
-<ion-content>
-  <div class="ion-padding">
+  <ion-item *ngFor="let type of calendarData"  (click)="goPatient(type)">
+    <ion-avatar slot="start">
+      <img src="./../../assets/imgs/avatar.svg">
+    </ion-avatar>
+    <ion-label>
+      <h2>{{type.firstname}} {{type.lastname}}</h2>
+      <h3>{{type.reason}}</h3>
+      <p>{{type.appt}} {{type.gender}} , {{type.age}} yrs</p>
+    </ion-label>
+  </ion-item>
 
-   {{mycal}}
+ 
+</ion-list>
 
   </div>
+
+
 </ion-content>
+
diff --git a/src/app/merms-calendar/merms-calendar.page.scss b/src/app/merms-calendar/merms-calendar.page.scss
index e69de29..39cb762 100644
--- a/src/app/merms-calendar/merms-calendar.page.scss
+++ b/src/app/merms-calendar/merms-calendar.page.scss
@@ -0,0 +1,143 @@
+.merms-calendar-page{
+
+    display: flex;
+    flex-direction: column;
+    --padding-top: 0px;
+    --padding-bottom: 40px;
+    --padding-start: 24px;
+    --padding-end: 24px;
+    .container {
+      padding-top: 7vh;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      ion-grid.top-container {
+        flex: 0 0 0;
+        width: 100%;
+      }
+      .navigation {
+        text-align: left;
+        padding-left: 2px;
+        ion-back-button {
+          --color: #000;
+          display: inline-block; 
+          --icon-font-size: 30px;
+        }
+      }
+      .page-title {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 12px;
+        line-height: 106.4%;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        margin-top: 30px;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 26px;
+        line-height: 135%;
+        color: #000;
+        text-align: center;
+      }
+    }
+  
+    .bottom-container {
+      margin-top: 6vh;
+      display: block;
+      //flex: 1;
+      //flex-direction: column;
+      .google-sign-up,
+      .apple-sign-up {
+        display: block;
+        border: 2px solid #000000;
+        box-sizing: border-box;
+        border-radius: 26.98px;
+        padding: 13px 0;
+        text-align: center;
+        background: none;
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 14px;
+        color: #000000;
+        margin-bottom: 20px;
+        position: relative;
+        height: 55px !important;
+        width: 100%;
+  
+        span {
+          opacity: 1;
+          font-size: 16px;
+          line-height: 24px;
+          margin: 0;
+          height: 25px;
+          display: inline-block;
+          padding: 0;
+          vertical-align: top;
+        }
+  
+        img {
+          height: 24px;
+          margin-right: 13px;
+        }
+      }
+      span {
+        font-size: 12px;
+        line-height: 145%;
+        letter-spacing: -0.2px;
+        color: #000000;
+        opacity: 0.25;
+        text-align: center;
+        display: inline-block;
+        margin-bottom: 20px;
+        &.forgot-password {
+          margin-top: 20px;
+        }
+      }
+      .form {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        ion-input {
+          border: 2px solid #000000;
+          box-sizing: border-box;
+          border-radius: 26.98px;
+          margin-bottom: 16px;
+          --padding-start: 20px;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 145%;
+          letter-spacing: -0.2px;
+          color: #000000;
+        }
+        button {
+          background: #0b7493;
+          border-radius: 30px;
+          vertical-align: bottom;
+          display: flex;
+          margin: auto auto 0 auto;
+          width: 168px;
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 22px;
+          color: #fff;
+          justify-content: center;
+          padding: 14px 0;
+          opacity: 0.5;
+          height: 50px;
+          min-height: 50px;
+          &.active-button {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/app/merms-calendar/merms-calendar.page.ts b/src/app/merms-calendar/merms-calendar.page.ts
index 55b287f..76a29ea 100644
--- a/src/app/merms-calendar/merms-calendar.page.ts
+++ b/src/app/merms-calendar/merms-calendar.page.ts
@@ -7,23 +7,37 @@ import { Calendar } from '@ionic-native/calendar/ngx';
   styleUrls: ['./merms-calendar.page.scss'],
 })
 export class MermsCalendarPage implements OnInit {
-  calendar={
-    mode:'month',
-    currentDate: new DataCue(),
-  };
+
   
 @ViewChild(Calendar) mycal: Calendar;
  
+MyCalendar:any;
+calendarData:any;
 
-constructor() {
-
-  
+constructor(private calendar: Calendar) {
 
+ // this.MyCalendar=calendar;
+  /*
+  this.calendar.createCalendar('MyCalendar').then(
+    (msg) => { console.log(msg); },
+    (err) => { console.log(err); }
+  );
+*/
 
  }
+ goPatient(){
+   
+ }
+ openCalendar(){
+  this.calendar.openCalendar(new Date()).then(
+      (msg) => { console.log(msg); },
+      (err) => { console.log(err); }
+  );
+}
 
+goBack(){
 
-
+}
 
   ngOnInit() {
   }
diff --git a/src/app/merms-dash/merms-dash.page.html b/src/app/merms-dash/merms-dash.page.html
index ef85365..6c07616 100644
--- a/src/app/merms-dash/merms-dash.page.html
+++ b/src/app/merms-dash/merms-dash.page.html
@@ -21,7 +21,7 @@
       </ion-col>
       <ion-col>
        
-        <ion-icon name="card-outline"></ion-icon>
+        <ion-icon name="card-outline"  (click)="goWallet()"></ion-icon>
       </ion-col>
     </ion-row>
   </ion-grid>
@@ -90,18 +90,18 @@
         </ion-col>
         <ion-col>
           <div>
-            <ion-icon name="calendar" style="color:aquamarine;" (click)="goCalendar()"></ion-icon>
+            <ion-icon name="calendar" style="color:#8e54e9;" (click)="goCalendar()"></ion-icon>
           </div>
         </ion-col>
         <ion-col>
           <div>
-            <ion-icon name="wallet" style="color:green;" (click)="goWallet()"></ion-icon>
+            <ion-icon name="wallet" style="color:#8e54e9;" (click)="goWallet()"></ion-icon>
           </div>
         </ion-col>
 
         <ion-col>
           <div>
-            <ion-icon name="settings" style="color:red;" (click)="goSettings()"></ion-icon>
+            <ion-icon name="settings" style="color:#8e54e9;" (click)="goSettings()"></ion-icon>
           </div>
         </ion-col>
       </ion-row>
diff --git a/src/app/merms-patient/merms-patient.page.html b/src/app/merms-patient/merms-patient.page.html
index 118f793..d8905bf 100644
--- a/src/app/merms-patient/merms-patient.page.html
+++ b/src/app/merms-patient/merms-patient.page.html
@@ -9,15 +9,38 @@
       </ion-row>
     </ion-grid>
     
-
+   
     
     <!-- Item Dividers in a List -->
     <ion-list>
 
-      <ion-item><ion-label>Search patient </ion-label></ion-item>
-      <ion-item><ion-label>Edit Profile</ion-label></ion-item>
-      <ion-item><ion-label>A4</ion-label></ion-item>
-      <ion-item><ion-label>Practice Time</ion-label></ion-item>
+      <ion-item><ion-label>Reason:{{reason}}</ion-label></ion-item>
+      <ion-item><ion-label>{{appt}} - {{gender}} [{{age}}]</ion-label></ion-item>
+      <ion-item>
+        <ion-grid>
+          <ion-row>
+            <ion-col>
+             
+              <ion-button expand="full" >Call ??</ion-button>
+              
+
+            </ion-col>
+            <ion-col>
+              <ion-button color="success" expand="full">Video ??</ion-button>
+
+            </ion-col>
+            <ion-col>
+              <ion-button expand="full" >Chat ??</ion-button>
+            </ion-col>
+          </ion-row>
+          </ion-grid>
+      </ion-item>
+      <ion-item>
+        <ion-label>Notes</ion-label>
+  <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
+
+
+      </ion-item>
     
       
     </ion-list>
diff --git a/src/app/merms-patient/merms-patient.page.ts b/src/app/merms-patient/merms-patient.page.ts
index 85c21a7..9f77a95 100644
--- a/src/app/merms-patient/merms-patient.page.ts
+++ b/src/app/merms-patient/merms-patient.page.ts
@@ -15,18 +15,38 @@ import {
 export class MermsPatientPage implements OnInit {
   patient_name: string = "Selected Patient";
   patientData: any;
+  reason: string;
+  patient_id : number = 0;
+  lastname : string ='';
+  firstname : string ='';
+  appt : string ='';
+  gender : string ='';
+  age : number =0;
+
   constructor(public navCtrl: NavController, private router: Router, private route: ActivatedRoute) {
     console.log('-----------------------------xxxx-----------------------------');
-    console.log(this.route.data);
+    console.log(this.router.getCurrentNavigation().extras.queryParams);
+    this.patientData = this.router.getCurrentNavigation().extras.queryParams;
 
-    this.route.queryParams.subscribe(params => {
-      console.log(params);
-      this.patient_name = params.firstname + ' ' + params.lastname;
-      if (params && params.special) {
-        this.patientData = JSON.parse(params.special);
-        console.log(this.patientData);
-      }
-    });
+    console.log(this.patientData.special);
+    var params = JSON.parse(this.patientData.special);
+    this.patient_name = params.firstname + ' ' + params.lastname;
+    this.reason = params.reason;
+
+    this.age = params.age;
+    this.gender = params.gender;
+    this.appt = params.appt;
+    this.patient_id = params.id;
+    this.firstname = params.firstname;
+    
+    // this.route.queryParams.subscribe(params => {
+    //   console.log(params);
+
+    //   if (params && params.special) {
+    //     this.patientData = JSON.parse(params.special);
+    //     console.log(this.patientData);
+    //   }
+    // });
 
   }