diff --git a/app/components/app/encounter/dropdown-action.vue b/app/components/app/encounter/dropdown-action.vue
index 67c29710..bd7a4974 100644
--- a/app/components/app/encounter/dropdown-action.vue
+++ b/app/components/app/encounter/dropdown-action.vue
@@ -29,7 +29,7 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-eye',
   },
   {
-    label: 'Edit',
+    label: 'Process',
     value: 'edit',
     onClick: () => {
       edit()
diff --git a/app/components/app/encounter/collapsible-patient-info.vue b/app/components/app/encounter/patient-info-collapsible.vue
similarity index 81%
rename from app/components/app/encounter/collapsible-patient-info.vue
rename to app/components/app/encounter/patient-info-collapsible.vue
index e74b33cd..924a8c2e 100644
--- a/app/components/app/encounter/collapsible-patient-info.vue
+++ b/app/components/app/encounter/patient-info-collapsible.vue
@@ -13,18 +13,14 @@ const props = defineProps<{
 
 <template>
   <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
-        <!-- Data Pasien -->    
-    <Accordion
-      type="single"
-      defaultValue="item-patient"
-      collapsible
-    >
+    <!-- Data Pasien -->
+    <Accordion type="single" defaultValue="item-patient" collapsible>
       <AccordionItem value="item-patient" class="border-none">
         <AccordionTrigger class="focus:outline-none focus:ring-0">
           <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
         </AccordionTrigger>
         <AccordionContent>
-          <EncounterQuickInfoFull :data="props.data" />
+          <EncounterQuickInfoFull :data="props.data" :is-grid="true" />
         </AccordionContent>
       </AccordionItem>
     </Accordion>
diff --git a/app/components/app/encounter/patient-info.vue b/app/components/app/encounter/patient-info.vue
new file mode 100644
index 00000000..ea41199e
--- /dev/null
+++ b/app/components/app/encounter/patient-info.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+    <EncounterQuickInfoFull :data="props.data" :is-grid="false" />
+  </div>
+</template>
diff --git a/app/components/app/encounter/quick-info-full.vue b/app/components/app/encounter/quick-info-full.vue
index 5b9e6872..9aaa84dd 100644
--- a/app/components/app/encounter/quick-info-full.vue
+++ b/app/components/app/encounter/quick-info-full.vue
@@ -3,6 +3,7 @@
 import { format, parseISO } from 'date-fns'
 import { id as localeID } from 'date-fns/locale'
 import { getAge } from '~/lib/date'
+import { cn } from "~/lib/utils"
 
 // Types
 import type { Encounter } from '~/models/encounter'
@@ -10,8 +11,11 @@ import { paymentTypes } from '~/lib/constants.vclaim'
 
 const props = defineProps<{
   data: Encounter
+  isGrid?: boolean
 }>()
 
+const isGrid = props.isGrid !== undefined ? props.isGrid : true
+
 // Address
 const address = computed(() => {
   if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
@@ -139,7 +143,7 @@ const bedNumber = computed(() => {
 
 <template>
   <!-- 4 Column Grid Layout -->
-  <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
+  <div :class="cn('grid grid-cols-1 gap-4', isGrid && 'sm:grid-cols-4')">
     <!-- No. RM -->
     <div class="flex gap-1">
       <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
diff --git a/app/components/content/encounter/detail.vue b/app/components/content/encounter/detail.vue
new file mode 100644
index 00000000..5f2255c5
--- /dev/null
+++ b/app/components/content/encounter/detail.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Components
+import EncounterPatientInfo from '~/components/app/encounter/patient-info.vue'
+
+// Models
+import { genEncounter } from '~/models/encounter'
+
+// Handlers
+import { getEncounterData } from '~/handlers/encounter-process.handler'
+
+const route = useRoute()
+const router = useRouter()
+
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const data = ref<any>(genEncounter())
+const isShowPatient = computed(() => data.value && data.value?.patient?.person)
+
+async function getData() {
+  data.value = await getEncounterData(id)
+}
+
+onMounted(async () => {
+  await getData()
+})
+
+function handleClick(type: string) {
+  if (type === 'draft') {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
+    </div>
+    <EncounterPatientInfo v-if="isShowPatient" :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index a80b23d3..571fad79 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -228,9 +228,9 @@ watch(
     
     if (props.type === 'encounter') {
       if (recAction.value === 'showDetail') {
-        navigateTo(`${basePath}/${recId.value}/process`)
+        navigateTo(`${basePath}/${recId.value}/detail`)
       } else if (recAction.value === 'showEdit') {
-        navigateTo(`${basePath}/${recId.value}/edit`)
+        navigateTo(`${basePath}/${recId.value}/process`)
       } else if (recAction.value === 'showPrint') {
         console.log('print')
       } else {
diff --git a/app/components/content/encounter/process-next.vue b/app/components/content/encounter/process-next.vue
index f8423233..913eb81b 100644
--- a/app/components/content/encounter/process-next.vue
+++ b/app/components/content/encounter/process-next.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 // Components
-import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
+import EncounterPatientInfo from '~/components/app/encounter/patient-info-collapsible.vue'
 import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
 import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
 
diff --git a/app/pages/(features)/emergency/encounter/[id]/detail.vue b/app/pages/(features)/emergency/encounter/[id]/detail.vue
new file mode 100644
index 00000000..77babf09
--- /dev/null
+++ b/app/pages/(features)/emergency/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/emergency'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/emergency/encounter'] || {}
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/inpatient/encounter/[id]/detail.vue b/app/pages/(features)/inpatient/encounter/[id]/detail.vue
new file mode 100644
index 00000000..45751701
--- /dev/null
+++ b/app/pages/(features)/inpatient/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/inpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/inpatient/encounter'] || {}
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/[id]/detail.vue b/app/pages/(features)/outpatient/encounter/[id]/detail.vue
new file mode 100644
index 00000000..534f49b3
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/detail.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/encounter/detail.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Detail Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+</script>
+
+<template>
+  <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>