diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 42c47c74..0e6c16da 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -74,7 +74,7 @@ const onSubmit = handleSubmit((values) => {
   <div class="mx-auto w-full">
     <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
       <!-- Tanggal SEP & Jalur -->
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
         <div class="flex flex-col gap-2">
           <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
           <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
@@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
           Cari Pasien
         </Button>
       </div>
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
         <div class="flex flex-col gap-2">
           <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
           <Input v-model="noBpjs" />
@@ -133,7 +133,7 @@ const onSubmit = handleSubmit((values) => {
 
       <!-- Data SEP -->
       <h3 class="text-lg font-semibold">Data SEP</h3>
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
         <div class="flex flex-col gap-2">
           <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
           <div class="flex gap-2">
@@ -257,7 +257,12 @@ const onSubmit = handleSubmit((values) => {
 
       <!-- Actions -->
       <div class="mt-6 flex justify-end gap-2">
-        <Button type="button" variant="ghost" class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50">
+        <Button
+          type="button"
+          variant="ghost"
+          class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
+          @click="emit('event', 'history-sep')"
+        >
           <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
         </Button>
         <Button
diff --git a/app/components/app/sep/table-history-sep.vue b/app/components/app/sep/table-history-sep.vue
new file mode 100644
index 00000000..bfe00e51
--- /dev/null
+++ b/app/components/app/sep/table-history-sep.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Input } from '~/components/pub/ui/input'
+
+const props = defineProps<{
+  open: boolean
+  histories: Array<{
+    no_sep: string
+    tgl_sep: string
+    no_rujukan: string
+    diagnosis: string
+    pelayanan: string
+    kelas: string
+  }>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const search = ref('')
+
+const filteredHistories = computed(() => {
+  const histories = props.histories || []
+  return histories.filter((p) => p.no_sep.includes(search.value))
+})
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>History SEP</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2">NO. SEP</th>
+              <th class="p-2">TGL. SEP</th>
+              <th class="p-2">NO. RUJUKAN</th>
+              <th class="p-2">DIAGNOSIS AWAL</th>
+              <th class="p-2">JENIS PELAYANAN</th>
+              <th class="p-2">KELAS RAWAT</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
+              <td class="p-2">{{ p.no_sep }}</td>
+              <td class="p-2">{{ p.tgl_sep }}</td>
+              <td class="p-2">{{ p.no_rujukan }}</td>
+              <td class="p-2">{{ p.diagnosis }}</td>
+              <td class="p-2">{{ p.pelayanan }}</td>
+              <td class="p-2">{{ p.kelas }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/app/sep/search-letter.vue b/app/components/app/sep/table-search-letter.vue
similarity index 100%
rename from app/components/app/sep/search-letter.vue
rename to app/components/app/sep/table-search-letter.vue
diff --git a/app/components/app/sep/search-patient.vue b/app/components/app/sep/table-search-patient.vue
similarity index 100%
rename from app/components/app/sep/search-patient.vue
rename to app/components/app/sep/table-search-patient.vue
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 8c7f5432..61107232 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const openPatient = ref(false)
 const openLetter = ref(false)
+const openHistory = ref(false)
 const selectedPatient = ref('3456512345678880')
 const selectedLetter = ref('SK22334442')
 
@@ -40,6 +41,25 @@ const letters = [
   },
 ]
 
+const histories = [
+  {
+    no_sep: "SP23311224",
+    tgl_sep: "12 Agustus 2025",
+    no_rujukan: "123444",
+    diagnosis: "C34.9 – Karsinoma Paru",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+  {
+    no_sep: "SP23455667",
+    tgl_sep: "11 Agustus 2025",
+    no_rujukan: "2331221",
+    diagnosis: "K35 – Apendisitis akut",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+]
+
 function handleSavePatient() {
   console.log('Pasien dipilih:', selectedPatient.value)
 }
@@ -57,6 +77,10 @@ function handleEvent(value: string) {
     openLetter.value = true
     return
   }
+  if (value === 'history-sep') {
+    openHistory.value = true
+    return
+  }
   if (value === 'back') {
     navigateTo('/bpjs/sep')
   }
@@ -69,16 +93,21 @@ function handleEvent(value: string) {
     <span class="font-semibold">Tambah</span> SEP
   </div>
   <AppSepEntryForm @event="handleEvent" />
-  <AppSepSearchPatient
+  <AppSepTableSearchPatient
     v-model:open="openPatient"
     v-model:selected="selectedPatient"
     :patients="patients"
     @save="handleSavePatient"
   />
-  <AppSepSearchLetter
+  <AppSepTableSearchLetter
     v-model:open="openLetter"
     v-model:selected="selectedLetter"
     :letters="letters"
     @save="handleSaveLetter"
   />
+  <AppSepTableHistorySep
+    v-model:open="openHistory"
+    :histories="histories"
+  />
+
 </template>