diff --git a/app/components/app/auth/SignIn.vue b/app/components/app/auth/sign-in.vue
similarity index 100%
rename from app/components/app/auth/SignIn.vue
rename to app/components/app/auth/sign-in.vue
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
new file mode 100644
index 00000000..89d8b1bf
--- /dev/null
+++ b/app/components/app/patient/entry-form.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>entry form</div>
+
+  <div>
+    <PubNavFooterCs />
+  </div>
+</template>
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/patient/picker.vue b/app/components/app/patient/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/patient/search.vue b/app/components/app/patient/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/flow/patient/add.vue b/app/components/flow/patient/add.vue
new file mode 100644
index 00000000..fd48eeba
--- /dev/null
+++ b/app/components/flow/patient/add.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <AppPatientEntryForm />
+</template>
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
new file mode 100644
index 00000000..2f34f96d
--- /dev/null
+++ b/app/components/flow/patient/list.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const refSearchNav = {
+  onClick: () => {
+    console.log('onClick dari parent')
+  },
+  onInput: (val: string) => {
+    console.log('>>>', val)
+  },
+  onClear: () => {
+    // refresh page
+  },
+}
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Pasien',
+  icon: 'bi bi-journal-check',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (window.location.pathname = '/emergency/patient/add'),
+  },
+}
+</script>
+
+<template>
+  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" icon="i-lucide-add" />
+</template>
diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index a5ac61fd..70a45eb9 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -9,9 +9,9 @@ const navMenu: any[] = [
         link: '/',
       },
       {
-        title: 'Home',
+        title: 'Pasien',
         icon: 'i-lucide-home',
-        link: '/',
+        link: '/patient',
       },
     ],
   },
diff --git a/app/components/pub/nav/footer/cs.vue b/app/components/pub/nav/footer/cs.vue
new file mode 100644
index 00000000..96725a05
--- /dev/null
+++ b/app/components/pub/nav/footer/cs.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex justify-between">
+    <div>
+      <Button variant="outline" size="sm">
+        <Icon name="i-lucide-pencil" class="mr-1" />
+        Edit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/nav/header/prep.vue
new file mode 100644
index 00000000..6f10cf97
--- /dev/null
+++ b/app/components/pub/nav/header/prep.vue
@@ -0,0 +1,39 @@
+<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)
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <div class="ml-3 text-lg font-bold text-gray-900">
+          {{ prep.title }}
+        </div>
+      </div>
+      <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 border-gray-300 bg-white px-4 py-2 text-gray-900 sm:text-sm"
+            @click="emitSearchNavClick"
+            @input="onInput"
+          />
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/nav/types.ts b/app/components/pub/nav/types.ts
new file mode 100644
index 00000000..91b53410
--- /dev/null
+++ b/app/components/pub/nav/types.ts
@@ -0,0 +1,84 @@
+import type { ComponentType } from '@unovis/ts'
+
+export interface ListItemDto {
+  id: number
+  name: string
+  code: string
+}
+
+export interface RecComponent {
+  idx?: number
+  rec: object
+  props?: any
+  component: ComponentType
+}
+
+export interface Col {
+  span?: number
+  classVal?: string
+  style?: string
+  width?: number // specific for width
+  widthUnit?: string // specific for width
+}
+
+export interface Th {
+  label: string
+  colSpan?: number
+  rowSpan?: number
+  classVal?: string
+  childClassVal?: string
+  style?: string
+  childStyle?: string
+  hideOnSm?: boolean
+}
+
+export interface ButtonNav {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'negative' | 'ghost' | 'link'
+  classVal?: string
+  classValExt?: string
+  icon?: string
+  label: string
+  onClick?: () => void
+}
+
+export interface QuickSearchNav {
+  inputClass?: string
+  inputPlaceHolder?: string
+  btnClass?: string
+  btnIcon?: string
+  btnLabel?: string
+  mainField?: string
+  searchParams: object
+  onSubmit?: (searchParams: object) => void
+}
+
+export interface RefSearchNav {
+  onInput: (val: string) => void
+  onClick: () => void
+  onClear: () => void
+}
+
+// prepared header for relatively common usage
+export interface HeaderPrep {
+  title?: string
+  icon?: string
+  refSearchNav?: RefSearchNav
+  quickSearchNav?: QuickSearchNav
+  filterNav?: ButtonNav
+  addNav?: ButtonNav
+  printNav?: ButtonNav
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
+export type FuncComponent = (rec: unknown, idx: number) => RecComponent
+export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
+export type RecStrFuncComponent = Record<string, FuncComponent>
+
+export interface KeyNames {
+  key: string
+  label: string
+}
diff --git a/app/pages/(features)/patient/[id]/detail.vue b/app/pages/(features)/patient/[id]/detail.vue
new file mode 100644
index 00000000..e01c4948
--- /dev/null
+++ b/app/pages/(features)/patient/[id]/detail.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>detail pasien</div>
+</template>
diff --git a/app/pages/(features)/patient/[id]/edit.vue b/app/pages/(features)/patient/[id]/edit.vue
new file mode 100644
index 00000000..84e4fac5
--- /dev/null
+++ b/app/pages/(features)/patient/[id]/edit.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>edit pasien</div>
+</template>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
new file mode 100644
index 00000000..56dd4be8
--- /dev/null
+++ b/app/pages/(features)/patient/add.vue
@@ -0,0 +1,3 @@
+<template>
+  <FlowPatientAdd />
+</template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
new file mode 100644
index 00000000..e17b61a7
--- /dev/null
+++ b/app/pages/(features)/patient/index.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <FlowPatientList />
+  </div>
+</template>