diff --git a/app/components/app/control-letter/history-dialog.vue b/app/components/app/control-letter/history-dialog.vue
new file mode 100644
index 00000000..7e5a2304
--- /dev/null
+++ b/app/components/app/control-letter/history-dialog.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './history-list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isHistoryDialogOpen`) as Ref<boolean>
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="Riwayat Surat Kontrol" size="full">   
+    <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/control-letter/history-list.cfg.ts b/app/components/app/control-letter/history-list.cfg.ts
new file mode 100644
index 00000000..443bf237
--- /dev/null
+++ b/app/components/app/control-letter/history-list.cfg.ts
@@ -0,0 +1,85 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/print-btn.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {width: 130}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'NAMA PASIEN' },
+      { label: 'NO.SURAT KONTROL' },
+      { label: 'NO.SEP' },
+      { label: 'TANGGAL RENCANA KONTROL' },
+      { label: 'TANGGAL TERBIT' },
+      { label: 'DPJP' },
+      { label: 'SPESIALIS' },
+      { label: 'SUBSPESIALIS' },
+      { label: 'TIPE RAWAT' },
+      { label: 'DIBUAT OLEH' },
+      { label: 'DIEDIT OLEH' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'date',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}
diff --git a/app/components/content/control-letter/list.vue b/app/components/content/control-letter/list.vue
index c9353057..87a3d33e 100644
--- a/app/components/content/control-letter/list.vue
+++ b/app/components/content/control-letter/list.vue
@@ -11,8 +11,19 @@ import { getList, remove } from '~/services/control-letter.service'
 import { toast } from '~/components/pub/ui/toast'
 import type { Encounter } from '~/models/encounter'
 import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import { unauthorizedToast } from '~/lib/utils'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
+import HistoryDialog from '~/components/app/control-letter/history-dialog.vue'
 // #endregion
 
+// #region Permission
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const { getPagePermissions } = useRBAC()
+const pagePermission = getPagePermissions(roleAccess)
+
 // #region State
 const props = defineProps<{
   encounter?: Encounter
@@ -24,6 +35,10 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
   fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
   entityName: 'control-letter',
 })
+const historyData = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'control-letter-history',
+})
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -37,6 +52,10 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
+const isHistoryDialogOpen = ref(false)
+provide('isHistoryDialogOpen', isHistoryDialogOpen)
+
+const isDocPreviewDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
 const isRequirementsMet = ref(true)
@@ -44,17 +63,20 @@ const isRequirementsMet = ref(true)
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
+const timestamp = ref(new Date().toISOString())
 
 const headerPrep: HeaderPrep = {
   title: "Surat Kontrol",
   icon: 'i-lucide-newspaper',
-  addNav: {
+}
+if (pagePermission.canCreate) {
+  headerPrep.addNav = {
     label: "Surat Kontrol",
     onClick: () => navigateTo({
         name: 'rehab-encounter-id-control-letter-add',
         params: { id: encounterId },
       }),
-  },
+  }
 }
 // #endregion
 
@@ -105,11 +127,12 @@ function handleCancelConfirmation() {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('timestamp', isLoading)
 provide('table_data_loader', isLoading)
 // #endregion
 
 // #region Watchers
-watch([recId, recAction], () => {
+watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       navigateTo({
@@ -119,17 +142,22 @@ watch([recId, recAction], () => {
       break
 
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
-      navigateTo({
-        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      if(pagePermission.canUpdate){ 
+        navigateTo({
+          name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+          params: { id: encounterId, "control_letter_id": recId.value },
+        })
+      } else {
+        unauthorizedToast()
+      }
       break
 
     case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
-      isRecordConfirmationOpen.value = true
+      if(pagePermission.canDelete){
+        isRecordConfirmationOpen.value = true
+      } else {
+        unauthorizedToast()
+      }
       break
   }
 })
@@ -151,8 +179,19 @@ watch([recId, recAction], () => {
       :ref-search-nav="refSearchNav"
       @search="handleSearch" />
 
+    <div class="mb-3 flex justify-end items-center">
+      <Button variant="outline"
+        class="gap-1 bg-transparent items-center text-orange-400 border-orange-400"
+        @click="isHistoryDialogOpen = true">
+        <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Program Nasional</Button>
+    </div>
+    
     <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
+    <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+      <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
+    </Dialog>
+
     <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
       <template #default="{ record }">
@@ -172,5 +211,13 @@ watch([recId, recAction], () => {
         </div>
       </template>
     </RecordConfirmation>
+    
+      <HistoryDialog
+        v-model:is-modal-open="isHistoryDialogOpen"
+        :data="historyData.data.value"
+        :pagination-meta="historyData.paginationMeta"
+        @page-change="historyData.handlePageChange"
+      />
+
   </div>
 </template>
diff --git a/app/components/pub/my-ui/data/print-btn.vue b/app/components/pub/my-ui/data/print-btn.vue
new file mode 100644
index 00000000..a3d131b8
--- /dev/null
+++ b/app/components/pub/my-ui/data/print-btn.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ActionEvents, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+const props = defineProps<{
+  url: string
+  btnTxt?: string
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const timestamp = inject<Ref<any>>('timestamp')!
+
+function handlePrint() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+  timestamp.value = new Date().toISOString()
+}
+</script>
+
+<template>
+  <Button 
+    class="gap-3 items-center border-orange-400 text-orange-400"
+    variant="outline" @click="handlePrint">
+    <Icon name="i-lucide-printer" class="h-4 w-4" />
+    {{ props.btnTxt || 'Preview' }}
+  </Button>
+</template>
\ No newline at end of file
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 67f3d04b..e201a439 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -160,4 +160,4 @@ export function unauthorizedToast() {
     description: 'You are not authorized to perform this action.',
     variant: 'destructive',
   })
-}
+}
\ No newline at end of file