diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
index fef54b0c..b8bf36cd 100644
--- a/app/components/app/prescription-item/list-entry.vue
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list-entry.cfg'
 
 defineProps<{
-  data: any[]
+  data: PrescriptionItem[]
 }>()
+
+const emit = defineEmits<{
+  submit: [mode: string]
+}>()
+
 </script>
 
 <template>
-  <PubMyUiDataTable
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
     v-bind="config"
     :rows="data"
   />
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
index 1d7cca7e..34505bdf 100644
--- a/app/components/app/prescription/list.vue
+++ b/app/components/app/prescription/list.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import * as DE from '~/components/pub/my-ui/doc-entry';
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list-entry.vue';
 
 interface Props {
-  data: any[]
+  data: Prescription[]
   paginationMeta: PaginationMeta
 }
 defineProps<Props>()
-
 </script>
 
 <template>
-  {{ data.length }}
-  <div class="p-10 text-center">
+  <div v-if="data.length == 0" class="p-10 text-center">
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
     <div>
       <Button>
@@ -21,35 +21,36 @@ defineProps<Props>()
       </Button>
     </div>
   </div>
-  <Separator class="my-5" />
-  <div>
-    <DE.Block mode="preview" :colCount=3>
-      <DE.Cell>
-        <DE.Label>DPJP</DE.Label>
-        <DE.Field>
-            <Input />
-        </DE.Field>
-      </DE.Cell>
-      <DE.Cell />
-      <DE.Cell>
-        <DE.Label>Tgl Order</DE.Label>
-        <DE.Field>
-            <Input />
-        </DE.Field>
-      </DE.Cell>
-      <DE.Cell>
-        <DE.Label>DPJP</DE.Label>
-        <DE.Field>
-            <Input />
-        </DE.Field>
-      </DE.Cell>
-      <DE.Cell />
-      <DE.Cell>
-        <DE.Label>Status</DE.Label>
-        <DE.Field>
-            <Input />
-        </DE.Field>
-      </DE.Cell>
-    </DE.Block>
-  </div>
+  <template v-for="item in data">
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">Tgl Order</DE.Label>
+          <DE.Field>
+            {{ item.issuedAt }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">Status</DE.Label>
+          <DE.Field>
+            {{ item.status_code }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+    <PrescriptionItem :data="item.items || []" @click="console.log('click')" />
+    <Separator class="my-10" />
+  </template>
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 6fc620b5..2cd3852c 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -15,7 +15,7 @@ import Status from '~/components/app/encounter/status.vue'
 import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 // import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
-import PrescriptionList from '~/components/content/prescription/list.vue'
+import Prescription from '~/components/content/prescription/main.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 
@@ -48,7 +48,7 @@ const tabs: TabItem[] = [
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
   { value: 'device', label: 'Order Alkes' },
   { value: 'mcu-radiology', label: 'Order Radiologi' },
   { value: 'mcu-lab-pc', label: 'Order Lab PK' },
diff --git a/app/components/content/prescription/entry.vue b/app/components/content/prescription/entry.vue
new file mode 100644
index 00000000..6d76d685
--- /dev/null
+++ b/app/components/content/prescription/entry.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+
+import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Tambah Order Alkes',
+  icon: 'i-lucide-box',
+}
+
+  function navClick(type: 'cancel' | 'submit') {
+    if (type === 'cancel') {
+      backToList()
+    }
+  }
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <ItemListEntry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index abe4f541..92f6afeb 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,18 +1,10 @@
 <script setup lang="ts">
-// Components
-import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
-import List from '~/components/app/prescription/list-entry.vue'
 
-// Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
 
-// Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { PrescriptionSchema, type PrescriptionFormData } from '~/schemas/prescription.schema'
-import type { Unit } from '~/models/unit'
 
 // Handlers
 import {
@@ -20,23 +12,24 @@ import {
   recAction,
   recItem,
   isReadonly,
-  isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
   handleActionSave,
-  handleActionEdit,
-  handleActionRemove,
-  handleCancelForm,
 } from '~/handlers/prescription.handler'
 
 // Services
 import { getList, getDetail } from '~/services/prescription.service'
+import List from '~/components/app/prescription/list.vue'
+import type { Prescription } from '~/models/prescription'
 // import { getList as getUnitList } from '~/services/unit.service' // previously uses getList
 // import { getValueLabelList } from '~/services/unit.service'
 
+const props = defineProps<{
+  encounter_id: number
+}>()
+
 const route = useRoute()
 
-let units = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
 const plainEid = route.params.id
@@ -50,7 +43,7 @@ const {
   handlePageChange,
   handleSearch,
   fetchData: getMyList,
-} = usePaginatedList({
+} = usePaginatedList<Prescription>({
   fetchFn: async ({ page, search }) => {
     const result = await getList({
       search,
@@ -102,17 +95,6 @@ const getMyDetail = async (id: number | string) => {
   }
 }
 
-// const getUnits = async () => {
-//   const result = await getUnitList()
-//   if (result.success) {
-//     const currentMedicineGroups = result.body?.data || []
-//     units.value = currentMedicineGroups.map((item: Unit) => ({
-//       value: item.code,
-//       label: item.name,
-//     }))
-//   }
-// }
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -142,22 +124,11 @@ watch([isFormEntryDialogOpen], () => {
 })
 
 onMounted(async () => {
-  // await getMyList()
-  // units.value = await getValueLabelList()
 })
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" />
 
-  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
-
-  <AppPrescriptionEntry />
-
-  <PrescriptionItemListEntry :data=[] />
-  <div>
-    <Button>
-      Tambah
-    </Button>
-  </div>
+  <List v-if="!isLoading.dataListLoading" :data="data" :pagination-meta="paginationMeta" />
 </template>
diff --git a/app/components/content/prescription/main.vue b/app/components/content/prescription/main.vue
new file mode 100644
index 00000000..b2a17463
--- /dev/null
+++ b/app/components/content/prescription/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else />
+</template>