diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 0cae3161..676c893c 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const refSearchNav = {
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import { Calendar, ChevronDown, ChevronUp, Hospital, UserRoundCheck, UsersRound } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
@@ -13,7 +17,7 @@ const refSearchNav = {
 
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
-  icon: 'bi bi-journal-check',
+  icon: 'i-lucide-add',
   addNav: {
     label: 'Tambah',
     onClick: () => navigateTo('/patient/add'),
@@ -22,15 +26,90 @@ const hreaderPrep: HeaderPrep = {
 
 // NOTE: example api
 async function getPatientList() {
-  const { data } = await xfetch('/api/v1/patient')
-  console.log('data patient', data)
+  // const response = await xfetch('/api/v1/patient')
+  // console.log('data patient', response)
 }
 
 onMounted(() => {
   getPatientList()
 })
+
+// const patients = [
+//   {
+//     noRM: 'RM001',
+//     nama: 'Siti Nurhaliza',
+//     umur: 34,
+//     jenisKelamin: 'Perempuan',
+//     kontak: '081234567890',
+//     kunjunganTerakhir: '2025-08-01',
+//     status: 'active',
+//     bpjs: true,
+//   },
+// ]
+
+const summaryCard = computed(() => {
+  return [
+    {
+      title: 'Total Pasien',
+      icon: UsersRound,
+      value: 234,
+      change: 12.5,
+      isPositive: true,
+      period: 'from last month',
+    },
+    {
+      title: 'Pasien Aktif',
+      icon: UserRoundCheck,
+      value: 1340,
+      change: 8.3,
+      isPositive: true,
+      period: 'from last week',
+    },
+    {
+      title: 'Kunjungan Hari Ini',
+      icon: Calendar,
+      value: 200,
+      change: 5.2,
+      isPositive: false,
+      period: 'from yesterday',
+    },
+    {
+      title: 'Peserta BPJS',
+      icon: Hospital,
+      value: 10223,
+      change: 15.7,
+      isPositive: true,
+      period: 'from last month',
+    },
+  ]
+})
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" icon="i-lucide-add" />
+  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <main class="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">
+      <Card v-for="report in summaryCard" :key="report.title">
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium"> {{ report.title }} </CardTitle>
+          <component :is="report.icon" class="text-muted-foreground h-4 w-4" />
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ report.value.toLocaleString('id-ID') }}
+          </div>
+          <p class="text-muted-foreground flex items-center gap-1 text-xs">
+            <component
+              :is="report.isPositive ? ChevronUp : ChevronDown"
+              :class="cn('h-4 w-4', { 'text-green-500': report.isPositive }, { 'text-red-500': !report.isPositive })"
+            />
+            <span class="font-medium" :class="report.isPositive ? 'text-green-500' : 'text-red-500'">
+              {{ report.change.toFixed(1) }}%
+            </span>
+            <span>{{ report.period }}</span>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </main>
 </template>