diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index c61c10654..1499e91f5 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -539,7 +539,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 300px"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -715,7 +715,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index d94ae0328..cb05031f9 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -688,7 +688,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 450px"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -1104,7 +1104,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 232e064f8..ff4d09b09 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -790,7 +790,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 500px"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -1125,7 +1125,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index 14e5ea2e5..1d2666fd9 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -245,7 +245,7 @@ async function addEditData(editStatus: boolean = false) {
     profileId: editStatus ? undefined : profileId.value,
     isDate: declHonorForm.isDate === "true" ? true : false,
     issueDate:
-      declHonorForm.isDate === true
+      declHonorForm.isDate === "true"
         ? declHonorForm.issueDate
         : new Date(`${issueDateYear.value}-01-01`),
   };
@@ -520,7 +520,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 320px"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 1d31e2309..1231e38d9 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -589,7 +589,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 350px"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -805,7 +805,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index 695e07dca..7d4c2685d 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -636,7 +636,7 @@ onMounted(() => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 300px"
       class="bg-white"
     >
       <form @submit.prevent="validateForm">
@@ -778,7 +778,7 @@ onMounted(() => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
index cc9a3603f..874a7ba80 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
@@ -575,7 +575,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 300px"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index fa760dacd..afb02e7f3 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -187,7 +187,7 @@ watch(modal, (status) => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
index ce17ca0af..e601c0072 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
@@ -673,7 +673,7 @@ onMounted(() => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 400px"
       class="bg-white"
     >
       <form @submit.prevent="validateForm">
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
index 582fdbc03..e3a075eef 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -217,7 +217,7 @@ watch(modal, (status) => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index dc2371b1a..c705a7c7a 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -521,7 +521,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 350px"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index 5ba2bb390..19b332723 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -191,7 +191,7 @@ watch(modal, (status) => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
index d136bb166..41789d4a4 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
@@ -396,7 +396,7 @@ onMounted(() => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 200px"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="validateForm">
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
index 9cb947397..e424737fa 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
@@ -132,7 +132,7 @@ watch(modal, (status) => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 0e5439d72..3a89b8994 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -464,7 +464,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 500px"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -776,7 +776,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 7b6e90a87..535b5518e 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -686,7 +686,7 @@ watch(
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 350px"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -944,7 +944,7 @@ watch(
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index 10200e328..210880872 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -569,7 +569,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 600px"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -826,7 +826,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index e4e0f1249..db6fc1b32 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -6,7 +6,6 @@ import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
-import DialogHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue";
 import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 const mixin = useCounterMixin();
 const $q = useQuasar();
@@ -105,7 +104,6 @@ const childrenDataEdit: any = reactive({
 
 function editForm(rows: any) {
   if (rows !== null) {
-
     fatherDataEdit.isHaveInfo = rows.fatherFirstName !== null ? 1 : 0;
     fatherDataEdit.isLive = rows.fatherLive ? 1 : 0;
     fatherDataEdit.citizenId = rows.fatherCitizenId;
@@ -286,7 +284,9 @@ const addChildren = async () => {
 };
 
 function deleteChildren(items: any) {
-  const index = childrenDataEdit.childrens.findIndex((r: any) => r.id == items.id);
+  const index = childrenDataEdit.childrens.findIndex(
+    (r: any) => r.id == items.id
+  );
 
   childrenDataEdit.childrens.splice(index, 1);
 }
@@ -356,17 +356,16 @@ onMounted(async () => {
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">คำนำหน้าชื่อ</div>
-          <div class="col-2">
-            {{ fatherData.prefix ? fatherData.prefix : "-" }}
-          </div>
-          <div class="col-1">ชื่อ</div>
-          <div class="col-2">
-            {{ fatherData.firstName ? fatherData.firstName : "-" }}
-          </div>
-          <div class="col-1">นามสกุล</div>
-          <div class="col-2">
-            {{ fatherData.lastName ? fatherData.lastName : "-" }}
+          <div class="col-2">ชื่อ-นามสกุล</div>
+          <div class="col-6">
+            {{
+              fatherData.prefix
+                ? fatherData.prefix +
+                  fatherData.firstName +
+                  " " +
+                  fatherData.lastName
+                : "-"
+            }}
           </div>
           <div class="col-1">อาชีพ</div>
           <div class="col">
@@ -398,17 +397,16 @@ onMounted(async () => {
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">คำนำหน้าชื่อ</div>
-          <div class="col-2">
-            {{ motherData.prefix ? motherData.prefix : "-" }}
-          </div>
-          <div class="col-1">ชื่อ</div>
-          <div class="col-2">
-            {{ motherData.firstName ? motherData.firstName : "-" }}
-          </div>
-          <div class="col-1">นามสกุล</div>
-          <div class="col-2">
-            {{ motherData.lastName ? motherData.lastName : "-" }}
+          <div class="col-2">ชื่อ-นามสกุล</div>
+          <div class="col-6">
+            {{
+              motherData.prefix
+                ? motherData.prefix +
+                  motherData.firstName +
+                  " " +
+                  motherData.lastName
+                : "-"
+            }}
           </div>
           <div class="col-1">อาชีพ</div>
           <div class="col">
@@ -440,17 +438,16 @@ onMounted(async () => {
           </div>
         </div>
         <div class="row items-center">
-          <div class="col-2">คำนำหน้าชื่อ</div>
-          <div class="col-2">
-            {{ spouseData.prefix ? spouseData.prefix : "-" }}
-          </div>
-          <div class="col-1">ชื่อ</div>
-          <div class="col-2">
-            {{ spouseData.firstName ? spouseData.firstName : "-" }}
-          </div>
-          <div class="col-1">นามสกุล</div>
-          <div class="col-2">
-            {{ spouseData.lastName ? spouseData.lastName : "-" }}
+          <div class="col-2">ชื่อ-นามสกุล</div>
+          <div class="col-6">
+            {{
+              spouseData.prefix
+                ? spouseData.prefix +
+                  spouseData.firstName +
+                  " " +
+                  spouseData.lastName
+                : "-"
+            }}
           </div>
           <div class="col-1">อาชีพ</div>
           <div class="col">
@@ -486,17 +483,16 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row items-center">
-            <div class="col-2">คำนำหน้าชื่อ</div>
-            <div class="col-2">
-              {{ children.childrenPrefix }}
-            </div>
-            <div class="col-1">ชื่อ</div>
-            <div class="col-2">
-              {{ children.childrenFirstName }}
-            </div>
-            <div class="col-1">นามสกุล</div>
-            <div class="col-2">
-              {{ children.childrenLastName }}
+            <div class="col-2">ชื่อ-นามสกุล</div>
+            <div class="col-6">
+              {{
+                children.childrenPrefix
+                  ? children.childrenPrefix +
+                    children.childrenFirstName +
+                    " " +
+                    children.childrenLastName
+                  : "-"
+              }}
             </div>
             <div class="col-1">อาชีพ</div>
             <div class="col">
@@ -519,7 +515,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 90vh; min-width: 80%"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -839,7 +835,11 @@ onMounted(async () => {
                 />
               </div>
             </div>
-            <q-card v-if="spouseDataEdit.isHave" bordered class="bg-grey-1 q-pa-md">
+            <q-card
+              v-if="spouseDataEdit.isHave"
+              bordered
+              class="bg-grey-1 q-pa-md"
+            >
               <div class="row q-col-gutter-md">
                 <div class="col">
                   <q-input
@@ -965,7 +965,10 @@ onMounted(async () => {
                 <q-tooltip> เพิ่มข้อมูล </q-tooltip>
               </q-btn>
             </div>
-            <div v-for="(items, index) in childrenDataEdit.childrens" :key="index">
+            <div
+              v-for="(items, index) in childrenDataEdit.childrens"
+              :key="index"
+            >
               <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
                 <div class="text-medium q-pl-md">
                   บุตรคนที่ : {{ index + 1 }}
@@ -1112,11 +1115,12 @@ onMounted(async () => {
       </q-form>
     </q-layout>
   </q-dialog>
+
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 90vh; min-width: 80%"
       class="bg-white"
     >
       <q-header>
@@ -1132,7 +1136,7 @@ onMounted(async () => {
       <q-page-container>
         <q-page class="q-pa-md">
           <div v-if="historyRows.length === 0">ไม่พบข้อมูล</div>
-          <div v-else class="scroll" style="max-height: 70vh">
+          <div v-else class="scroll q-pa-md">
             <div>
               <div class="row text-right">
                 <div class="col-12">
@@ -1160,17 +1164,14 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">คำนำหน้าชื่อ</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].fatherPrefix }}
-                  </div>
-                  <div class="col-1">ชื่อ</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].fatherFirstName }}
-                  </div>
-                  <div class="col-1">นามสกุล</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].fatherLastName }}
+                  <div class="col-2">ชื่อ-นามสกุล</div>
+                  <div class="col-6">
+                    {{
+                      historyRows[index - 1].fatherPrefix +
+                      historyRows[index - 1].fatherFirstName +
+                      " " +
+                      historyRows[index - 1].fatherLastName
+                    }}
                   </div>
                   <div class="col-1">อาชีพ</div>
                   <div class="col">
@@ -1206,17 +1207,14 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">คำนำหน้าชื่อ</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].motherPrefix }}
-                  </div>
-                  <div class="col-1">ชื่อ</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].motherFirstName }}
-                  </div>
-                  <div class="col-1">นามสกุล</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].motherLastName }}
+                  <div class="col-2">ชื่อ-นามสกุล</div>
+                  <div class="col-6">
+                    {{
+                      historyRows[index - 1].motherPrefix +
+                      historyRows[index - 1].motherFirstName +
+                      " " +
+                      historyRows[index - 1].motherLastName
+                    }}
                   </div>
                   <div class="col-1">อาชีพ</div>
                   <div class="col">
@@ -1259,17 +1257,14 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="row items-center">
-                  <div class="col-2">คำนำหน้าชื่อ</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].couplePrefix }}
-                  </div>
-                  <div class="col-1">ชื่อ</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].coupleFirstName }}
-                  </div>
-                  <div class="col-1">นามสกุล</div>
-                  <div class="col-2">
-                    {{ historyRows[index - 1].coupleLastName }}
+                  <div class="col-2">ชื่อ-นามสกุล</div>
+                  <div class="col-6">
+                    {{
+                      historyRows[index - 1].couplePrefix +
+                      historyRows[index - 1].coupleFirstName +
+                      " " +
+                      historyRows[index - 1].coupleLastName
+                    }}
                   </div>
                   <div class="col-1">อาชีพ</div>
                   <div class="col">
@@ -1318,17 +1313,14 @@ onMounted(async () => {
                     </div>
                   </div>
                   <div class="row items-center">
-                    <div class="col-2">คำนำหน้าชื่อ</div>
-                    <div class="col-2">
-                      {{ children.childrenPrefix }}
-                    </div>
-                    <div class="col-1">ชื่อ</div>
-                    <div class="col-2">
-                      {{ children.childrenFirstName }}
-                    </div>
-                    <div class="col-1">นามสกุล</div>
-                    <div class="col-2">
-                      {{ children.childrenLastName }}
+                    <div class="col-2">ชื่อ-นามสกุล</div>
+                    <div class="col-6">
+                      {{
+                        children.childrenPrefix +
+                        children.childrenFirstName +
+                        " " +
+                        children.childrenLastName
+                      }}
                     </div>
                     <div class="col-1">อาชีพ</div>
                     <div class="col">
@@ -1346,14 +1338,15 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-          <q-footer>
-            <q-separator color="grey-4" />
-            <div class="q-pa-sm flex flex-center">
-              <q-pagination v-model="index" :max="historyRows.length" input />
-            </div>
-          </q-footer>
         </q-page>
       </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <div class="q-pa-sm flex flex-center">
+          <q-pagination v-model="index" :max="historyRows.length" input />
+        </div>
+      </q-footer>
     </q-layout>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue
deleted file mode 100644
index 2f0f0b731..000000000
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { QForm, useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const mixin = useCounterMixin();
-const $q = useQuasar();
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = mixin;
-
-const historyRows = ref<any>([]);
-
-const historyDialog = defineModel<boolean>("historyDialog", { required: true });
-const id = defineModel<string>("id", { required: true });
-const index = ref<number>(10);
-function closeHistoryDialog() {
-  historyDialog.value = false;
-}
-
-async function fetchHistoryData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileNewFamilyHisByFamilyId(id))
-    .then(async (res) => {
-      historyRows.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-</script>
-
-<template>
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-white">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <dialog-header
-          tittle="ประวัติแก้ไขข้อมูลครอบครัว"
-          :close="closeHistoryDialog"
-        />
-      </q-card-section>
-      <q-separator color="grey-4" />
-      <div class="q-pa-md">
-        <div>
-          <div class="col-12 row q-pb-sm">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • บิดา
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-            <div class="row items-center">
-              <div class="col-2">
-                <div>เลขบัตรประจำตัวประชาชน</div>
-              </div>
-              <div class="col">
-                {{ historyRows[index].fatherCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">คำนำหน้าชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index].fatherPrefix }}
-              </div>
-              <div class="col-1">ชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index].fatherFirstName }}
-              </div>
-              <div class="col-1">นามสกุล</div>
-              <div class="col-2">
-                {{ historyRows[index].fatherLastName }}
-              </div>
-              <div class="col-1">อาชีพ</div>
-              <div class="col">
-                {{ historyRows[index].fatherCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">สถานภาพการมีชีวิต</div>
-              <div class="col-10">
-                <div v-if="historyRows[index].fatherLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • มารดา
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-            <div class="row items-center">
-              <div class="col-2">
-                <div>เลขบัตรประจำตัวประชาชน</div>
-              </div>
-              <div class="col">
-                {{ historyRows[index].motherCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">คำนำหน้าชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index].motherPrefix }}
-              </div>
-              <div class="col-1">ชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index].motherFirstName }}
-              </div>
-              <div class="col-1">นามสกุล</div>
-              <div class="col-2">
-                {{ historyRows[index].motherLastName }}
-              </div>
-              <div class="col-1">อาชีพ</div>
-              <div class="col">
-                {{ historyRows[index].motherCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">สถานภาพการมีชีวิต</div>
-              <div class="col">
-                <div v-if="historyRows[index].motherLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • คู่สมรส
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-            <div class="row items-center">
-              <div class="col-2">
-                <div>เลขบัตรประจำตัวประชาชน</div>
-              </div>
-              <div class="col">
-                {{ historyRows[index].coupleCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">คำนำหน้าชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index].couplePrefix }}
-              </div>
-              <div class="col-1">ชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index].firstName }}
-              </div>
-              <div class="col-1">นามสกุล</div>
-              <div class="col-2">
-                {{ historyRows[index].coupleLastName }}
-              </div>
-              <div class="col-1">อาชีพ</div>
-              <div class="col">
-                {{ historyRows[index].coupleCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">สถานภาพการมีชีวิต</div>
-              <div class="col">
-                <div v-if="historyRows[index].coupleLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <!-- <div>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • บุตร
-            </div>
-          </div>
-          <div
-            v-for="(children, indexIn) in historyRows[index].children"
-            :key="index"
-          >
-            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
-              <div class="text-medium">บุตรคนที่ : {{ indexIn + 1 }}</div>
-            </div>
-            <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-              <div class="row items-center">
-                <div class="col-2">
-                  <div>เลขบัตรประจำตัวประชาชน</div>
-                </div>
-                <div class="col-10">
-                  {{ children.childrenCitizenId }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2">คำนำหน้าชื่อ</div>
-                <div class="col-2">
-                  {{ children.childrenPrefix }}
-                </div>
-                <div class="col-1">ชื่อ</div>
-                <div class="col-2">
-                  {{ children.childrenFirstName }}
-                </div>
-                <div class="col-1">นามสกุล</div>
-                <div class="col-2">
-                  {{ children.childrenLastName }}
-                </div>
-                <div class="col-1">อาชีพ</div>
-                <div class="col">
-                  {{ children.childrenCareer }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2">สถานภาพการมีชีวิต</div>
-                <div class="col">
-                  <div v-if="children.childrenLive">มีชีวิตอยู่</div>
-                  <div v-else>ถึงแก่กรรม</div>
-                </div>
-              </div>
-            </q-card>
-          </div>
-        </div> -->
-      </div>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index fed637cf7..07895317d 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -1424,7 +1424,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index 03f2dcffe..ae4f395b1 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -498,7 +498,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh"
+      style="height: 300px"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -593,7 +593,7 @@ onMounted(async () => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 9d4946df6..ed9fcdb43 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -527,7 +527,7 @@ onMounted(() => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 90vh; min-width: 80%"
       class="bg-white"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
index 55866d91c..ff4c5d781 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -251,7 +251,7 @@ watch(
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
index bc0d3fbec..f9747afc4 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
@@ -419,7 +419,7 @@ onMounted(() => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 300px; min-width: 80%"
       class="bg-white"
     >
       <q-form @submit.prevent greedy @validation-success="onSubmit">
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index b719ef1a8..641e54b1c 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -147,13 +147,13 @@ watch(modal, (status) => {
     <q-layout
       view="lHh lpr lFf"
       container
-      style="height: 80vh; min-width: 80%"
+      style="height: 500px; min-width: 80%"
       class="bg-white"
     >
       <q-header>
         <q-toolbar>
           <DialogHeader
-            :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+            :tittle="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
             :close="closeDialog"
           />
         </q-toolbar>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 1da06b539..4d6b6b426 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
@@ -50,6 +50,7 @@ function updateAgency(name: string) {
             dense
             lazy-rules
             outlined
+            class="inputgreen"
             :model-value="Number(store.formAddProject.year) + 543"
             :label="`${'ปีงบประมาณ'}`"
           >
@@ -69,7 +70,9 @@ function updateAgency(name: string) {
       <q-input
         dense
         outlined
+        class="inputgreen"
         v-model="formData.org"
+        inputgreen
         label="ชื่อหน่วยงานที่รับผิดชอบ"
         hide-bottom-space
         lazy-rules
@@ -83,6 +86,7 @@ function updateAgency(name: string) {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-input
         outlined
+        class="inputgreen"
         dense
         v-model="store.formAddProject.projectName"
         label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
@@ -99,6 +103,7 @@ function updateAgency(name: string) {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-input
         outlined
+        class="inputgreen"
         dense
         v-model="store.formAddProject.reason"
         label="หลักการและเหตุผล"
@@ -110,6 +115,7 @@ function updateAgency(name: string) {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-input
         outlined
+        class="inputgreen"
         dense
         v-model="store.formAddProject.objective"
         label="วัตถุประสงค์"
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index 4ece0fca5..33142ff80 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watchEffect } from "vue";
+import { reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
@@ -15,80 +15,16 @@ const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
-const formData = reactive<FormFollowResult>({
-  metricType: "",
-  indicators: "",
-  target: "",
-  calculation: "",
-  measuRement: "",
-  results: "",
-  obstacles: "",
-  suggestions: "",
-  project: "",
-});
-
-const group = ref<any[]>([]);
-const metricTypeOp = ref<DataOption[]>([
-  {
-    id: "id1",
-    name: "name1",
-  },
-  {
-    id: "id2",
-    name: "name2",
-  },
-  {
-    id: "id3",
-    name: "name3",
-  },
-]);
 const projectOp = ref<DataOption[]>([
   {
     id: "OFFER",
-    name: "โครงการที่ เสนอขอ TN",
+    name: "โครงการที่เสนอขอ TN",
   },
   {
     id: "NOOFFER",
-    name: "โครงการที่ ไม่ เสนอขอ TN",
+    name: "โครงการที่ไม่เสนอขอ TN",
   },
 ]);
-
-const optionsTNFirst = ref<DataOptionCheckBox[]>([
-  {
-    label: "ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ",
-    value: store.formAddProject.isPassAllocate,
-  },
-  {
-    label:
-      "ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: store.formAddProject.isPassNoAllocate,
-  },
-  {
-    label: "ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: store.formAddProject.isNoPass,
-  },
-]);
-const optionsTNSecon = ref<DataOptionCheckBox[]>([
-  {
-    label: "แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ",
-    value: store.formAddProject.isBudget,
-  },
-  {
-    label: "แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: store.formAddProject.isOutBudget,
-  },
-]);
-
-watchEffect(() => {});
-
-onMounted(() => {
-  optionsTNFirst.value.forEach((checkbox, index) => {
-    if (index === 0) checkbox.value = store.formAddProject.isPassAllocate;
-    else if (index === 1)
-      checkbox.value = store.formAddProject.isPassNoAllocate;
-    else if (index === 2) checkbox.value = store.formAddProject.isNoPass;
-  });
-});
 </script>
 <template>
   <div class="row q-pa-md q-col-gutter-sm">
@@ -109,6 +45,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="ประเภทตัวชี้วัด"
         v-model="store.formAddProject.metricType"
         hide-bottom-space
@@ -118,6 +55,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="ตัวชี้วัด"
         v-model="store.formAddProject.indicators"
         hide-bottom-space
@@ -127,6 +65,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="เป้าหมาย"
         v-model="store.formAddProject.target"
         hide-bottom-space
@@ -136,6 +75,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.calculation"
         hide-bottom-space
         label="วิธีการคำนวณ/เครื่องมือ"
@@ -146,6 +86,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.measuRement"
         hide-bottom-space
         label="ระยะเวลาวัดผล"
@@ -155,9 +96,10 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.results"
         hide-bottom-space
-        label="ผลการดำเนิน"
+        label="ผลการดำเนินการ"
         type="textarea"
       />
     </div>
@@ -165,6 +107,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.obstacles"
         hide-bottom-space
         label="ปัญหาอุปสรรค"
@@ -175,6 +118,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.suggestions"
         hide-bottom-space
         label="ข้อเสนอเเนะ"
@@ -198,6 +142,7 @@ onMounted(() => {
         hide-bottom-space
         map-options
         emit-value
+        class="inputgreen"
       />
     </div>
     <div v-if="store.formAddProject.project !== ''" class="col-12">
@@ -205,7 +150,7 @@ onMounted(() => {
         <div class="col-12">
           <q-checkbox
             v-model="store.formAddProject.isPassAllocate"
-            label="ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ"
+            label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
           />
         </div>
         <div class="col-12">
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index 77ed8de39..deac5e1b1 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -5,6 +5,13 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type {
+  ResDataProject,
+  ResPlannedGoals,
+  ResActualGoals,
+  ResPeople,
+} from "@/modules/15_development/interface/response/Main";
+
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
 import Target from "@/modules/15_development/components/Target.vue";
 import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
@@ -38,7 +45,7 @@ function fetchDataProject(id: string) {
   http
     .get(config.API.developmentMainById(id))
     .then((res) => {
-      const data = res.data.result;
+      const data: ResDataProject = res.data.result;
       console.log(data);
       /** ข้อมูลเบื้องต้น*/
       store.formAddProject.year = data.year;
@@ -47,7 +54,7 @@ function fetchDataProject(id: string) {
       store.formAddProject.objective = data.objective;
 
       /**เป้าหมาย*/
-      const plannedGoals = data.plannedGoals.map((e: any) => ({
+      const plannedGoals = data.plannedGoals.map((e: ResPlannedGoals) => ({
         groupTarget: e.groupTarget,
         groupTargetSub: e.groupTargetSub,
         position: e.position,
@@ -56,14 +63,14 @@ function fetchDataProject(id: string) {
         type: e.type,
         amount: e.amount,
       }));
-      const plannedPeoples = data.plannedPeoples.map((e: any) => ({
+      const plannedPeoples = data.plannedPeoples.map((e: ResPeople) => ({
         groupTarget: e.groupTarget,
         amount: e.amount,
       }));
       store.formAddProject.plannedGoals = plannedGoals;
       store.formAddProject.plannedPeoples = plannedPeoples;
 
-      const actualGoals = data.actualGoals.map((e: any) => ({
+      const actualGoals = data.actualGoals.map((e: ResActualGoals) => ({
         groupTarget: e.groupTarget,
         groupTargetSub: e.groupTargetSub,
         position: e.position,
@@ -72,7 +79,7 @@ function fetchDataProject(id: string) {
         type: e.type,
         amount: e.amount,
       }));
-      const actualPeoples = data.actualPeoples.map((e: any) => ({
+      const actualPeoples = data.actualPeoples.map((e: ResPeople) => ({
         groupTarget: e.groupTarget,
         amount: e.amount,
       }));
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 12daf60f0..7cc19ccc3 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -16,28 +16,8 @@ const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
   useCounterMixin();
 
-const formData = reactive<FormFollowOther>({
-  dateStart: null,
-  dateEnd: null,
-  totalDate: 0,
-  address: "",
-  province: "",
-  budget: "",
-  accept: null,
-  receive: null,
-  approved: null,
-  budgetPay: null,
-  issues: "",
-  chance: "",
-  effects: "",
-  riskLevel: "",
-  riskManagement: "",
-  benefits: "",
-  topicsIssues: "",
-  trainingStudy: "",
-});
-
 const provinceOp = ref<DataOption[]>([]);
+const provinceOpMain = ref<DataOption[]>([]);
 const budgetOp = ref<DataOption[]>([
   {
     id: "REGULATIONBUDGET",
@@ -53,24 +33,18 @@ const budgetOp = ref<DataOption[]>([
   },
 ]);
 
-const options = ref<any>([
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-]);
-function onSubmit() {
-  dialogConfirm($q, () => {});
-}
-
 const getProvince = async () => {
   showLoader();
   http
     .get(config.API.province)
     .then((res) => {
       const data = res.data.result;
+
       provinceOp.value = data.map((item: DataOption) => ({
         id: item.id,
         name: item.name,
       }));
+      provinceOpMain.value = provinceOp.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -80,6 +54,32 @@ const getProvince = async () => {
     });
 };
 
+function changeDateStart() {
+  if (
+    store.formAddProject.dateStart !== null &&
+    store.formAddProject.dateEnd !== null
+  ) {
+    const startDate = new Date(store.formAddProject.dateStart);
+    const endDate = new Date(store.formAddProject.dateEnd);
+    if (startDate > endDate) {
+      store.formAddProject.dateEnd = null;
+    }
+  }
+}
+
+/**
+ * Fuction Filter จังหวัด
+ * @param val ค่าตัวพิมพ์ค้นหา
+ * @param update ทุกครั้งที่พิมพ์ค่า
+ */
+const filterSelector = (val: string, update: Function) => {
+  update(() => {
+    provinceOp.value = provinceOpMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
 onMounted(() => {
   getProvince();
 });
@@ -96,6 +96,8 @@ onMounted(() => {
         :locale="'th'"
         autoApply
         :enableTimePicker="false"
+        week-start="0"
+        @update:model-value="changeDateStart()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -103,6 +105,7 @@ onMounted(() => {
         }}</template>
         <template #trigger>
           <q-input
+            class="inputgreen"
             dense
             outlined
             :model-value="
@@ -131,6 +134,8 @@ onMounted(() => {
         :locale="'th'"
         autoApply
         :enableTimePicker="false"
+        week-start="0"
+        :min-date="store.formAddProject.dateStart"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -140,6 +145,7 @@ onMounted(() => {
           <q-input
             dense
             outlined
+            class="inputgreen"
             :model-value="
               store.formAddProject.dateEnd
                 ? date2Thai(store.formAddProject.dateEnd)
@@ -163,6 +169,7 @@ onMounted(() => {
       <q-input
         dense
         outlined
+        class="inputgreen"
         label="รวมระยะเวลา (วัน)"
         v-model="store.formAddProject.totalDate"
         mask="#"
@@ -177,6 +184,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.address"
         label="ที่อยู่"
       />
@@ -192,7 +200,19 @@ onMounted(() => {
         option-value="id"
         emit-value
         map-options
-      />
+        class="inputgreen"
+        use-input
+        @filter="
+        (inputValue:string, doneFn:Function) =>
+          filterSelector(inputValue, doneFn, )
+      "
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
     </div>
     <div class="col-12 q-mt-md">
       <span class="text-weight-medium text-body1">งบประมาณ</span>
@@ -208,6 +228,7 @@ onMounted(() => {
         option-value="id"
         emit-value
         map-options
+        class="inputgreen"
       />
     </div>
     <div class="col-12">
@@ -216,6 +237,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.accept"
             label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
             mask="###,###,###,###,###"
@@ -226,6 +248,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.receive"
             mask="###,###,###,###,###"
             reverse-fill-mask
@@ -236,6 +259,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.approved"
             hide-bottom-space
             mask="###,###,###,###,###"
@@ -247,6 +271,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="store.formAddProject.budgetPay"
             mask="###,###,###,###,###"
             reverse-fill-mask
@@ -264,6 +289,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.issues"
         label="ประเด็นความเสี่ยง"
         type="textarea"
@@ -273,6 +299,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.chance"
         label="โอกาสที่จะเกิด"
         type="textarea"
@@ -282,6 +309,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.effects"
         label="ผลกระทบจากการเกิด"
         type="textarea"
@@ -291,6 +319,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.riskLevel"
         label="ระดับความเสี่ยง"
       />
@@ -299,6 +328,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.riskManagement"
         label="เเนวทางการบริหารความเสี่ยง"
         type="textarea"
@@ -313,6 +343,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.expect"
         label="ประโยชน์ที่คาดว่าจะได้รับ"
         type="textarea"
@@ -325,6 +356,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.topicAcademic"
         label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
       />
@@ -333,6 +365,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
+        class="inputgreen"
         v-model="store.formAddProject.addressAcademic"
         label="สถานที่ฝึกอบรม ศึกษาดูงาน"
       />
@@ -342,13 +375,24 @@ onMounted(() => {
         outlined
         dense
         v-model="store.formAddProject.provinceActualId"
-        label="จังหวัด(ข้อมูลวิชาการ)"
+        label="จังหวัด"
         :options="provinceOp"
         option-label="name"
         option-value="id"
         emit-value
         map-options
-      />
+        class="inputgreen"
+        use-input
+        @filter="
+        (inputValue:string, doneFn:Function) =>
+          filterSelector(inputValue, doneFn, )
+      "
+        ><template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
     </div>
   </div>
 </template>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 9d77d1126..43cfb68a3 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -13,6 +13,9 @@ import type {
 import type {
   ResGroup,
   ResLevel,
+  ResPlannedGoals,
+  ResPeople,
+  ResActualGoals,
 } from "@/modules/15_development/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -22,14 +25,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-  success,
-  messageError,
-} = useCounterMixin();
+const { dialogRemove, success, messageError } = useCounterMixin();
 
 const columnsPlannedGoals = ref<QTableProps["columns"]>([
   {
@@ -94,6 +90,7 @@ const columnsActualGoals = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => Number(val),
   },
 ]);
 
@@ -117,13 +114,14 @@ const columnsRelated = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => Number(val),
   },
 ]);
 
-const plannedGoals = ref<any>([]);
-const plannedPeoples = ref<any>([]);
-const actualGoals = ref<any>([]);
-const actualPeoples = ref<any>([]);
+const plannedGoals = ref<ResPlannedGoals[]>([]);
+const plannedPeoples = ref<ResPeople[]>([]);
+const actualGoals = ref<ResActualGoals[]>([]);
+const actualPeoples = ref<ResPeople[]>([]);
 
 const peoplesOp = ref<DataOption[]>([
   { id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
@@ -195,67 +193,63 @@ function onClickOpenDialog(type: string, target: string) {
 }
 
 function onSubmitGroup() {
-  dialogConfirm($q, () => {
-    if (isTarget.value === "planned") {
-      const data = [];
-      data.push(formGroupTarget);
-      const list = data.map((e) => ({
-        groupTarget: e.groupTarget,
-        groupTargetSub: e.groupTargetSub,
-        position: e.position,
-        posTypePlannedId: e.posType,
-        posLevelPlannedId: e.level,
-        type: e.type,
-        amount: Number(e.amount),
-      }));
-      plannedGoals.value.push(...list);
-      store.formAddProject.plannedGoals = plannedGoals.value;
-    } else {
-      const data = [];
-      data.push(formGroupTarget);
-      const list = data.map((e) => ({
-        groupTarget: e.groupTarget,
-        groupTargetSub: e.groupTargetSub,
-        position: e.position,
-        posTypeActualId: e.posType,
-        posLevelActualId: e.level,
-        type: e.type,
-        amount: Number(e.amount),
-      }));
-      actualGoals.value.push(...list);
-      store.formAddProject.actualGoals = actualGoals.value;
-    }
-    setTimeout(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      onClickCloseDialog();
-    }, 500);
-  });
+  if (isTarget.value === "planned") {
+    const data = [];
+    data.push(formGroupTarget);
+    const list = data.map((e: FormGroupTarget) => ({
+      groupTarget: e.groupTarget,
+      groupTargetSub: e.groupTargetSub,
+      position: e.position,
+      posTypePlannedId: e.posType,
+      posLevelPlannedId: e.level,
+      type: e.type,
+      amount: Number(e.amount),
+    }));
+    plannedGoals.value.push(...list);
+    store.formAddProject.plannedGoals = plannedGoals.value;
+  } else {
+    const data = [];
+    data.push(formGroupTarget);
+    const list = data.map((e: FormGroupTarget) => ({
+      groupTarget: e.groupTarget,
+      groupTargetSub: e.groupTargetSub,
+      position: e.position,
+      posTypeActualId: e.posType,
+      posLevelActualId: e.level,
+      type: e.type,
+      amount: Number(e.amount),
+    }));
+    actualGoals.value.push(...list);
+    store.formAddProject.actualGoals = actualGoals.value;
+  }
+  setTimeout(() => {
+    onClickCloseDialog();
+  }, 100);
 }
 
 function onSubmitRelate() {
-  dialogConfirm($q, () => {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    if (isTarget.value === "planned") {
-      const data = [];
-      data.push(formGroupRelate);
-      const list = data.map((e) => ({
-        groupTarget: e.relate,
-        amount: Number(e.amount),
-      }));
-      plannedPeoples.value.push(...list);
-      store.formAddProject.plannedPeoples = plannedPeoples.value;
-    } else {
-      const data = [];
-      data.push(formGroupRelate);
-      const list = data.map((e) => ({
-        groupTarget: e.relate,
-        amount: Number(e.amount),
-      }));
-      actualPeoples.value.push(...list);
-      store.formAddProject.actualPeoples = actualPeoples.value;
-    }
+  if (isTarget.value === "planned") {
+    const data = [];
+    data.push(formGroupRelate);
+    const list = data.map((e: FormGroupRelate) => ({
+      groupTarget: e.relate,
+      amount: Number(e.amount),
+    }));
+    plannedPeoples.value.push(...list);
+    store.formAddProject.plannedPeoples = plannedPeoples.value;
+  } else {
+    const data = [];
+    data.push(formGroupRelate);
+    const list = data.map((e: FormGroupRelate) => ({
+      groupTarget: e.relate,
+      amount: Number(e.amount),
+    }));
+    actualPeoples.value.push(...list);
+    store.formAddProject.actualPeoples = actualPeoples.value;
+  }
+  setTimeout(() => {
     onClickCloseDialog();
-  });
+  }, 100);
 }
 
 function onclickDelete(index: number, type: string) {
@@ -277,8 +271,6 @@ function onclickDelete(index: number, type: string) {
       default:
         break;
     }
-
-    success($q, "ลบข้อมูลสำเร็จ");
   });
 }
 
@@ -616,6 +608,7 @@ onMounted(() => {
                 map-options
                 emit-value
                 lazy-rules
+                class="inputgreen"
                 @update:model-value="updateGroupTarget"
                 :rules="[
                 (val:string) =>
@@ -630,6 +623,7 @@ onMounted(() => {
               <q-select
                 dense
                 outlined
+                class="inputgreen"
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
@@ -658,6 +652,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
+                class="inputgreen"
                 v-model="formGroupTarget.position"
                 label="ตำแหน่ง"
                 :rules="[
@@ -675,6 +670,7 @@ onMounted(() => {
                 outlined
                 hide-bottom-space
                 lazy-rules
+                class="inputgreen"
                 v-model="formGroupTarget.posType"
                 :options="posTypeOp"
                 option-label="name"
@@ -699,6 +695,7 @@ onMounted(() => {
                 outlined
                 hide-bottom-space
                 lazy-rules
+                class="inputgreen"
                 v-model="formGroupTarget.level"
                 :options="posLevelOp"
                 option-label="name"
@@ -720,6 +717,7 @@ onMounted(() => {
               <q-input
                 outlined
                 dense
+                class="inputgreen"
                 hide-bottom-space
                 v-model="formGroupTarget.type"
                 label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
@@ -734,6 +732,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
+                class="inputgreen"
                 v-model="formGroupTarget.amount"
                 label="จำนวน(คน)"
                 mask="#"
@@ -775,6 +774,7 @@ onMounted(() => {
               <q-select
                 dense
                 outlined
+                class="inputgreen"
                 v-model="formGroupRelate.relate"
                 :options="peoplesOp"
                 label="ผู้เกี่ยวข้อง"
@@ -795,6 +795,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
+                class="inputgreen"
                 v-model="formGroupRelate.amount"
                 label="จำนวน(คน)"
                 mask="#"
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index 192501bd1..098d461fc 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -20,4 +20,81 @@ interface ResListProject {
   year: number;
 }
 
-export type { ResGroup, ResLevel, ResListProject };
+interface ResDataProject {
+  year: number;
+  projectName: string;
+  reason: string;
+  objective: string;
+  metricType: string;
+  indicators: string;
+  target: string;
+  calculation: string;
+  measuRement: string;
+  results: string;
+  obstacles: string;
+  suggestions: string;
+  project: string;
+  isPassAllocate: boolean;
+  isPassNoAllocate: boolean;
+  isNoPass: boolean;
+  isBudget: boolean;
+  isOutBudget: boolean;
+  dateStart: Date | null;
+  dateEnd: Date | null;
+  totalDate: number | null;
+  address: string;
+  provinceId: string | null;
+  budget: string;
+  accept: number | string | null;
+  receive: number | string | null;
+  approved: number | string | null;
+  budgetPay: number | string | null;
+  issues: string;
+  chance: string;
+  effects: string;
+  riskLevel: string;
+  riskManagement: string;
+  expect: string;
+  topicAcademic: string;
+  addressAcademic: string;
+  provinceActualId: string | null;
+  actualPeoples: ResPeople[];
+  plannedPeoples: ResPeople[];
+  actualGoals: ResActualGoals[];
+  plannedGoals: ResPlannedGoals[];
+}
+
+interface ResPeople {
+  groupTarget: string;
+  amount: number | null;
+}
+
+interface ResActualGoals {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posTypeActualId: string | null;
+  posLevelActualId: string | null;
+  type: string;
+  amount: number | null;
+}
+
+interface ResPlannedGoals {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posTypePlannedId: string | null;
+  posLevelPlannedId: string | null;
+  type: string;
+  amount: number | null;
+}
+
+export type {
+  ResGroup,
+  ResLevel,
+  ResListProject,
+  ResDataProject,
+  ResPeople,
+  ResActualGoals,
+  ResPlannedGoals,
+};