diff --git a/resources/js/pages/pages/patient-meetings/prescription.vue b/resources/js/pages/pages/patient-meetings/prescription.vue
index 583e861..4b1b867 100644
--- a/resources/js/pages/pages/patient-meetings/prescription.vue
+++ b/resources/js/pages/pages/patient-meetings/prescription.vue
@@ -73,132 +73,237 @@ const getStatusColor = (status) => {
             return 'grey'; // Use Vuetify's grey color for any other status
     }
 };
+const resolveStatusVariant = status => {
+  if (status === 1)
+    return {
+      color: 'primary',
+      text: 'Current',
+    }
+  else if (status === 2)
+    return {
+      color: 'success',
+      text: 'Professional',
+    }
+  else if (status === 3)
+    return {
+      color: 'error',
+      text: 'Rejected',
+    }
+  else if (status === 4)
+    return {
+      color: 'warning',
+      text: 'Resigned',
+    }
+  else
+    return {
+      color: 'info',
+      text: 'Applied',
+    }
+}
+const headers = [
+  {
+    title: '',
+    key: 'id',
+    sortable: false,
+  },
+  {
+    title: 'Name',
+    key: 'name',
+  },
+  {
+    title: 'Date',
+    key: 'date',
+  },
+  {
+    title: 'Status',
+    key: 'status',
+  },
+]
+const prescriptionIndex = ref([]);
+const prescriptionItem = ref(-1)
+const prescriptionDialog = ref(false)
+const showDetail = item => {
+    // console.log("id",item);
+  prescriptionIndex.value = item
+//   console.log("index",prescriptionIndex.value);
+//   prescriptionItem.value = { ...item }
+  prescriptionDialog.value = true
+}
+const close = () => {
+  prescriptionDialog.value = false
+  prescriptionIndex.value = -1
+  prescriptionItem.value = { ...defaultItem.value }
+}
 </script>
 <template>
-    <template v-if="itemsPrescriptions">
-        <VExpansionPanels variant="accordion" v-if="prescription">
-            <VExpansionPanel v-for="item in itemsPrescriptions" :key="item">
-                <VExpansionPanelTitle collapse-icon="ri-arrow-down-s-line" expand-icon="ri-arrow-right-s-line">
-                    <p class=""><b> {{ item.name }}</b>
-                        <br />
-                    <div class=" pt-2">#{{ appointmentId }} By {{ item.doctor }}</div>
-                    <div class=" pt-2">{{ item.date }}</div>
-                    </p>
+    <v-row>
+    <v-col cols="12" md="12" v-if="itemsPrescriptions">
+      <v-card title="Prescriptions" v-if="prescription">
+      <VCardText >
+          <VRow>
+            <VCol
+              cols="12"
+              offset-md="8"
+              md="4"
+            >
+              <VTextField
+                v-model="search"
+                label="Search"
+                placeholder="Search ..."
+                append-inner-icon="ri-search-line"
+                single-line
+                hide-details
+                dense
+                outlined
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+      <VDataTable
+        :headers="headers"
+        :items="itemsPrescriptions"
+        :search="search"
+        :items-per-page="5"
+        class="text-no-wrap"
+      >
+            <!-- <template #item.id="{ item }">
+            {{ item.id }}
+            </template> -->
+        <!-- full name -->
+        <!-- status -->
+        <template #item.status="{ item }">
+          <VChip
+            :color="getStatusColor(item.status)"
+            density="comfortable"
+          >
+            {{ getStatusColor(item.status) }}
+          </VChip>
+        </template>
 
-
-                    <v-row>
-
-                    </v-row>
-                    <span class="v-expansion-panel-title__icon badge text-warning"
-                        v-if="item.status == null">Pending</span>
-                    <span class="v-expansion-panel-title__icon badge" v-else>
-                        <v-chip :color="getStatusColor(item.status)" label size="small" variant="text">
-                            {{ item.status }}
-                        </v-chip></span>
-                </VExpansionPanelTitle>
-                <VExpansionPanelText class="pt-0">
-
-
-                    <v-row class='mt-1'>
+        <!-- Actions -->
+        <template #item.id="{ item }">
+          <div class="d-flex gap-1">
+            <IconBtn
+              size="small"
+              @click="showDetail(item)"
+            >
+              <VIcon icon="ri-time-line" />
+            </IconBtn>
+           
+          </div>
+        </template>
+      </VDataTable>
+      </v-card>
+    </v-col>
+  </v-row>
+    <VDialog
+    v-model="prescriptionDialog"
+    max-width="600px"
+  >
+    <VCard :title=prescriptionIndex.name>
+    <DialogCloseBtn
+        variant="text"
+        size="default"
+        @click="prescriptionDialog = false"
+      />
+      <VCardText>
+            <v-row class='mt-0'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Brand:</b></p>
+                            <p class='heading mb-0'><b>Brand:</b></p>
                         </v-col>
                         <v-col cols="12" md="4" sm="6">
