diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 24f4e2a..f8de050 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -12,6 +12,8 @@ import type {
   FromCancelDetail,
 } from "@/modules/05_leave/interface/response/leave";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 /** import componest*/
 import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
 import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
@@ -433,34 +435,15 @@ watch(
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
-      <q-card-section class="row items-center q-pa-sm">
-		<q-toolbar style="padding: 0px;">
-			<q-toolbar-title class="text-bold" style="font-size: 15px;"> {{ titleMain }}{{ titleName }} </q-toolbar-title>
-  
-			<q-btn
-			  icon="close"
-			  unelevated
-			  round
-			  dense
-			  @click="props.onClickClose"
-			  style="color: #ff8080; background-color: #ffdede"
-			/>
-		  </q-toolbar>
-		
-        <!-- <div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="props.onClickClose"
-          style="color: #ff8080; background-color: #ffdede"
-        /> -->
-      </q-card-section>
+    <q-card v-if="props.leaveStatus != 'DELETE'">
+      <DialogHeader
+        :tittle="`${titleMain} ${titleName}`"
+        :close="props.onClickClose"
+      />
+
       <q-separator />
-      <q-card-section class="q-pa-sm row q-gutter-y-md">
+
+      <q-card-section class="scroll" style="max-height: 70vh">
         <div
           flat
           :class="
@@ -560,10 +543,7 @@ watch(
         </div>
       </q-card-section>
       <q-separator />
-      <q-card-section
-        class="row items-center q-pa-sm"
-        v-if="props.leaveStatus === 'CANCEL'"
-      >
+      <q-card-section v-if="props.leaveStatus === 'CANCEL'" align="right">
         <q-space />
         <q-btn
           label="ยืนยัน"
@@ -576,21 +556,12 @@ watch(
       </q-card-section>
     </q-card>
 
-    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
-      <q-card-section class="row items-center q-pa-sm">
-        <div class="text-bold q-pl-sm">
-          {{ titleMainCancle }}{{ titleName }}
-        </div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="props.onClickClose"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
+    <q-card q-card v-if="props.leaveStatus === 'DELETE'">
+      <DialogHeader
+        :tittle="`${titleMainCancle} ${titleName}`"
+        :close="props.onClickClose"
+      />
+
       <q-separator />
       <q-card-section class="q-p-md row q-gutter-y-md">
         <div flat class="col-12">
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index 72e0576..3c7a9b5 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
-import { ref, reactive,onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
 //history dialog
@@ -11,7 +11,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const store = useRegistryInFormationStore();
-const rowsHistory = ref<any[]>([])
+const rowsHistory = ref<any[]>([]);
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@@ -222,7 +222,6 @@ const visibleColumnsHistory = ref<string[]>([
   "createdAt",
 ]);
 
-
 function onHistory() {
   modalHistory.value = true;
 }
@@ -258,7 +257,10 @@ function getData() {
 
 /** get history */
 function getHistory() {
-  const url = store.typeProfile == 'OFFICER' ? config.API.dataUserInformatioHistory(''):config.API.dataUserInformatioHistory('-employee')
+  const url =
+    store.typeProfile == "OFFICER"
+      ? config.API.dataUserInformatioHistory("")
+      : config.API.dataUserInformatioHistory("-employee");
   showLoader();
   http
     .get(url)
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index e3dd120..9fb7592 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -65,10 +65,10 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 70vw">
+    <q-card>
       <DialogHeader :tittle="title" :close="close" />
       <q-separator />
-      <q-card-section>
+      <q-card-section style="max-height: 80vh" class="scroll">
         <div class="row justify-end q-col-gutter-sm q-mb-sm">
           <div class="col-12 col-sm-3">
             <q-input
@@ -209,7 +209,9 @@ watch(
                       class="fix_top"
                     >
                       <q-item-label class="text-dark text-weight-medium">
-                        {{ props.row.status ? statusLeave(props.row.status) : "-" }}</q-item-label
+                        {{
+                          props.row.status ? statusLeave(props.row.status) : "-"
+                        }}</q-item-label
                       >
                     </q-item-section>
                     <q-item-section v-else class="fix_top">