diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index 76f32415..31763220 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -9,6 +9,8 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
 
 const props = defineProps<{
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
   type: string
 }>()
 
@@ -27,7 +29,20 @@ const hreaderPrep: HeaderPrep = {
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/rehab/encounter/add'),
+    onClick: () => {
+      if (props.classCode === 'ambulatory' && props.subClassCode === 'rehab') {
+        navigateTo('/rehab/encounter/add')
+      }
+      if (props.classCode === 'emergency') {
+        navigateTo('/emergency/encounter/add')
+      }
+      if (props.classCode === 'outpatient') {
+        navigateTo('/outpatient/encounter/add')
+      }
+      if (props.classCode === 'inpatient') {
+        navigateTo('/inpatient/encounter/add')
+      }
+    },
   },
 }
 
diff --git a/app/pages/(features)/emergency/encounter/index.vue b/app/pages/(features)/emergency/encounter/index.vue
index 50485cec..f849062e 100644
--- a/app/pages/(features)/emergency/encounter/index.vue
+++ b/app/pages/(features)/emergency/encounter/index.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/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)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="emergency"
+        sub-class-code="emg"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
index 50485cec..55f256f9 100644
--- a/app/pages/(features)/inpatient/encounter/index.vue
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/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)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="inpatient"
+        sub-class-code="vk"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/outpatient/encounter/index.vue b/app/pages/(features)/outpatient/encounter/index.vue
index 50485cec..ad0badfa 100644
--- a/app/pages/(features)/outpatient/encounter/index.vue
+++ b/app/pages/(features)/outpatient/encounter/index.vue
@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/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)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="outpatient"
+        sub-class-code="reg"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index 7a8564a8..6bbec942 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -33,8 +33,15 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList type="encounter" />
+      <ContentEncounterList
+        class-code="ambulatory"
+        sub-class-code="rehab"
+        type="encounter"
+      />
     </div>
-    <Error v-else :status-code="403" />
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>