-                            <p>{{ item.brand }}</p>
+                            <p>{{ prescriptionIndex.brand }}</p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>From:</b></p>
+                            <p class='heading mb-0'><b>From:</b></p>
                         </v-col>
                         <v-col cols="12" md="4" sm="6">
-                            <p>{{ item.from }}</p>
+                            <p>{{ prescriptionIndex.from }}</p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Dosage:</b></p>
+                            <p class='heading mb-0'><b>Dosage:</b></p>
                         </v-col>
                         <v-col cols="12" md="4" sm="6">
-                            <p>{{ item.dosage }}</p>
+                            <p>{{ prescriptionIndex.dosage }}</p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Quantity:</b></p>
+                            <p class='heading mb-0 '><b>Quantity:</b></p>
                         </v-col>
                         <v-col cols="12" md="4" sm="6">
-                            <p>{{ item.quantity }}</p>
+                            <p>{{ prescriptionIndex.quantity }}</p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Direction Quantity:</b></p>
+                            <p class='heading mb-0'><b>Direction Quantity:</b></p>
                         </v-col>
                         <v-col cols="12" md="8" sm="6">
-                            <p>{{ item.direction_quantity }}</p>
+                            <p>{{ prescriptionIndex.direction_quantity }}</p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Direction One:</b></p>
+                            <p class='heading mb-0'><b>Direction One:</b></p>
                         </v-col>
                         <v-col cols="12" md="8" sm="6">
-                            <p>{{ item.direction_one }} </p>
+                            <p>{{ prescriptionIndex.direction_one }} </p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Direction Two:</b></p>
+                            <p class='heading mb-0'><b>Direction Two:</b></p>
                         </v-col>
                         <v-col cols="12" md="8" sm="6">
-                            <p>{{ item.direction_two }} </p>
+                            <p>{{ prescriptionIndex.direction_two }} </p>
                         </v-col>
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Refill Quantity:</b></p>
+                            <p class='heading mb-0'><b>Refill Quantity:</b></p>
                         </v-col>
                         <v-col cols="12" md="8" sm="6">
-                            <p>{{ item.refill_quantity }}</p>
+                            <p>{{ prescriptionIndex.refill_quantity }}</p>
                         </v-col>
 
                     </v-row>
+                     <VDivider></VDivider>
                     <v-row class='mt-1'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Status:</b></p>
+                            <p class='heading mb-0'><b>Status:</b></p>
                         </v-col>
                         <v-col cols="12" md="8" sm="6">
-                            <p v-if="item.status == null" class="text-warning">Pending</p>
-                            <p v-else>{{ item.status }}</p>
+                            <p v-if="prescriptionIndex.status == null" class="text-warning">Pending</p>
+                            <p v-else>{{ prescriptionIndex.status }}</p>
                         </v-col>
                     </v-row>
-                    <v-row class='mt-1'>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1 pb-0'>
                         <v-col cols="12" md="4" sm="6">
-                            <p class='heading'><b>Comments:</b></p>
+                            <p class='heading mb-0'><b>Comments:</b></p>
                         </v-col>
                         <v-col cols="12" md="8" sm="8">
-                            <p>{{ item.comments }} </p>
+                            <p>{{ prescriptionIndex.comments }} </p>
                         </v-col>
 
                     </v-row>
-
-
-
-
-
-                </VExpansionPanelText>
-            </VExpansionPanel>
-        </VExpansionPanels>
-    </template>
-    <template v-else>
-        <VCard>
-            <VAlert border="start" color="#003152" variant="tonal">
-                <div class="text-center">No data found</div>
-            </VAlert>
-
-        </VCard>
-    </template>
+                    
+      </VCardText>
+    </VCard>
+    
+  </VDialog>
 </template>
 
 <style lang="scss">
