diff --git a/app/components/app/encounter/process.vue b/app/components/app/encounter/process.vue
deleted file mode 100644
index b90559f5..00000000
--- a/app/components/app/encounter/process.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import AssesmentFunctionList from './assesment-function/list.vue'
-import PrescriptionList from '~/components/content/prescription/list.vue'
-
-const props = defineProps<{
-  initialActiveTab: string
-}>()
-
-const activeTab = ref(props.initialActiveTab)
-const emit = defineEmits<{
-  changeTab: [value: string]
-}>()
-
-interface TabItem {
-  value: string
-  label: string
-  component?: any
-  props?: Record<string, any>
-}
-
-const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar' },
-  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis' },
-  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
-  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
-  { value: 'therapy-protocol', label: 'Protokol Terapi' },
-  { 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: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi' },
-  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
-  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
-  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
-  { value: 'medical-action', label: 'Order Ruang Tindakan' },
-  { value: 'mcu-result', label: 'Hasil Penunjang' },
-  { value: 'consultation', label: 'Konsultasi' },
-  { value: 'resume', label: 'Resume' },
-  { value: 'control', label: 'Surat Kontrol' },
-  { value: 'screening', label: 'Skrinning MPP' },
-  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
-]
-
-function changeTab(value: string) {
-  activeTab.value = value;
-  emit('changeTab', value);
-}
-</script>
-
-<template>
-  <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
-    <Button
-      v-for="tab in tabs"
-      :key="tab.value"
-      :data-active="activeTab === tab.value"
-      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
-      @click="changeTab(tab.value)"
-    >
-      {{ tab.label }}
-    </Button>
-  </div>
-
-  <!-- Active Tab Content -->
-  <div class="mt-4 rounded-md border p-4">
-    <component
-      v-if="tabs.find((t) => t.value === activeTab)?.component"
-      :is="tabs.find((t) => t.value === activeTab)?.component"
-      :label="tabs.find((t) => t.value === activeTab)?.label"
-      v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
-    />
-  </div>
-</template>
diff --git a/app/components/app/encounter/status.vue b/app/components/app/encounter/status.vue
new file mode 100644
index 00000000..e45c0a78
--- /dev/null
+++ b/app/components/app/encounter/status.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="p-10 text-center">Hello World!!!</div>
+</template>
\ No newline at end of file
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index e1f1d490..e045b656 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
+//
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+// Components
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+
+import Status from '~/components/app/encounter/status.vue'
+import AssesmentFunctionList from './assesment-function/list.vue'
+
 const route = useRoute()
 const router = useRouter()
 
@@ -25,6 +33,30 @@ const data = {
   noBilling: '223332',
   dpjp: 'dr. Syaifullah, Sp.OT(K)',
 }
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat' },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
 </script>
 
 <template>
@@ -33,6 +65,7 @@ const data = {
       <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
     <AppEncounterQuickInfo :data="data" />
-    <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <!-- <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" /> -->
   </div>
 </template>
diff --git a/app/components/pub/my-ui/comp-tab/comp-tab.vue b/app/components/pub/my-ui/comp-tab/comp-tab.vue
new file mode 100644
index 00000000..e60fd10d
--- /dev/null
+++ b/app/components/pub/my-ui/comp-tab/comp-tab.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type TabItem } from './type'
+
+const props = defineProps<{
+  initialActiveTab: string
+  data: TabItem[]
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+    <Button
+      v-for="tab in data"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="data.find((t) => t.value === activeTab)?.component"
+      :is="data.find((t) => t.value === activeTab)?.component"
+      :label="data.find((t) => t.value === activeTab)?.label"
+      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/comp-tab/type.ts b/app/components/pub/my-ui/comp-tab/type.ts
new file mode 100644
index 00000000..e6faacce
--- /dev/null
+++ b/app/components/pub/my-ui/comp-tab/type.ts
@@ -0,0 +1,6 @@
+export interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}