diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
index 070dd65f..19b2f3d8 100644
--- a/app/components/app/prescription-item/list-entry.cfg.ts
+++ b/app/components/app/prescription-item/list-entry.cfg.ts
@@ -20,7 +20,7 @@ export const config: Config = {
     ],
   ],
 
-  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+  keys: ['medicine.name', 'medicine.medicineForm.name', 'frequency', 'dose', 'interval', 'total', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/prescription-item/mix-entry.vue b/app/components/app/prescription-item/mix-entry.vue
index d9b4881e..187e9569 100644
--- a/app/components/app/prescription-item/mix-entry.vue
+++ b/app/components/app/prescription-item/mix-entry.vue
@@ -1,29 +1,37 @@
 <script setup lang="ts">
-import { LucidePlus } from 'lucide-vue-next';
-
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import Separator from '~/components/pub/ui/separator/Separator.vue';
 import * as Table from '~/components/pub/ui/table'
 import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
-
+import * as CB from '~/components/pub/my-ui/combobox'
 
 import { genBase } from '~/models/_base';
-import { genMedicine } from '~/models/medicine';
+import { type Medicine, genMedicine } from '~/models/medicine';
 import type { MedicinemixItem } from '~/models/medicinemix-item';
 import type { PrescriptionItem } from '~/models/prescription-item';
 
 const props = defineProps<{
   data: PrescriptionItem
   items: MedicinemixItem[]
+  medicines: Medicine[]
 }>()
 
+const { medicines } = toRefs(props)
+const medicineItems = ref<CB.Item[]>([])
+const selectedMedicine_code = ref<string>(props.data.medicine?.code || '')
+
 type ClickType = 'close' | 'save'
 
 const emit = defineEmits<{
   close: [],
   save: [data: PrescriptionItem, items: MedicinemixItem[]],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -42,13 +50,19 @@ function addItem() {
     uom_code: '',
   })
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
 </script>
 
 <template>
-  <DE.Block :colCount="5" :cellFlex="false">
-    <DE.Cell :colSpan="5">
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
         <DE.Label>Nama</DE.Label>
-        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+        <DE.Field>
+          <Input :value="data.medicineMix?.name" />
+        </DE.Field>
     </DE.Cell>
     <DE.Cell>
         <DE.Label>Frequensi</DE.Label>
@@ -66,7 +80,7 @@ function addItem() {
         <DE.Label>Total</DE.Label>
         <DE.Field><Input /></DE.Field>
     </DE.Cell>
-    <DE.Cell :colSpan="5">
+    <DE.Cell :colSpan="4">
         <DE.Label>Cara Pakai</DE.Label>
         <DE.Field><Input /></DE.Field>
     </DE.Cell>
@@ -102,7 +116,7 @@ function addItem() {
   </Table.Table>
   <div>
     <Button @click="addItem">
-      <LucidePlus />
+      <Icon name="i-lucide-plus" class="me-2" />
       Tambah
     </Button>
   </div>
diff --git a/app/components/app/prescription-item/non-mix-entry.vue b/app/components/app/prescription-item/non-mix-entry.vue
index 25970646..9115eeb9 100644
--- a/app/components/app/prescription-item/non-mix-entry.vue
+++ b/app/components/app/prescription-item/non-mix-entry.vue
@@ -2,15 +2,26 @@
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import Separator from '~/components/pub/ui/separator/Separator.vue'
 import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+import * as CB from '~/components/pub/my-ui/combobox'
 
-import { bigTimeUnitCodes } from '~/lib/constants'
+// import { bigTimeUnitCodes } from '~/lib/constants'
 
+import { type Medicine, genMedicine } from '~/models/medicine';
 import type { PrescriptionItem } from '~/models/prescription-item'
 
 const props = defineProps<{
   data: PrescriptionItem
+  medicines: Medicine[]
 }>()
 
+const { medicines } = toRefs(props)
+const medicineItems = ref<CB.Item[]>([])
+const medicineForm = computed(() => {
+  const medicine = props.medicines.find(m => m.code === props.data.medicine_code)
+  return medicine ? medicine.medicineForm?.name : '--tidak diketahui--'
+})
+// const selectedMedicine_code = ref<string>(props.data.medicine_code || '')
+
 type ClickType = 'close' | 'save'
 type Item = {
   value: string
@@ -23,19 +34,23 @@ if(!props.data.intervalUnit_code) {
   props.data.intervalUnit_code = 'day'
 }
 
-Object.keys(bigTimeUnitCodes).forEach((key) => {
-  bigTimeUnitCodeItems.push({
-    value: key,
-    label: bigTimeUnitCodes[key] || '',
-  })
-})
-
+// Object.keys(bigTimeUnitCodes).forEach((key) => {
+//   bigTimeUnitCodeItems.push({
+//     value: key,
+//     label: bigTimeUnitCodes[key] || '',
+//   })
+// })
 
 const emit = defineEmits<{
   close: [],
   save: [data: PrescriptionItem],
+  'update:searchText': [value: string]
 }>()
 
+watch(medicines, (data) => {
+  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+})
+
 function navClick(type: ClickType) {
   if (type === 'close') {
     emit('close')
@@ -43,13 +58,23 @@ function navClick(type: ClickType) {
     emit('save', props.data)
   }
 }
+
+function searchMedicineText(value: string) {
+  emit('update:searchText', value)
+}
 </script>
 
 <template>
-  <DE.Block :colCount="5" :cellFlex="false">
-    <DE.Cell :colSpan="5">
-        <DE.Label>Nama</DE.Label>
-        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
+      <DE.Label>Nama</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          v-model="data.medicine_code"
+          :items="medicineItems"
+          @update:searchText="searchMedicineText"
+        />
+      </DE.Field>
     </DE.Cell>
     <DE.Cell>
       <DE.Label>Frequensi</DE.Label>
@@ -59,11 +84,7 @@ function navClick(type: ClickType) {
       <DE.Label>Dosis</DE.Label>
       <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
     </DE.Cell>
-    <DE.Cell>
-        <DE.Label>Sediaan</DE.Label>
-        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
-    </DE.Cell>
-    <DE.Cell>
+    <!-- <DE.Cell>
       <DE.Label>Interval</DE.Label>
       <DE.Field>
         <Select
@@ -71,14 +92,18 @@ function navClick(type: ClickType) {
           :items="bigTimeUnitCodeItems"
         />
       </DE.Field>
-    </DE.Cell>
+    </DE.Cell> -->
     <DE.Cell>
       <DE.Label>Total</DE.Label>
       <DE.Field>
-        <Input v-model="data.quantity" />
+        <Input type="number" v-model="data.quantity" />
       </DE.Field>
     </DE.Cell>
-    <DE.Cell :colSpan="5">
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="medicineForm" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="4">
         <DE.Label>Cara Pakai</DE.Label>
         <DE.Field><Input /></DE.Field>
     </DE.Cell>
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
index 4b3fa663..3ad9d572 100644
--- a/app/components/content/prescription/entry.vue
+++ b/app/components/content/prescription/entry.vue
@@ -6,20 +6,27 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
+// medicine
+import { type Medicine } from '~/models/medicine'
+
+// prescription
 import { getDetail } from '~/services/prescription.service'
+import { getList as getMedicineList } from '~/services/medicine.service'
 import Detail from '~/components/app/prescription/detail.vue'
-import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
-import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
-import { type PrescriptionItem } from '~/models/prescription-item'
-
-import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
-import { create } from '~/services/prescription-item.service';
-
-import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
 
+// prescription items
 import {
-  recItem,
-} from '~/handlers/prescription-item.handler'
+  getList as getPrescriptionItemList,
+  create as createPrescriptionItem,
+  remove as removePrescriptionItem,
+} from '~/services/prescription-item.service'
+import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+
+import { recItem } from '~/handlers/prescription-item.handler'
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
 
 // props
 const props = defineProps<{
@@ -27,7 +34,8 @@ const props = defineProps<{
 }>()
 
 // declaration & flows
-// const route = useRoute()
+
+// Prescription
 const { getQueryParam } = useQueryParam()
 const id = getQueryParam('id')
 const dataRes = await getDetail(
@@ -35,21 +43,15 @@ const dataRes = await getDetail(
   { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
 )
 const data = dataRes.body?.data || null
-const items = ref(data?.items || [])
 
-const {
-  data: prescriptionItems,
-  fetchData: getMyList,
-} = usePaginatedList<PrescriptionItem> ({
-  fetchFn: async ({ page, search }) => {
-    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
-    if (result.success) {
-      data.value = result.body.data
-    }
-    return { success: result.success || false, body: result.body || {} }
-  },
-  entityName: 'prescription-item',
-})
+// Prescription Items
+const items = ref<PrescriptionItem[]>([])
+const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
+const medicinemixItems = ref<MedicinemixItem[]>([])
+const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
+
+mixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
+nonMixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
 
 const { backToList } = useQueryCRUDMode()
 
@@ -60,6 +62,11 @@ const headerPrep: HeaderPrep = {
 
 const mixDialogOpen = ref(false)
 const nonMixDialogOpen = ref(false)
+const medicines = ref<Medicine[]>([])
+
+onMounted(async () => {
+  await getItems()
+})
 
 function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
   if (type === 'back') {
@@ -76,11 +83,29 @@ function addItem(mode: 'mix' | 'non-mix') {
 }
 
 function saveMix() {
-  create({data})
+  createPrescriptionItem(mixItem.value)
 }
 
-function saveNonMix(data: PrescriptionItem) {
-  create({data})
+function saveNonMix() {
+  createPrescriptionItem(nonMixItem.value)
+}
+
+async function getItems() {
+  const res = await getPrescriptionItemList({ 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' })
+  if (res.success) {
+      items.value = res.body.data
+  } else {
+    items.value = []
+  }
+}
+
+async function getMedicines(value: string) {
+  const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm' })
+  if (res.success) {
+    medicines.value = res.body.data
+  } else {
+    medicines.value = []
+  }
 }
 </script>
 
@@ -94,7 +119,7 @@ function saveNonMix(data: PrescriptionItem) {
   <Detail :data="data" />
 
   <ItemListEntry
-    :data="prescriptionItems"
+    :data="items"
     @add="addItem"/>
   <Separator class="my-5" />
 
@@ -105,28 +130,31 @@ function saveNonMix(data: PrescriptionItem) {
   <Dialog
     v-model:open="mixDialogOpen"
     :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
-    size="xl"
+    size="lg"
     prevent-outside
   >
     <MixItemEntry
-      :data="data"
-      :items="items"
+      :data="mixItem"
+      :items="medicinemixItems"
+      :medicines="medicines"
       @close="mixDialogOpen = false"
       @save="saveMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
 
   <Dialog
     v-model:open="nonMixDialogOpen"
     :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
-    size="xl"
+    size="lg"
     prevent-outside
   >
     <NonMixItemEntry
-      :data="data"
-      :items="items"
+      :data="nonMixItem"
+      :medicines="medicines"
       @close="mixDialogOpen = false"
       @save="saveNonMix"
+      @update:searchText="getMedicines"
     />
   </Dialog>
 </template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index 68e2069f..8d83f477 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -177,6 +177,16 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
     @confirm="() => handleActionRemove(recId, getMyList, toast)"
     @cancel=""
   >
+    <div class="flex">
+      <div class="w-40">Tanggal</div>
+      <div class="w-5 text-cneter">:</div>
+      <div class="">:</div>
+    </div>
+    <div class="flex">
+      <div class="w-40">Tanggal</div>
+      <div class="w-5 text-cneter">:</div>
+      <div class="">:</div>
+    </div>
   </RecordConfirmation>
 
   <RecordConfirmation
diff --git a/app/models/medicine.ts b/app/models/medicine.ts
index d3a04752..5aa01da4 100644
--- a/app/models/medicine.ts
+++ b/app/models/medicine.ts
@@ -1,10 +1,17 @@
+import type { MedicineFormData } from "~/schemas/medicine.schema"
 import { type Base, genBase } from "./_base"
+import type { MedicineGroup } from "./medicine-group"
+import type { MedicineMethod } from "./medicine-method"
 
 export interface Medicine extends Base {
   code: string
   name: string
-  medicineGroup_code: string
-  medicineMethod_code: string
+  medicineGroup_code?: string
+  medicineGroup?: MedicineGroup
+  medicineMethod_code?: string
+  medicineMethod?: MedicineMethod
+  medicineForm_code?: string
+  medicineForm?: MedicineFormData
   uom_code: string
   infra_id?: string | null
   stock: number
diff --git a/app/models/medicinemix-item.ts b/app/models/medicinemix-item.ts
index d2e1f973..9c055294 100644
--- a/app/models/medicinemix-item.ts
+++ b/app/models/medicinemix-item.ts
@@ -1,7 +1,7 @@
 import { type Base, genBase } from "./_base"
 import { type Medicine, genMedicine } from "./medicine";
 
-interface MedicinemixItem extends Base {
+export interface MedicinemixItem extends Base {
   id: number
   medicineMix_id: number
   medicine_id: number
@@ -35,7 +35,7 @@ export interface DeleteDto {
   id: number
 }
 
-export function MedicinemixItem(): MedicinemixItem {
+export function genMedicinemixItem(): MedicinemixItem {
   return {
     ...genBase(),
     medicineMix_id: 0,
diff --git a/app/models/prescription-item.ts b/app/models/prescription-item.ts
index 6f0d3716..3349fcbf 100644
--- a/app/models/prescription-item.ts
+++ b/app/models/prescription-item.ts
@@ -5,10 +5,10 @@ export interface PrescriptionItem {
   id: number;
   prescription_id: number;
   isMix: boolean;
-  medicine_id: number;
-  medicine: Medicine;
-  medicineMix_id: number;
-  medicineMix: Medicinemix
+  medicine_code?: string;
+  medicine?: Medicine;
+  medicineMix_id?: number;
+  medicineMix?: Medicinemix
   frequency: number;
   dose: number;
   interval: number;
@@ -29,35 +29,35 @@ export interface CreateDto {
   quantity: number;
   usage: string;
 }
- 
+
 export interface GetListDto {
   page: number
   size: number
   name?: string
 //   code?: string
 }
- 
+
 export interface GetDetailDto {
   id?: string
 }
- 
+
 export interface UpdateDto extends CreateDto {
   id?: number
 }
- 
+
 export interface DeleteDto {
   id?: string
 }
- 
-export function genPresciptionItem(): PrescriptionItem {
+
+export function genPrescriptionItem(): PrescriptionItem {
   return {
     id: 0,
     prescription_id: 0,
     isMix: false,
-    medicine_id: 0,
-    medicine: genMedicine(),
-    medicineMix_id: 0,
-    medicineMix: genMedicinemix(),
+    // medicine_code: '',
+    // medicine: genMedicine(),
+    // medicineMix_id: 0,
+    // medicineMix: genMedicinemix(),
     frequency: 0,
     dose: 0,
     interval: 0,
@@ -66,4 +66,3 @@ export function genPresciptionItem(): PrescriptionItem {
     usage: ''
   }
 }
- 
\ No newline at end of file