diff --git a/resources/js/pages/patients/meetings.vue b/resources/js/pages/patients/meetings.vue
index 4e5e982..1611ab2 100644
--- a/resources/js/pages/patients/meetings.vue
+++ b/resources/js/pages/patients/meetings.vue
@@ -35,9 +35,9 @@ const refVForm = ref(null);
 
 // Headers
 const headers = [
-  { title: 'Appointment Id', key: 'id' },
+  // { title: 'Appointment Id', key: 'id' },
   { title: 'Patient', key: 'patient_name' },
-  { key: 'appointment_date', sortable: false, title: 'Date' },
+  // { key: 'appointment_date', sortable: false, title: 'Date' },
   { key: 'start_time', title: 'Start Time' },
   { key: 'end_time', title: 'End Time' },
   { key: 'duration', title: 'Duration' },
@@ -101,10 +101,27 @@ onMounted(async () => {
   
 });
 onUnmounted(() => {});
-const historyDetail = (item) => {
-    console.log('item', item)
+const historyDetail = (item, value) => {
+    console.log('item',item.id ,value)
+    if(value == 'notes')
     router.push('/admin/patient/meeting-details/' + route.params.id + '/' + item.id);
+    if(value == 'prescription')
+    router.push('/admin/patient/meeting/prescription/' + route.params.id + '/' + item.id);
 }
+const menusVariant = [
+  'primary'
+];
+const options = [
+  {
+    title: 'Notes',
+    key: 'notes',
+  },
+  {
+    title: 'Prescription',
+    key: 'prescription',
+  },
+  
+]
 </script>
 
 <template>
@@ -138,10 +155,36 @@ const historyDetail = (item) => {
           <template #item.duration="{ item }">{{ item.duration }}</template>
           <!-- Actions -->
           <template #item.actions="{ item }">
-            <div class="d-flex gap-1">
+          <div class="demo-space-x">
+          <VMenu
+            v-for="menu in menusVariant"
+            :key="menu"
+          >
+            <template #activator="{ props }">
+              <VBtn
+                :color="menu"
+                v-bind="props"
+                
+              >
+                Detail
+              </VBtn>
+            </template>
+
+            <v-list>
+            <v-list-item
+              v-for="opt in options"
+              :key="opt.value"
+              @click="historyDetail(item, opt.key)"
+            >
+              {{ opt.title }}
+            </v-list-item>
+          </v-list>
+          </VMenu>
+  </div>
+            <!-- <div class="d-flex gap-1">
               <VBtn class="text-capitalize text-white" @click="historyDetail(item)"> Detail
                             </VBtn>
-            </div>
+            </div> -->
           </template>
         </v-data-table>
       </v-card>  
diff --git a/resources/js/pages/patients/patients.vue b/resources/js/pages/patients/patients.vue
index ee3d1ea..0308476 100644
--- a/resources/js/pages/patients/patients.vue
+++ b/resources/js/pages/patients/patients.vue
@@ -72,10 +72,10 @@ const formatPhoneNumber = () => {
 };
 // headers
 const headers = [
-  {
-    title: 'ID',
-    key: 'id',
-  },
+  // {
+  //   title: 'ID',
+  //   key: 'id',
+  // },
   {
     title: 'NAME',
     key: 'name',
@@ -352,7 +352,7 @@ function changeFormat(dateFormat) {
          
             <VCol cols="12" sm="6" md="12">
               <VTextField
-                v-model="editedItem.dob"
+                v-model="editedItem.dob" type="date" 
                 label="Date Of Birth"
               />
             </VCol>
diff --git a/resources/js/plugins/1.router/additional-routes.js b/resources/js/plugins/1.router/additional-routes.js
index f515dc5..0ba0c0c 100644
--- a/resources/js/plugins/1.router/additional-routes.js
+++ b/resources/js/plugins/1.router/additional-routes.js
@@ -53,6 +53,11 @@ export const routes = [
     name: 'admin-patient-meeitng-details',
     component: () => import('@/pages/patients/meeting-details.vue'),
   },
+  {
+    path: '/admin/patient/meeting/prescription/:patient_id/:id',
+    name: 'admin-patient-meeitng-prescription',
+    component: () => import('@/pages/pages/patient-meetings/prescription.vue'),
+  },
   {
     path: '/admin/providers',
     name: 'admin-providers',