diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index f1a85597f..a516e844f 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -799,6 +799,17 @@ onMounted(async () => {
       <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
         <q-card flat bordered>
           <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
             <q-btn
               flat
               round
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index fae201801..6d2a7df33 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -596,6 +596,17 @@ onMounted(() => {
       <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
         <q-card flat bordered>
           <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              v-if="props.row.isUpload == true"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
             <q-btn
               color="deep-purple"
               icon="mdi-history"
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
index de816c5b1..bdbf6e568 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
@@ -325,7 +325,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -371,7 +370,6 @@ onMounted(() => {
   </div>
 
   <d-table
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :grid="mode === 'card'"
     ref="table"
     row-key="id"
@@ -438,86 +436,60 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
-        <q-card flat bordered class="q-pa-none">
-          <div class="row bg-grey-3">
-            <q-space />
-            <div>
-              <q-btn
-                color="deep-purple"
-                icon="mdi-history"
-                flat
-                round
-                @click.stop.prevent="showHistoryDialog(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขรักษาการในตำแหน่ง</q-tooltip>
-              </q-btn>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click.stop.prevent="showHistoryDialog(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขรักษาการในตำแหน่ง</q-tooltip>
+            </q-btn>
 
-              <q-btn
-                v-if="
-                  isLeave === false && checkPermission($route)?.attrIsUpdate
-                "
-                :color="props.row.commandId ? 'grey-5' : 'edit'"
-                :disable="props.row.commandId !== null"
-                icon="edit"
-                flat
-                round
-                @click.stop.prevent="openEditDialog(props.row)"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-            </div>
-          </div>
+            <q-btn
+              v-if="isLeave === false && checkPermission($route)?.attrIsUpdate"
+              :color="props.row.commandId ? 'grey-5' : 'edit'"
+              :disable="props.row.commandId !== null"
+              icon="edit"
+              flat
+              round
+              @click.stop.prevent="openEditDialog(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </q-card-actions>
           <q-separator />
-          <q-card-section class="q-pa-none">
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                วันที่เริ่มต้น
+
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
               </div>
-              <div class="col-3">
-                {{ props.row.dateStart ? date2Thai(props.row.dateStart) : "-" }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">
-                วันที่สิ้นสุด
-              </div>
-              <div class="col-3">
-                {{ props.row.dateEnd ? date2Thai(props.row.dateEnd) : "-" }}
+              <div class="col">
+                <div
+                  v-if="col.name == 'refCommandNo' && props.row.commandId"
+                  @click="col.value ? openViewCommand(props.row) : null"
+                  :class="
+                    col.value
+                      ? 'table_ellipsis text-blue cursor-pointer'
+                      : 'table_ellipsis'
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
+                  <q-tooltip v-if="col.value">ดูคำสั่ง</q-tooltip>
+                </div>
+                <div v-else>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                {{ empType === "" ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่" }}
-              </div>
-              <div class="col-3">
-                {{ props.row.posNo ? props.row.posNo : "-" }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">ตำแหน่ง</div>
-              <div class="col-3">
-                {{ props.row.position ? props.row.position : "-" }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เลขที่คำสั่ง
-              </div>
-              <div
-                v-if="props.row.commandId"
-                @click="openViewCommand(props.row)"
-                class="col-3 text-blue"
-              >
-                {{ props.row.refCommandNo }}
-                <q-tooltip v-if="props.row.commandId">ดูคำสั่ง</q-tooltip>
-              </div>
-              <div class="col-3" v-else>-</div>
-              <div class="col-3 text-grey-6 text-weight-medium">สถานะ</div>
-              <div class="col-3">
-                {{ props.row.status ? "ใช้งาน" : "-" }}
-              </div>
-            </div>
-            <q-separator />
-          </q-card-section>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
index e2d2472a6..66587ef10 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
@@ -469,7 +469,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="mode == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -515,7 +514,6 @@ onMounted(() => {
   </div>
 
   <d-table
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :grid="mode === 'card'"
     ref="table"
     row-key="id"
@@ -616,102 +614,86 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-6">
-        <q-card flat bordered class="q-pa-none">
-          <div class="row bg-grey-3">
-            <q-space />
-            <div>
-              <q-btn
-                color="deep-purple"
-                icon="mdi-history"
-                flat
-                round
-                @click.stop.prevent="showHistoryDialog(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขรายการช่วยราชการ</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
-                :color="props.row.commandId ? 'grey-5' : 'edit'"
-                :disable="props.row.commandId !== null"
-                icon="edit"
-                flat
-                round
-                @click.stop.prevent="openEditDialog(props.row)"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsUpdate"
-                flat
-                dense
-                round
-                :color="
-                  !props.row.refId || props.row.status !== 'PENDING'
-                    ? 'grey-5'
-                    : 'primary'
-                "
-                :disable="!props.row.refId || props.row.status !== 'PENDING'"
-                icon="mdi-account-arrow-left-outline"
-                @click.stop.prevent="onReturner(props.row.refId)"
-              >
-                <q-tooltip>ส่งตัวกลับ</q-tooltip>
-              </q-btn>
-            </div>
-          </div>
-          <q-separator />
-          <q-card-section class="q-pa-none">
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                หน่วยงานที่ให้ช่วยราชการ
-              </div>
-              <div class="col-9">
-                {{ props.row.agency ? props.row.agency : "-" }}
-              </div>
-            </div>
-            <div class="row q-pa-sm bg-grey-2">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                วันที่เริ่มต้น
-              </div>
-              <div class="col-3">
-                {{ props.row.dateStart ? date2Thai(props.row.dateStart) : "-" }}
-              </div>
-              <div class="col-3 text-grey-6 text-weight-medium">
-                วันที่สิ้นสุด
-              </div>
-              <div class="col-3">
-                {{ props.row.dateEnd ? date2Thai(props.row.dateEnd) : "-" }}
-              </div>
-            </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เลขที่คำสั่ง
-              </div>
-              <div
-                v-if="props.row.commandId"
-                @click="openViewCommand(props.row)"
-                class="col-9 text-blue"
-              >
-                {{ props.row.commandNo }}
-                <q-tooltip v-if="props.row.commandId">ดูคำสั่ง</q-tooltip>
-              </div>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              flat
+              dense
+              round
+              color="green"
+              icon="mdi-file-document-outline"
+              v-if="props.row.isUpload"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click.stop.prevent="showHistoryDialog(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขรายการช่วยราชการ</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
+              :color="props.row.commandId ? 'grey-5' : 'edit'"
+              :disable="props.row.commandId !== null"
+              icon="edit"
+              flat
+              round
+              @click.stop.prevent="openEditDialog(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              dense
+              round
+              :color="
+                !props.row.refId || props.row.status !== 'PENDING'
+                  ? 'grey-5'
+                  : 'primary'
+              "
+              :disable="!props.row.refId || props.row.status !== 'PENDING'"
+              icon="mdi-account-arrow-left-outline"
+              @click.stop.prevent="onReturner(props.row.refId)"
+            >
+              <q-tooltip>ส่งตัวกลับ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
 
-              <div class="col-9" v-else>
-                {{ props.row.commandNo ? props.row.commandNo : "-" }}
+          <q-separator />
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div
+                  v-if="col.name == 'commandNo' && props.row.commandId"
+                  @click="col.value ? openViewCommand(props.row) : null"
+                  :class="
+                    col.value
+                      ? 'table_ellipsis text-blue cursor-pointer'
+                      : 'table_ellipsis'
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
+                  <q-tooltip v-if="col.value">ดูคำสั่ง</q-tooltip>
+                </div>
+                <div v-else>{{ col.value ? col.value : "-" }}</div>
               </div>
             </div>
-            <q-separator />
-            <div class="row q-pa-sm">
-              <div class="col-3 text-grey-6 text-weight-medium">
-                เอกสารอ้างอิง
-              </div>
-              <div class="col-9">
-                {{ props.row.document ? props.row.document : "-" }}
-              </div>
-            </div>
-            <q-separator />
-          </q-card-section>
+          </q-list>
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 7f4b94024..4bce5855f 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -503,6 +503,7 @@ onMounted(async () => {
 
         <q-td auto-width>
           <q-btn
+            v-if="props.row.documentId !== null"
             color="green"
             flat
             dense
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index ff65f9f40..3e021ecc9 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -552,6 +552,17 @@ onMounted(() => {
       <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              v-if="props.row.isUpload == true"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
             <q-btn
               dense
               flat
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index 361f84248..ddea4db6d 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -369,7 +369,6 @@ onMounted(() => {
       </template>
     </q-input>
     <q-select
-      v-if="modelView == 'table'"
       v-model="visibleColumns"
       multiple
       outlined