diff --git a/app/components/app/doctor/entry-form.vue b/app/components/app/doctor/entry-form.vue
index bb638f94..2c7ecac2 100644
--- a/app/components/app/doctor/entry-form.vue
+++ b/app/components/app/doctor/entry-form.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Block from '~/components/pub/form/block.vue'
-import FieldGroup from '~/components/pub/form/field-group.vue'
-import Field from '~/components/pub/form/field.vue'
-import Label from '~/components/pub/form/label.vue'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
 
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue', 'event'])
@@ -110,7 +111,7 @@ function onClick(type: string) {
       </div>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCsd @click="onClick" />
+      <Action @click="onClick" />
     </div>
   </form>
 </template>
diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
index 977e7427..fcd73e98 100644
--- a/app/components/app/doctor/list-cfg.ts
+++ b/app/components/app/doctor/list-cfg.ts
@@ -1,11 +1,23 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
 export const cols: Col[] = [
   { width: 100 },
   { width: 250 },
@@ -32,6 +44,7 @@ export const header: Th[][] = [
     { label: 'Fee Ranap' },
     { label: 'Fee Rajal' },
     { label: 'Status' },
+    { label: '' },
   ],
 ]
 
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index 5768c6a0..a9ab8c6b 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Block from '~/components/pub/form/block.vue'
-import FieldGroup from '~/components/pub/form/field-group.vue'
-import Field from '~/components/pub/form/field.vue'
-import Label from '~/components/pub/form/label.vue'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
 </script>
 
 <template>
@@ -41,7 +42,7 @@ import Label from '~/components/pub/form/label.vue'
       </Block>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCsd />
+      <Action />
     </div>
   </form>
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index 63455faa..fd4d0317 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -1,9 +1,16 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const cols: Col[] = [
diff --git a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
index 0e1fe7f4..24cc80d1 100644
--- a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
+++ b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
@@ -1,9 +1,9 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
 export const cols: Col[] = [
   {},
diff --git a/app/components/app/satusehat/card-summary.vue b/app/components/app/satusehat/card-summary.vue
index a6bf2457..d0c142df 100644
--- a/app/components/app/satusehat/card-summary.vue
+++ b/app/components/app/satusehat/card-summary.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Summary } from '~/components/pub/base/summary-card.type';
+import type { Summary } from '~/components/pub/base/summary-card/type';
 
 const props = defineProps<{
   isLoading: boolean
diff --git a/app/components/app/satusehat/list-cfg.ts b/app/components/app/satusehat/list-cfg.ts
index 961422ea..d287a38b 100644
--- a/app/components/app/satusehat/list-cfg.ts
+++ b/app/components/app/satusehat/list-cfg.ts
@@ -15,7 +15,6 @@ export const rowStatus = {
   2: 'Terkirim',
 }
 
-const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
 const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
 const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
 
diff --git a/app/components/flow/doctor/list.vue b/app/components/flow/doctor/list.vue
index 8615a5a1..03cdff79 100644
--- a/app/components/flow/doctor/list.vue
+++ b/app/components/flow/doctor/list.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type';
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 
@@ -15,8 +17,8 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-const isLoading = reactive({
-  dataListLoading: false,
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
 })
 
 const recId = ref<number>(0)
@@ -51,10 +53,10 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
-provide('pull_data', isLoading)
+provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
   <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 4eee1912..6f6c0822 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import type { Summary } from '~/components/pub/base/summary-card.type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type';
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 
@@ -18,9 +21,9 @@ const refSearchNav: RefSearchNav = {
 }
 
 // Loading state management
-const isLoading = reactive({
+const isLoading = reactive<DataTableLoader>({
   summary: false,
-  dataListLoading: false,
+  isTableLoading: false,
 })
 
 const recId = ref<number>(0)
@@ -83,13 +86,12 @@ async function getPatientSummary() {
 }
 
 async function getPatientList() {
-  isLoading.dataListLoading = true
+  isLoading.isTableLoading = true
   const resp = await xfetch('/api/v1/patient')
-  console.log('data patient', resp)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
-  isLoading.dataListLoading = false
+  isLoading.isTableLoading = false
 }
 
 onMounted(() => {
@@ -100,18 +102,18 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
-provide('pull_data', isLoading)
+provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="isLoading.summary">
-        <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
+        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
       </template>
       <template v-else>
-        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </template>
     </div>
     <AppPatientList :data="data" />
diff --git a/app/components/flow/rehab/registration/sep-prosedur/list.vue b/app/components/flow/rehab/registration/sep-prosedur/list.vue
index fa4c029e..371395b4 100644
--- a/app/components/flow/rehab/registration/sep-prosedur/list.vue
+++ b/app/components/flow/rehab/registration/sep-prosedur/list.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type';
 import RehabSepProsedurList from '~/components/app/rehab/registration/sep-prosedur/list.vue'
 
 const props = defineProps<{
@@ -21,9 +22,9 @@ const refSearchNav: RefSearchNav = {
 }
 
 // Loading state management
-const isLoading = reactive({
-  summary: false,
-  table: false,
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+
 })
 const recId = ref<number>(0)
 const recAction = ref<string>('')
@@ -40,7 +41,6 @@ const hreaderPrep: HeaderPrep = {
 
 async function getPatientList() {
   const resp = await xfetch('/api/v1/patient')
-  console.log('data patient', resp)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -53,12 +53,12 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <RehabSepProsedurList :data="data" />
   </div>
 </template>
-/template>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index a35aecc1..65327fac 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import type { ServiceStatus } from '~/components/pub/base/service-status.type'
-import type { Summary } from '~/components/pub/base/summary-card.type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type';
+import type { ServiceStatus } from '~/components/pub/base/service-status/type'
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import { useUrlSearchParams } from '@vueuse/core'
 import { CircleCheckBig, CircleDashed, CircleX, Ellipsis, Search, Send } from 'lucide-vue-next'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue';
 
 // State management
 const data = ref([])
-const isLoading = reactive({
+const isLoading = reactive<DataTableLoader>({
   satusehatConn: true,
-  dataListLoading: false,
+  isTableLoading: false,
 })
 
 const params = useUrlSearchParams('history', {
@@ -38,7 +40,7 @@ const pagination = ref({
 // API function to fetch data
 async function fetchData() {
   try {
-    isLoading.dataListLoading = true
+    isLoading.isTableLoading = true
     const response: any = await $fetch('/api/v1/satusehat/list', {
       method: 'POST',
       body: {
@@ -59,7 +61,7 @@ async function fetchData() {
   } catch (error) {
     console.error('Error fetching data:', error)
   } finally {
-    isLoading.dataListLoading = false
+    isLoading.isTableLoading = false
   }
 }
 
@@ -161,7 +163,7 @@ onMounted(async () => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
-provide('pull_data', isLoading)
+provide('table_data_loader', isLoading)
 
 const tabs = [
   {
@@ -206,10 +208,10 @@ const activeTabFilter = computed({
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="headerPrep" />
+  <Header :prep="headerPrep" />
   <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
     <PubBaseServiceStatus v-bind="service" />
-    <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn" :summary-data="summaryData" />
+    <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
   </div>
   <div class="rounded-md border p-4">
     <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
@@ -298,11 +300,11 @@ const activeTabFilter = computed({
         <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
           <div class="rounded-md border p-4">
             <!-- <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" -->
-              <!-- class="size-6 animate-pulse text-muted-foreground mx-auto" /> -->
+            <!-- class="size-6 animate-pulse text-muted-foreground mx-auto" /> -->
             <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
 
             <!-- Pagination -->
-            <div v-if="!isLoading.satusehatConn && !isLoading.dataListLoading && pagination.total > 0"
+            <div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
               class="mt-4 flex justify-between items-center">
               <div class="text-sm text-muted-foreground">
                 Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table/data-table.vue
similarity index 92%
rename from app/components/pub/base/data-table.vue
rename to app/components/pub/base/data-table/data-table.vue
index 3e76bbb8..73a4bb6d 100644
--- a/app/components/pub/base/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
-
+import type { DataTableLoader } from './type'
 defineProps<{
   rows: unknown[]
   cols: any[]
@@ -11,7 +11,7 @@ defineProps<{
   funcComponent: Record<string, (row: any, idx: number) => any>
 }>()
 
-const pullData = inject('pull_data') as any
+const loader = inject('table_data_loader') as DataTableLoader
 </script>
 
 <template>
@@ -25,7 +25,7 @@ const pullData = inject('pull_data') as any
       </TableRow>
     </TableHeader>
 
-    <TableBody v-if="pullData.dataListLoading">
+    <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in 5" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
diff --git a/app/components/pub/base/data-table/type.ts b/app/components/pub/base/data-table/type.ts
new file mode 100644
index 00000000..019bb037
--- /dev/null
+++ b/app/components/pub/base/data-table/type.ts
@@ -0,0 +1,4 @@
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}
diff --git a/app/components/pub/base/error.vue b/app/components/pub/base/error/error.vue
similarity index 100%
rename from app/components/pub/base/error.vue
rename to app/components/pub/base/error/error.vue
diff --git a/app/components/pub/base/service-status.vue b/app/components/pub/base/service-status/service-status.vue
similarity index 97%
rename from app/components/pub/base/service-status.vue
rename to app/components/pub/base/service-status/service-status.vue
index b9cf71eb..3ba2736f 100644
--- a/app/components/pub/base/service-status.vue
+++ b/app/components/pub/base/service-status/service-status.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ServiceStatus } from './service-status.type'
+import type { ServiceStatus } from './type'
 import { Loader, Loader2 } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 
diff --git a/app/components/pub/base/service-status.type.ts b/app/components/pub/base/service-status/type.ts
similarity index 100%
rename from app/components/pub/base/service-status.type.ts
rename to app/components/pub/base/service-status/type.ts
diff --git a/app/components/pub/base/summary-card.vue b/app/components/pub/base/summary-card/summary-card.vue
similarity index 97%
rename from app/components/pub/base/summary-card.vue
rename to app/components/pub/base/summary-card/summary-card.vue
index f10f8c2d..35a5b17f 100644
--- a/app/components/pub/base/summary-card.vue
+++ b/app/components/pub/base/summary-card/summary-card.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Summary } from './summary-card.type'
+import type { Summary } from './type'
 import { ChevronDown, ChevronUp } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 
diff --git a/app/components/pub/base/summary-card.type.ts b/app/components/pub/base/summary-card/type.ts
similarity index 100%
rename from app/components/pub/base/summary-card.type.ts
rename to app/components/pub/base/summary-card/type.ts
diff --git a/app/components/pub/custom-ui/confirmation/confirmation.vue b/app/components/pub/custom-ui/confirmation/confirmation.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/pub/custom-ui/confirmation/record-confirmation.vue b/app/components/pub/custom-ui/confirmation/record-confirmation.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/pub/nav/dropdown-action-du.vue b/app/components/pub/custom-ui/data/dropdown-action-du.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-du.vue
rename to app/components/pub/custom-ui/data/dropdown-action-du.vue
diff --git a/app/components/pub/nav/dropdown-action-ducd.vue b/app/components/pub/custom-ui/data/dropdown-action-ducd.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-ducd.vue
rename to app/components/pub/custom-ui/data/dropdown-action-ducd.vue
diff --git a/app/components/pub/nav/dropdown-action-dud.vue b/app/components/pub/custom-ui/data/dropdown-action-dud.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-dud.vue
rename to app/components/pub/custom-ui/data/dropdown-action-dud.vue
diff --git a/app/components/pub/nav/dropdown-action-ud.vue b/app/components/pub/custom-ui/data/dropdown-action-ud.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-ud.vue
rename to app/components/pub/custom-ui/data/dropdown-action-ud.vue
diff --git a/app/components/pub/nav/types.ts b/app/components/pub/custom-ui/data/types.ts
similarity index 100%
rename from app/components/pub/nav/types.ts
rename to app/components/pub/custom-ui/data/types.ts
diff --git a/app/components/pub/form/block.vue b/app/components/pub/custom-ui/form/block.vue
similarity index 100%
rename from app/components/pub/form/block.vue
rename to app/components/pub/custom-ui/form/block.vue
diff --git a/app/components/pub/form/field-group.vue b/app/components/pub/custom-ui/form/field-group.vue
similarity index 100%
rename from app/components/pub/form/field-group.vue
rename to app/components/pub/custom-ui/form/field-group.vue
diff --git a/app/components/pub/form/field.vue b/app/components/pub/custom-ui/form/field.vue
similarity index 100%
rename from app/components/pub/form/field.vue
rename to app/components/pub/custom-ui/form/field.vue
diff --git a/app/components/pub/form/label.vue b/app/components/pub/custom-ui/form/label.vue
similarity index 100%
rename from app/components/pub/form/label.vue
rename to app/components/pub/custom-ui/form/label.vue
diff --git a/app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue b/app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue
new file mode 100644
index 00000000..5e6f69ab
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Draf
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Submit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/nav/footer/csd.vue b/app/components/pub/custom-ui/nav-footer/ba-dr-su.vue
similarity index 95%
rename from app/components/pub/nav/footer/csd.vue
rename to app/components/pub/custom-ui/nav-footer/ba-dr-su.vue
index 497081e3..17dbd6dc 100644
--- a/app/components/pub/nav/footer/csd.vue
+++ b/app/components/pub/custom-ui/nav-footer/ba-dr-su.vue
@@ -14,15 +14,15 @@ function onClick(type: ClickType) {
   <div class="m-2 flex gap-2 px-2">
     <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
       <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Kembali
+      Back
     </Button>
     <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
       <Icon name="i-lucide-file" class="me-2" />
-      Draf
+      Draft
     </Button>
     <Button class="bg-primary" type="button" @click="onClick('submit')">
       <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Selesai
+      Submit
     </Button>
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue b/app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue
new file mode 100644
index 00000000..18e67b86
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed-de.vue b/app/components/pub/custom-ui/nav-footer/ba-ed-de.vue
new file mode 100644
index 00000000..9c79eba9
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed-de.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue b/app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue
new file mode 100644
index 00000000..5190ec04
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed.vue b/app/components/pub/custom-ui/nav-footer/ba-ed.vue
new file mode 100644
index 00000000..e81ce917
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2 align-middle" />
+      Edit
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/nav/footer/cs.vue b/app/components/pub/custom-ui/nav-footer/ba-su.vue
similarity index 95%
rename from app/components/pub/nav/footer/cs.vue
rename to app/components/pub/custom-ui/nav-footer/ba-su.vue
index d51bf74a..79e18d57 100644
--- a/app/components/pub/nav/footer/cs.vue
+++ b/app/components/pub/custom-ui/nav-footer/ba-su.vue
@@ -14,11 +14,11 @@ function onClick(type: ClickType) {
   <div class="m-2 flex gap-2 px-2">
     <Button class="bg-gray-400" @click="onClick('cancel')">
       <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Kembali
+      Back
     </Button>
     <Button class="bg-primary" @click="onClick('submit')">
       <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Selesai
+      Submit
     </Button>
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/nav-header/header.vue b/app/components/pub/custom-ui/nav-header/header.vue
new file mode 100644
index 00000000..10f06af2
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-header/header.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-bold text-gray-900">
+        <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+        {{ prep.title }}
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/custom-ui/nav-header/prep.vue
similarity index 100%
rename from app/components/pub/nav/header/prep.vue
rename to app/components/pub/custom-ui/nav-header/prep.vue
diff --git a/app/components/pub/custom-ui/nav-header/search.vue b/app/components/pub/custom-ui/nav-header/search.vue
new file mode 100644
index 00000000..dba29318
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-header/search.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg text-gray-900">
+        <Input
+          type="text"
+          placeholder="Search"
+          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+          @click="emitSearchNavClick"
+          @input="onInput"
+        />
+      </div>
+      <div v-if="prep.addNav" class="m-2 flex items-center">
+        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.addNav.label }}
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/nav/data-table.vue b/app/components/pub/nav/data-table.vue
deleted file mode 100644
index 983559b8..00000000
--- a/app/components/pub/nav/data-table.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
-
-defineProps<{
-  rows: unknown[]
-  cols: object
-  header: object[]
-  keys: string[]
-  funcParsed: object
-  funcHtml: object
-  funcComponent: object
-}>()
-</script>
-
-<template>
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead
-          v-for="(h, idx) in header[0]"
-          :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
-        >
-          {{ h.label }}
-        </TableHead>
-      </TableRow>
-    </TableHeader>
-
-    <TableBody>
-      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
-          <!-- If funcComponent has a renderer -->
-          <component
-            :is="funcComponent[key](row, rowIndex).component"
-            v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-          />
-          <!-- If funcParsed or funcHtml returns a value -->
-          <template v-else>
-            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
-          </template>
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</template>
diff --git a/app/pages/(features)/doctor/add.vue b/app/pages/(features)/doctor/add.vue
index 3f23c8a5..987baa28 100644
--- a/app/pages/(features)/doctor/add.vue
+++ b/app/pages/(features)/doctor/add.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -36,5 +37,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowDoctorAdd />
   </div>
-  <PubBaseError v-else :status-code="403" />
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/doctor/index.vue b/app/pages/(features)/doctor/index.vue
index 19c48dde..e75a5b89 100644
--- a/app/pages/(features)/doctor/index.vue
+++ b/app/pages/(features)/doctor/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -34,6 +35,6 @@ const canRead = hasReadAccess(roleAccess)
     <div v-if="canRead">
       <FlowDoctorList />
     </div>
-    <PubBaseError v-else :status-code="403" />
+    <Error v-else :status-code="403" />
   </div>
 </template>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index ec540c08..813e418b 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/app/pages/(features)/patient/add.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -36,5 +37,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowPatientAdd />
   </div>
-  <PubBaseError v-else :status-code="403" />
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index 546fedfb..71d07e43 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/patient/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 
 definePageMeta({
@@ -34,6 +35,6 @@ const canRead = hasReadAccess(roleAccess)
     <div v-if="canRead">
       <FlowPatientList />
     </div>
-    <PubBaseError v-else :status-code="403" />
+    <Error v-else :status-code="403" />
   </div>
 </template>