diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
index 3b4acf28..ef8756e8 100644
--- a/app/components/app/prescription/entry.vue
+++ b/app/components/app/prescription/entry.vue
@@ -1,32 +1,36 @@
 <template>
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div class="md:pe-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
+    <div class="md:ps-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
   </div>
 </template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index b3cd7d25..ad260ad0 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -1,10 +1,32 @@
 <script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import ListEntry from '~/components/app/prescription/list-entry.vue'
 import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'
 
-const data = ref([])
+import { prescriptionSvc } from '~/services/prescription.service'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import MixEntry from '~/components/app/prescription-item/mix-entry.vue'
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await prescriptionSvc.getList({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine',
+})
+
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -18,10 +40,6 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -40,6 +58,11 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+let loading = ref(false);
+let itemEntryDialogShown = ref(false);
+let itemMixEntryDialogShown = ref(false);
+let title = '';
+
 onMounted(() => {
   getMaterialList()
 })
@@ -54,16 +77,26 @@ async function getMaterialList() {
 
   isLoading.dataListLoading = false
 }
+
+function addMedicine() {
+  itemEntryDialogShown.value = true;
+}
+
+function addMedicineMix() {
+  itemMixEntryDialogShown.value = true;
+}
+
 </script>
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
-  <AppPrescriptionEntry />
-  <PrescriptionItemListEntry :data=[] />
-  <div>
-    <Button>
-      Tambah
-    </Button>
-  </div>
+  <ListEntry v-if="!isLoading.dataListLoading" :data="[]" :isLoading="isLoading" :paginatin="{}" />
+
+  <Dialog v-model:open="itemEntryDialogShown" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
+  </Dialog>
+
+  <Dialog v-model:open="itemMixEntryDialogShown" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
+    <MixEntry />
+  </Dialog>  
+
 </template>