diff --git a/app/components/content/encounter/process-next.vue b/app/components/content/encounter/process-next.vue
index 22db3536..e3dffe98 100644
--- a/app/components/content/encounter/process-next.vue
+++ b/app/components/content/encounter/process-next.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 // Components
 import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
 import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
-import CompMenu from '~/components/pub/my-ui/comp-menu/comp-menu.vue'
+import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
 
 // Libraries
 import { getPositionAs } from '~/lib/roles'
@@ -59,8 +59,6 @@ if (activePosition.value === 'none') { // if user position is none, redirect to
   router.push('/')
 }
 
-console.log(JSON.stringify(user, null, 4))
-
 // Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
 const protocolRows = [
   {
@@ -116,13 +114,18 @@ async function getData() {
 }
 
 function getMenus() {
-  const currentListItems = listItems[`installation|${props.classCode}`];
+  const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
+  const currentListItems = listItems[`installation|${normalClassCode}`];
   if (!currentListItems) return []
   const unitCode = user?.unit?.code ? `unit|${user.unit.code}` : 'all';
-  const currentUnitItems = currentListItems[`${unitCode}`];
+  const currentUnitItems: any = currentListItems[`${unitCode}`];
   if (!currentUnitItems) return []
-  if (currentUnitItems.roles && currentUnitItems.roles?.some((role: string) => role !== activePosition.value)) return []
-  let menus = [...currentUnitItems.items]
+  let menus = []
+  if (currentUnitItems.roles && currentUnitItems.roles?.some((role: string) => role === activePosition.value)) {
+    menus = [...currentUnitItems.items]
+  } else {
+    menus = [...currentUnitItems]
+  }
   const indexStatus = getIndexById('status', menus)
   const indexEarlyMedicalAssessment = getIndexById('early-medical-assessment', menus)
   const indexRehabMedicalAssessment = getIndexById('rehab-medical-assessment', menus)
@@ -285,6 +288,6 @@ onMounted(async () => {
     </div>
     <EncounterPatientInfo v-if="isShowPatient" :data="data" />
     <EncounterHistoryButtonMenu v-if="isShowPatient" />
-    <CompMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
+    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
   </div>
 </template>
diff --git a/app/components/pub/my-ui/comp-menu/comp-menu.vue b/app/components/pub/my-ui/comp-menu/comp-menu.vue
index b02f2e78..fab41dde 100644
--- a/app/components/pub/my-ui/comp-menu/comp-menu.vue
+++ b/app/components/pub/my-ui/comp-menu/comp-menu.vue
@@ -43,4 +43,3 @@ function changeMenu(value: string) {
     </div>
   </div>
 </template>
-
diff --git a/app/components/pub/my-ui/menus/submenu.vue b/app/components/pub/my-ui/menus/submenu.vue
new file mode 100644
index 00000000..6875637f
--- /dev/null
+++ b/app/components/pub/my-ui/menus/submenu.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type EncounterItem } from "../../../../handlers/encounter-process.handler";
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: EncounterItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button v-for="menu in data" :key="menu.id" :data-active="activeMenu === menu.id"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.id)">
+          {{ menu.title }}
+        </button>
+      </div>
+    </div>
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.id === activeMenu)?.component"
+      class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component :is="data.find((m) => m.id === activeMenu)?.component"
+        v-bind="data.find((m) => m.id === activeMenu)?.props" />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/encounter/[id]/process.vue b/app/pages/(features)/emergency/encounter/[id]/process.vue
index 78d7ad9a..2e6e837c 100644
--- a/app/pages/(features)/emergency/encounter/[id]/process.vue
+++ b/app/pages/(features)/emergency/encounter/[id]/process.vue
@@ -2,6 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
@@ -35,7 +36,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterHome display="menu" class-code="emergency" sub-class-code="emg" />
+    <EncounterProcess class-code="emergency" sub-class-code="emg" />
   </div>
   <Error
     v-else
diff --git a/app/pages/(features)/inpatient/encounter/[id]/process.vue b/app/pages/(features)/inpatient/encounter/[id]/process.vue
index 15367e44..c40dd189 100644
--- a/app/pages/(features)/inpatient/encounter/[id]/process.vue
+++ b/app/pages/(features)/inpatient/encounter/[id]/process.vue
@@ -2,6 +2,7 @@
 import type { PagePermission } from '~/models/role'
 import Error from '~/components/pub/my-ui/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
 
 definePageMeta({
   middleware: ['rbac'],
@@ -35,7 +36,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterHome display="menu" class-code="inpatient" sub-class-code="vk" />
+    <EncounterProcess class-code="inpatient" sub-class-code="vk" />
   </div>
   <Error
     v-else
diff --git a/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue b/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue
new file mode 100644
index 00000000..0570c0f0
--- /dev/null
+++ b/app/pages/(features)/outpation-action/chemotherapy/[id]/process.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import EncounterProcess from '~/components/content/encounter/process-next.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <EncounterProcess class-code="outpatient" sub-class-code="chemo" />
+  </div>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>