diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 827f090ff..fc1003668 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -373,11 +373,11 @@ onMounted(() => {
       <q-separator />
     </div>
 
-    <form @submit.prevent="validateForm">
+    <form @submit.prevent="validateForm" class="col-12 row">
       <div class="col-12 row">
         <div class="col-sm-12 col-md-9 row no-wrap">
-          <div class="col-12 row q-pa-md">
-            <div class="row q-col-gutter-md">
+          <div class="col-12 row q-pl-md q-py-md">
+            <div class="row col-12 q-col-gutter-md">
               <div class="col-xs-12 col-sm-4" id="respondentType">
                 <q-select
                   :class="inputEdit(isReadonly)"
@@ -413,7 +413,7 @@ onMounted(() => {
               </div>
 
               <div
-                class="col-xs-12 col-sm-4"
+                class="col-xs-12 col-sm-8"
                 v-if="formData.respondentType === 'ORGANIZATION'"
                 id="organizationId"
               >
@@ -439,7 +439,7 @@ onMounted(() => {
                 />
               </div>
 
-              <div class="col-xs-12 col-sm-4" id="consideredAgency">
+              <div class="col-xs-12 col-sm-8" id="consideredAgency">
                 <q-select
                   :class="inputEdit(isReadonly)"
                   ref="consideredAgencyRef"
@@ -502,87 +502,87 @@ onMounted(() => {
                   </div>
                   <div class="col-12"><q-separator /></div>
 
-                  <div class="col-xs-12 q-pa-sm">
-                    <d-table
-                      ref="table"
-                      :columns="mainStore.columnsRespondent"
-                      :rows="mainStore.rowsAdd"
-                      row-key="idcard"
-                      flat
-                      bordered
-                      :paging="true"
-                      dense
-                      class="custom-header-table"
-                      :visible-columns="mainStore.visibleColumnsRespondent"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th auto-width></q-th>
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
-                          >
-                            <span class="text-weight-medium">{{
-                              col.label
-                            }}</span>
-                          </q-th>
-                          <q-th auto-width></q-th>
-                        </q-tr>
-                      </template>
-                      <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
-                          <td>
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              color="info"
-                              icon="info"
-                              @click="onclickViewinfo(props.row.personId)"
+                  <div class="col-12 row q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="mainStore.columnsRespondent"
+                        :rows="mainStore.rowsAdd"
+                        row-key="idcard"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="col-12"
+                        :visible-columns="mainStore.visibleColumnsRespondent"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th auto-width></q-th>
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                              style="color: #000000; font-weight: 500"
                             >
-                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                            </q-btn>
-                          </td>
-                          <q-td
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div
-                              v-else-if="col.name === 'organization'"
-                              class="table_ellipsis"
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                            <q-th auto-width></q-th>
+                          </q-tr>
+                        </template>
+                        <template v-slot:body="props">
+                          <q-tr :props="props" class="cursor-pointer">
+                            <td>
+                              <q-btn
+                                dense
+                                flat
+                                round
+                                color="info"
+                                icon="info"
+                                @click="onclickViewinfo(props.row.personId)"
+                              >
+                                <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                              </q-btn>
+                            </td>
+                            <q-td
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
                             >
-                              {{ props.row.organization }}
-                            </div>
-                            <div v-else-if="col.name === 'salary'">
-                              {{ props.row.salary.toLocaleString() }}
-                            </div>
-                            <div v-else>
-                              {{ col.value }}
-                            </div>
-                          </q-td>
-                          <q-td auto-width>
-                            <q-btn
-                              v-if="!isReadonly"
-                              size="12px"
-                              flat
-                              round
-                              dense
-                              color="red"
-                              class="q-ml-sm"
-                              icon="mdi-delete-outline"
-                              @click="deletePerson(props.row.personId)"
-                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                            >
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </d-table>
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+                              <div
+                                v-else-if="col.name === 'organization'"
+                                class="table_ellipsis"
+                              >
+                                {{ props.row.organization }}
+                              </div>
+                              <div v-else-if="col.name === 'salary'">
+                                {{ props.row.salary.toLocaleString() }}
+                              </div>
+                              <div v-else>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                            <q-td auto-width>
+                              <q-btn
+                                v-if="!isReadonly"
+                                size="12px"
+                                flat
+                                round
+                                dense
+                                color="red"
+                                class="q-ml-sm"
+                                icon="mdi-delete-outline"
+                                @click="deletePerson(props.row.personId)"
+                                ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                              >
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
                   </div>
                 </q-card>
               </div>
@@ -883,7 +883,7 @@ onMounted(() => {
               </div>
             </div>
           </div>
-          <div class="col-12 row"><q-separator vertical /></div>
+          <div class="row"><q-separator vertical /></div>
         </div> 
         
         <!-- อัพโหลดไฟล์ -->
@@ -902,82 +902,90 @@ onMounted(() => {
                     }}
                   </div>
                   <div class="col-12"><q-separator /></div>
-
-                  <div
-                    v-if="!isReadonly && formData.id !== ''"
-                    class="col-12 q-pa-sm row"
-                  >
-                    <q-file
-                      for="inputFiles"
-                      class="col-12"
-                      outlined
-                      dense
-                      v-model="formData.documentFile"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารหลักฐาน"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.docx,.png,.jpg"
-                      clearable
+                  <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+                    <div
+                      v-if="!isReadonly && formData.id !== ''"
+                      class="col-12 row"
                     >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" color="primary" />
-                      </template>
-                      <template v-slot:after>
-                        <q-btn
-                        size="14px"
-                        flat
-                        round
+                      <q-file
+                        for="inputFiles"
+                        class="col-12"
+                        outlined
                         dense
-                        color="add"
-                        icon="mdi-upload"
-                        @click="upLoadFileDoc()"
-                        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
-                      </template>
-                    </q-file>
-
-                    <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
-                  </div>
-
-                  <div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row">
-                    <q-list
-                      v-for="data in fileList"
-                      :key="data.id"
-                      class="full-width"
-                      bordered
-                      separator
-                    >
-                      <q-item clickable v-ripple>
-                        <q-item-section>{{ data.fileName }}</q-item-section>
-                        <q-space />
-                        <q-btn
-                          size="12px"
+                        v-model="formData.documentFile"
+                        @added="fileUploadDoc"
+                        label="ไฟล์เอกสารหลักฐาน"
+                        hide-bottom-space
+                        lazy-rules
+                        accept=".pdf,.xlsx,.docx,.png,.jpg"
+                        clearable
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" color="primary" />
+                        </template>
+                        <template v-slot:after>
+                          <q-btn
+                          size="14px"
+                          v-if="formData.documentFile"
                           flat
                           round
                           dense
-                          color="blue"
-                          icon="mdi-download"
-                          @click="downloadFile(data.pathName)"
-                          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                        >
-                        <q-btn
-                          v-if="!isReadonly"
-                          size="12px"
-                          flat
-                          round
-                          dense
-                          color="red"
-                          class="q-ml-sm"
-                          icon="mdi-delete-outline"
-                          @click="deleteFile(data.id)"
-                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                        >
-                      </q-item>
-                    </q-list>
-                  </div>
+                          color="add"
+                          icon="mdi-upload"
+                          @click="upLoadFileDoc()"
+                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                        </template>
+                      </q-file>
 
-                  <div class="col-12 q-pa-sm" v-else>
-                    <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                      <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+                    </div>
+
+                    <div v-if="fileList.length > 0" class="col-xs-12 row">
+                      <q-list
+                        class="full-width rounded-borders"
+                        bordered
+                        separator
+                      >
+                        <q-item 
+                          clickable 
+                          v-ripple 
+                          v-for="data in fileList"
+                          :key="data.id"
+                          class="items-center"
+                          >
+                          <q-item-section>{{ data.fileName }}</q-item-section>
+                          <q-space />
+                          <div>
+                            <q-btn
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="blue"
+                              icon="mdi-download"
+                              @click="downloadFile(data.pathName)"
+                              ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                            >
+                            <q-btn
+                              v-if="!isReadonly"
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              class="q-ml-sm"
+                              icon="mdi-delete-outline"
+                              @click="deleteFile(data.id)"
+                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                            >
+                          </div>
+                        </q-item>
+                      </q-list>
+                    </div>
+
+                    <div class="col-12" v-else>
+                      <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                    </div>
                   </div>
                 </q-card>
               </div>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 52fabe4dd..1bddcd329 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -655,229 +655,225 @@ onMounted(async () => {
       </q-banner>
       <q-separator />
     </div>
-    <form @submit.prevent="validateForm">
+    <form @submit.prevent="validateForm" class="col-12 row">
       <div class="col-12 row">
         <div class="col-sm-12 col-md-9 row no-wrap">
-          <div class="col-12 row q-pa-md">
-            <div class="row q-col-gutter-md">
-              <div class="col-xs-12 row q-col-gutter-md">
-                <div class="col-xs-12 col-sm-3" id="respondentType">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="SelectrespondentType"
-                    v-model="formData.respondentType"
-                    ref="respondentTypeRef"
-                    dense
-                    outlined
-                    :readonly="isReadonly"
-                    label="ผู้ถูกร้องเรียน"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    use-input
-                    map-options
-                    hide-bottom-space
-                    :options="investigateFactStore.respondentTypeOps"
-                    @filter="(inputValue: any,
-                doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
-                )"
-                    @update:model-value="changeFormData()"
-                  >
-                    <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-xs-12 col-sm-3"
-                  v-if="formData.respondentType === 'ORGANIZATION'"
-                  id="organizationId"
+          <div class="col-12 row q-pl-md q-py-md">
+            <div class="row col-12 q-col-gutter-md">
+              <div class="col-xs-12 col-sm-5" id="respondentType">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
+                  dense
+                  outlined
+                  :readonly="isReadonly"
+                  label="ผู้ถูกร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  use-input
+                  map-options
+                  hide-bottom-space
+                  :options="investigateFactStore.respondentTypeOps"
+                  @filter="(inputValue: any,
+              doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
+              )"
+                  @update:model-value="changeFormData()"
                 >
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="inputOffice"
-                    name="organizationId"
-                    ref="organizationIdRef"
-                    dense
-                    hide-bottom-space
-                    :readonly="isReadonly"
-                    outlined
-                    option-label="name"
-                    option-value="id"
-                    emit-value
-                    map-options
-                    v-model="formData.organizationId"
-                    :options="investigateFactStore.organizationIdOp"
-                    label="เลือกสำนักงาน"
-                    clearable
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-                <div
-                  class="col-xs-12 col-sm-4"
-                  v-if="
-                    route.name === 'disciplineInvestigatefactsEdit' &&
-                    mainStore.rowsCheck.length > 0
-                  "
-                >
-                  <q-btn
-                    class="q-pa-sm"
-                    color="orange"
-                    label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
-                    @click="openModal"
-                  />
-                </div>
-                <div
-                  class="row col-12"
-                  v-if="formData.respondentType === 'PERSON'"
-                >
-                  <q-card
-                    bordered
-                    class="row col-12"
-                    style="border: 1px solid #d6dee1"
-                  >
-                    <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                    >
-                      ผู้ถูกร้องเรียน
-                      <q-btn
-                        v-if="!isReadonly"
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="add"
-                        class="q-ml-sm"
-                        @click="toggleModal"
-                        icon="mdi-plus"
-                      >
-                        <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
-                      </q-btn>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-xs-12 q-pa-sm">
-                      <d-table
-                        ref="table"
-                        :columns="mainStore.columnsRespondent"
-                        :rows="mainStore.rowsAdd"
-                        row-key="idcard"
-                        flat
-                        bordered
-                        :paging="true"
-                        dense
-                        class="custom-header-table"
-                        :visible-columns="mainStore.visibleColumnsRespondent"
-                      >
-                        <template v-slot:header="props">
-                          <q-tr :props="props">
-                            <q-th auto-width></q-th>
-                            <q-th
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                              style="color: #000000; font-weight: 500"
-                            >
-                              <span class="text-weight-medium">{{
-                                col.label
-                              }}</span>
-                            </q-th>
-                            <q-th auto-width></q-th>
-                          </q-tr>
-                        </template>
-                        <template v-slot:body="props">
-                          <q-tr :props="props" class="cursor-pointer">
-                            <td>
-                              <q-btn
-                                dense
-                                flat
-                                round
-                                color="info"
-                                icon="info"
-                                @click="onclickViewinfo(props.row.personId)"
-                              >
-                                <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                              </q-btn>
-                            </td>
-                            <q-td
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                            >
-                              <div v-if="col.name == 'no'">
-                                {{ props.rowIndex + 1 }}
-                              </div>
-                              <div
-                                v-else-if="col.name === 'organization'"
-                                class="table_ellipsis"
-                              >
-                                {{ props.row.organization }}
-                              </div>
-                              <div v-else-if="col.name === 'salary'">
-                                {{ props.row.salary.toLocaleString() }}
-                              </div>
-                              <div v-else>
-                                {{ col.value }}
-                              </div>
-                            </q-td>
-                            <q-td auto-width>
-                              <q-btn
-                                v-if="!isReadonly && props.row.isAncestorDNA === false"
-                                size="12px"
-                                flat
-                                round
-                                dense
-                                color="red"
-                                class="q-ml-sm"
-                                icon="mdi-delete-outline"
-                                @click="deletePerson(props.row.personId)"
-                                ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                              >
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </d-table>
-                    </div>
-                  </q-card>
-                </div>
-
-                <div class="col-xs-12 col-sm-3">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    for="#investigationDetail"
-                    outlined
-                    hide-bottom-space
-                    dense
-                    ref="investigationDetailRef"
-                    v-model="formData.investigationDetail"
-                    :options="investigateFactStore.investigationDetailOp"
-                    label="ลักษณะการสืบสวน"
-                    emit-value
-                    map-options
-                    clearable
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
-        )"
-                    @update:model-value="changeFormData()"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
+                  <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-xs-12 col-sm-7"
+                v-if="formData.respondentType === 'ORGANIZATION'"
+                id="organizationId"
+              >
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
+                  dense
+                  hide-bottom-space
+                  :readonly="isReadonly"
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="investigateFactStore.organizationIdOp"
+                  label="เลือกสำนักงาน"
+                  clearable
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+              <div
+                class="col-xs-12 col-sm-4"
+                v-if="
+                  route.name === 'disciplineInvestigatefactsEdit' &&
+                  mainStore.rowsCheck.length > 0
+                "
+              >
+                <q-btn
+                  class="q-pa-sm"
+                  color="orange"
+                  label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
+                  @click="openModal"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-5">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  for="#investigationDetail"
+                  outlined
+                  hide-bottom-space
+                  dense
+                  ref="investigationDetailRef"
+                  v-model="formData.investigationDetail"
+                  :options="investigateFactStore.investigationDetailOp"
+                  label="ลักษณะการสืบสวน"
+                  emit-value
+                  map-options
+                  clearable
+                  option-label="name"
+                  option-value="id"
+                  use-input
+                  @filter="(inputValue: any,
+      doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
+      )"
+                  @update:model-value="changeFormData()"
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div
+                class="row col-12"
+                v-if="formData.respondentType === 'PERSON'"
+              >
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ผู้ถูกร้องเรียน
+                    <q-btn
+                      v-if="!isReadonly"
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      @click="toggleModal"
+                      icon="mdi-plus"
+                    >
+                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm">
+                    <d-table
+                      ref="table"
+                      :columns="mainStore.columnsRespondent"
+                      :rows="mainStore.rowsAdd"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="mainStore.visibleColumnsRespondent"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width></q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <td>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              color="info"
+                              icon="info"
+                              @click="onclickViewinfo(props.row.personId)"
+                            >
+                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                            </q-btn>
+                          </td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div
+                              v-else-if="col.name === 'organization'"
+                              class="table_ellipsis"
+                            >
+                              {{ props.row.organization }}
+                            </div>
+                            <div v-else-if="col.name === 'salary'">
+                              {{ props.row.salary.toLocaleString() }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              v-if="!isReadonly && props.row.isAncestorDNA === false"
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              class="q-ml-sm"
+                              icon="mdi-delete-outline"
+                              @click="deletePerson(props.row.personId)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
+              </div>
               <div
                 v-if="formData.investigationDetail === 'OTHER'"
                 class="col-12"
@@ -1368,7 +1364,7 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-          <div class="col-12 row"><q-separator vertical /></div> 
+          <div class="row"><q-separator vertical /></div> 
         </div>
         <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="q-col-gutter-md row q-pa-md">
@@ -1378,87 +1374,91 @@ onMounted(async () => {
                   อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
                 </div>
                 <div class="col-12"><q-separator /></div>
-
-                <div
-                  v-if="!isReadonly && formData.id !== ''"
-                  class="col-12 q-pa-sm row"
-                >
-                  <q-file
-                    class="col-11"
-                    for="#evidenceFiles"
-                    outlined
-                    dense
-                    v-model="formData.evidenceFiles"
-                    label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
-                    hide-bottom-space
+                <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+                  <div
+                    v-if="!isReadonly && formData.id !== ''"
+                    class="col-12 row"
                   >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" color="primary" />
-                    </template>
-                    <template v-slot:after>
-                        <q-btn
-                          v-if="formData.evidenceFiles"
-                          size="14px"
-                          flat
-                          round
-                          dense
-                          color="add"
-                          icon="mdi-upload"
-                          @click="uploadFileRelevant"
-                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn>
-                    </template>
-                  </q-file>
-                </div>
-
-                <div
-                  v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
-                  class="col-xs-12 q-pa-sm row"
-                >
-                  <q-list
-                    v-for="file in props.data.disciplineInvestigateRelevantDocs"
-                    :key="file.id"
-                    class="full-width"
-                    bordered
-                    separator
+                    <q-file
+                      class="col-12"
+                      for="#evidenceFiles"
+                      outlined
+                      dense
+                      v-model="formData.evidenceFiles"
+                      label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
+                      hide-bottom-space
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" color="primary" />
+                      </template>
+                      <template v-slot:after>
+                          <q-btn
+                            v-if="formData.evidenceFiles"
+                            size="14px"
+                            flat
+                            round
+                            dense
+                            color="add"
+                            icon="mdi-upload"
+                            @click="uploadFileRelevant"
+                            ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn>
+                      </template>
+                    </q-file>
+                  </div>
+                
+                  <div
+                    v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
+                    class="col-xs-12 row"
                   >
-                    <q-item clickable v-ripple>
-                      <q-item-section>{{ file.fileName }}</q-item-section>
-                      <q-item-section avatar>
-                        <div class="row">
-                          <div>
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="blue"
-                              icon="mdi-download-outline"
-                              @click="downloadFileRelevant(file.pathName)"
-                            >
-                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                            </q-btn>
+                    <q-list
+                      class="full-width rounded-borders"
+                      bordered
+                      separator
+                    >
+                      <q-item 
+                        v-for="file in props.data.disciplineInvestigateRelevantDocs"
+                        :key="file.id"
+                        clickable 
+                        v-ripple
+                        >
+                        <q-item-section>{{ file.fileName }}</q-item-section>
+                        <q-item-section avatar>
+                          <div class="row">
+                            <div>
+                              <q-btn
+                                dense
+                                flat
+                                round
+                                size="12px"
+                                color="blue"
+                                icon="mdi-download-outline"
+                                @click="downloadFileRelevant(file.pathName)"
+                              >
+                                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                              </q-btn>
+                            </div>
+                            <div>
+                              <q-btn
+                                v-if="!isReadonly"
+                                dense
+                                flat
+                                round
+                                size="12px"
+                                color="red"
+                                icon="mdi-delete-outline"
+                                @click="deleteFileRelevant(file.id)"
+                                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                              >
+                            </div>
                           </div>
-                          <div>
-                            <q-btn
-                              v-if="!isReadonly"
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="red"
-                              icon="mdi-delete-outline"
-                              @click="deleteFileRelevant(file.id)"
-                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </div>
 
-                <div class="col-12 q-pa-sm" v-else>
-                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                  <div class="col-12" v-else>
+                    <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                  </div>
                 </div>
               </q-card>
             </div>
@@ -1468,90 +1468,93 @@ onMounted(async () => {
                   อัปโหลดไฟล์เอกสารหลักฐาน
                 </div>
                 <div class="col-12"><q-separator /></div>
-                <div
-                  v-if="!isReadonly && formData.id !== ''"
-                  class="col-12 q-pa-sm row"
-                >
-                  <q-file
-                    for="inputFiles"
-                    class="col-11"
-                    outlined
-                    dense
-                    v-model="formData.documentFile"
-                    @added="uploadFile"
-                    label="ไฟล์เอกสารหลักฐาน"
-                    accept=".pdf,.xlsx,.doc"
-                    clearable
+                <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+                  <div
+                    v-if="!isReadonly && formData.id !== ''"
+                    class="col-12 row"
                   >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" color="primary" />
-                    </template>
-                  </q-file>
-
-                  <div class="col-1 self-center">
-                    <q-btn
-                      v-if="formData.documentFile"
-                      size="14px"
-                      flat
-                      round
+                    <q-file
+                      for="inputFiles"
+                      class="col-12"
+                      outlined
                       dense
-                      color="add"
-                      icon="mdi-upload"
-                      @click="uploadFile"
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                      v-model="formData.documentFile"
+                      @added="uploadFile"
+                      label="ไฟล์เอกสารหลักฐาน"
+                      accept=".pdf,.xlsx,.doc"
+                      clearable
                     >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" color="primary" />
+                      </template>
+                      <template v-slot:after>
+                        <q-btn
+                        v-if="formData.documentFile"
+                        size="14px"
+                        flat
+                        round
+                        dense
+                        color="add"
+                        icon="mdi-upload"
+                        @click="uploadFile"
+                        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                        >
+                      </template>
+                    </q-file>
                   </div>
-                </div>
 
-                <div
-                  v-if="props.data.disciplineInvestigateDocs.length > 0"
-                  class="col-xs-12 q-pa-sm row"
-                >
-                  <q-list
-                    v-for="file in props.data.disciplineInvestigateDocs"
-                    :key="file.id"
-                    class="full-width"
-                    bordered
-                    separator
+                  <div
+                    v-if="props.data.disciplineInvestigateDocs.length > 0"
+                    class="col-xs-12 row"
                   >
-                    <q-item clickable v-ripple>
-                      <q-item-section>{{ file.fileName }}</q-item-section>
-                      <q-item-section avatar>
-                        <div class="row">
-                          <div>
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="blue"
-                              icon="mdi-download-outline"
-                              @click="downloadFile(file.pathName)"
-                            >
-                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                            </q-btn>
+                    <q-list
+                      class="full-width rounded-borders"
+                      bordered
+                      separator
+                    >
+                      <q-item 
+                        v-for="file in props.data.disciplineInvestigateDocs"
+                        :key="file.id"
+                        clickable 
+                        v-ripple>
+                        <q-item-section>{{ file.fileName }}</q-item-section>
+                        <q-item-section avatar>
+                          <div class="row">
+                            <div>
+                              <q-btn
+                                dense
+                                flat
+                                round
+                                size="12px"
+                                color="blue"
+                                icon="mdi-download-outline"
+                                @click="downloadFile(file.pathName)"
+                              >
+                                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                              </q-btn>
+                            </div>
+                            <div>
+                              <q-btn
+                                v-if="!isReadonly"
+                                dense
+                                flat
+                                round
+                                size="12px"
+                                color="red"
+                                icon="mdi-delete-outline"
+                                @click="deleteFile(file.id)"
+                                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                              >
+                            </div>
                           </div>
-                          <div>
-                            <q-btn
-                              v-if="!isReadonly"
-                              dense
-                              flat
-                              round
-                              size="12px"
-                              color="red"
-                              icon="mdi-delete-outline"
-                              @click="deleteFile(file.id)"
-                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </div>
 
-                <div class="col-12 q-pa-sm" v-else>
-                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                  <div class="col-12" v-else>
+                    <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                  </div>
                 </div>
               </q-card>
             </div>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index f691cf4d4..cc013c673 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -696,87 +696,86 @@ onMounted(async () => {
       </q-banner>
       <q-separator />
     </div>
-    <form @submit.prevent="validateForm">
+    <form @submit.prevent="validateForm" class="col-12 row">
       <div class="col-12 row">
         <div class="col-sm-12 col-md-9 row no-wrap">
           
-          <div class="col-12 row q-pa-md">
-            <div class="row q-col-gutter-md">
-              <div class="row col-12 q-col-gutter-x-md">
-                <div class="col-xs-12 col-sm-4">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    for="SelectrespondentType"
-                    v-model="formData.respondentType"
-                    ref="respondentTypeRef"
-                    dense
-                    outlined
-                    label="ผู้ถูกร้องเรียน"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    use-input
-                    map-options
-                    hide-bottom-space
-                    :options="complainstStore.complainantoptions"
-                    @update:model-value="
-                      selectComplainant(formData.respondentType);
-                      changeFormData();
-                    "
-                    @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
-              )"
-                  >
-                    <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-xs-12 col-sm-4"
-                  v-if="formData.respondentType === 'ORGANIZATION'"
-                  id="organizationId"
-                >
-                  <q-select
-                    :readonly="isReadonly"
-                    for="inputOffice"
-                    name="organizationId"
-                    ref="organizationIdRef"
-                    dense
-                    hide-bottom-space
-                    outlined
-                    option-label="name"
-                    option-value="id"
-                    emit-value
-                    map-options
-                    v-model="formData.organizationId"
-                    :options="organizationOption"
-                    label="เลือกสำนักงาน"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-                <div
-                  class="col-xs-12 col-sm-4"
-                  v-if="
-                    route.name === 'disciplineDisciplinaryEdit' &&
-                    props.data &&
-                    props.data.status === 'NEW' &&
-                    mainStore.rowsCheck.length > 0
+          <div class="col-12 row q-pl-md q-py-md">
+            <div class="row col-12 q-col-gutter-md">
+              <div class="col-xs-12 col-sm-4">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
+                  dense
+                  outlined
+                  label="ผู้ถูกร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  use-input
+                  map-options
+                  hide-bottom-space
+                  :options="complainstStore.complainantoptions"
+                  @update:model-value="
+                    selectComplainant(formData.respondentType);
+                    changeFormData();
                   "
+                  @filter="(inputValue: any,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
+            )"
                 >
-                  <q-btn
-                    class="q-pa-sm"
-                    color="orange"
-                    label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
-                    @click="openModal"
-                  />
-                </div>
+                  <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-xs-12 col-sm-8"
+                v-if="formData.respondentType === 'ORGANIZATION'"
+                id="organizationId"
+              >
+                <q-select
+                  :readonly="isReadonly"
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="organizationOption"
+                  label="เลือกสำนักงาน"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+              <div
+                class="col-xs-12 col-sm-4"
+                v-if="
+                  route.name === 'disciplineDisciplinaryEdit' &&
+                  props.data &&
+                  props.data.status === 'NEW' &&
+                  mainStore.rowsCheck.length > 0
+                "
+              >
+                <q-btn
+                  class="q-pa-sm"
+                  color="orange"
+                  label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
+                  @click="openModal"
+                  outline
+                />
               </div>
               <div
                 class="row col-12"
@@ -891,250 +890,248 @@ onMounted(async () => {
                 </q-card>
               </div>
 
-              <div class="row col-12 q-col-gutter-x-md">
-                <datepicker
-                  :readonly="isReadonly"
-                  menu-class-name="modalfix"
-                  for="#dateAllegation"
-                  v-model="formData.disciplinaryDateInvestigation"
-                  class="col-xs-12 col-sm-3"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="changeFormData()"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="isReadonly"
-                      outlined
-                      dense
-                      :class="inputEdit(isReadonly)"
-                      hide-bottom-space
-                      :model-value="
-                        formData.disciplinaryDateInvestigation != null
-                          ? date2Thai(formData.disciplinaryDateInvestigation)
-                          : null
-                      "
-                      :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="
-                          formData.disciplinaryDateInvestigation &&
-                          isReadonly === false
-                        "
-                        v-slot:append
+              <datepicker
+                :readonly="isReadonly"
+                menu-class-name="modalfix"
+                for="#dateAllegation"
+                v-model="formData.disciplinaryDateInvestigation"
+                class="col-xs-12 col-sm-3"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeFormData()"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :readonly="isReadonly"
+                    outlined
+                    dense
+                    :class="inputEdit(isReadonly)"
+                    hide-bottom-space
+                    :model-value="
+                      formData.disciplinaryDateInvestigation != null
+                        ? date2Thai(formData.disciplinaryDateInvestigation)
+                        : null
+                    "
+                    :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
                       >
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="
-                            formData.disciplinaryDateInvestigation = null
-                          "
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="
+                        formData.disciplinaryDateInvestigation &&
+                        isReadonly === false
+                      "
+                      v-slot:append
+                    >
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="
+                          formData.disciplinaryDateInvestigation = null
+                        "
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
 
-                <datepicker
-                  :readonly="isReadonly"
-                  menu-class-name="modalfix"
-                  for="#dateAllegation"
-                  v-model="formData.disciplinaryDateAllegation"
-                  class="col-xs-12 col-sm-3"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="changeFormData()"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="isReadonly"
-                      ref="disciplinaryDateAllegationRef"
-                      outlined
-                      :class="inputEdit(isReadonly)"
-                      dense
-                      hide-bottom-space
-                      :model-value="
-                        formData.disciplinaryDateAllegation != null
-                          ? date2Thai(formData.disciplinaryDateAllegation)
-                          : null
-                      "
-                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="
-                          formData.disciplinaryDateAllegation &&
-                          isReadonly === false
-                        "
-                        v-slot:append
+              <datepicker
+                :readonly="isReadonly"
+                menu-class-name="modalfix"
+                for="#dateAllegation"
+                v-model="formData.disciplinaryDateAllegation"
+                class="col-xs-12 col-sm-3"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeFormData()"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :readonly="isReadonly"
+                    ref="disciplinaryDateAllegationRef"
+                    outlined
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    hide-bottom-space
+                    :model-value="
+                      formData.disciplinaryDateAllegation != null
+                        ? date2Thai(formData.disciplinaryDateAllegation)
+                        : null
+                    "
+                    :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
                       >
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="
-                            formData.disciplinaryDateAllegation = null
-                          "
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <datepicker
-                  :readonly="isReadonly"
-                  menu-class-name="modalfix"
-                  for="#dateEvident"
-                  v-model="formData.disciplinaryDateEvident"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-3"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="changeFormData()"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="isReadonly"
-                      ref="disciplinaryDateEvidentRef"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      :class="inputEdit(isReadonly)"
-                      :model-value="
-                        formData.disciplinaryDateEvident != null
-                          ? date2Thai(formData.disciplinaryDateEvident)
-                          : null
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="
+                        formData.disciplinaryDateAllegation &&
+                        isReadonly === false
                       "
-                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                      v-slot:append
                     >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="
-                          formData.disciplinaryDateEvident &&
-                          isReadonly === false
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="
+                          formData.disciplinaryDateAllegation = null
                         "
-                        v-slot:append
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                :readonly="isReadonly"
+                menu-class-name="modalfix"
+                for="#dateEvident"
+                v-model="formData.disciplinaryDateEvident"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-3"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeFormData()"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :readonly="isReadonly"
+                    ref="disciplinaryDateEvidentRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    :class="inputEdit(isReadonly)"
+                    :model-value="
+                      formData.disciplinaryDateEvident != null
+                        ? date2Thai(formData.disciplinaryDateEvident)
+                        : null
+                    "
+                    :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
                       >
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="
-                            formData.disciplinaryDateEvident = null
-                          "
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              
-                <datepicker
-                  :readonly="isReadonly"
-                  menu-class-name="modalfix"
-                  for="#dateResult"
-                  v-model="formData.disciplinaryDateResult"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-3"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="changeFormData()"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="
+                        formData.disciplinaryDateEvident &&
+                        isReadonly === false
+                      "
+                      v-slot:append
+                    >
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="
+                          formData.disciplinaryDateEvident = null
+                        "
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            
+              <datepicker
+                :readonly="isReadonly"
+                menu-class-name="modalfix"
+                for="#dateResult"
+                v-model="formData.disciplinaryDateResult"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-3"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeFormData()"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
 
-                  <template #trigger>
-                    <q-input
-                      :readonly="isReadonly"
-                      ref="disciplinaryDateResultRef"
-                      outlined
-                      :class="inputEdit(isReadonly)"
-                      dense
-                      hide-bottom-space
-                      :model-value="
-                        formData.disciplinaryDateResult != null
-                          ? date2Thai(formData.disciplinaryDateResult)
-                          : null
-                      "
-                      :label="`${'วันที่รายงานผลการสอบสวน'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="
-                          formData.disciplinaryDateResult &&
-                          isReadonly === false
-                        "
-                        v-slot:append
+                <template #trigger>
+                  <q-input
+                    :readonly="isReadonly"
+                    ref="disciplinaryDateResultRef"
+                    outlined
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    hide-bottom-space
+                    :model-value="
+                      formData.disciplinaryDateResult != null
+                        ? date2Thai(formData.disciplinaryDateResult)
+                        : null
+                    "
+                    :label="`${'วันที่รายงานผลการสอบสวน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
                       >
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="
-                            formData.disciplinaryDateResult = null
-                          "
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="
+                        formData.disciplinaryDateResult &&
+                        isReadonly === false
+                      "
+                      v-slot:append
+                    >
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="
+                          formData.disciplinaryDateResult = null
+                        "
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
               <div class="row col-12">
                 <q-card
                   bordered
@@ -1508,86 +1505,84 @@ onMounted(async () => {
                   </div>
                 </q-card>
               </div>
-              <div class="row col-12 q-col-gutter-sm">
-                <div class="col-xs-12 col-sm-3">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    dense
-                    outlined
-                    ref="disciplinaryCaseFaultRef"
-                    v-model="formData.disciplinaryCaseFault"
-                    for="#casefault"
-                    label="กรณีมีความผิด"
-                    hide-bottom-space
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
+              <div class="col-xs-12 col-sm-3">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  dense
+                  outlined
+                  ref="disciplinaryCaseFaultRef"
+                  v-model="formData.disciplinaryCaseFault"
+                  for="#casefault"
+                  label="กรณีมีความผิด"
+                  hide-bottom-space
+                  @update:model-value="changeFormData()"
+                />
+              </div>
 
-                <div class="col-xs-12 col-sm-3">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    dense
-                    hide-bottom-space
-                    outlined
-                    for="#whereInvestigate"
-                    ref="disciplinaryInvestigateAtRef"
-                    v-model="formData.disciplinaryInvestigateAt"
-                    label="สอบสวนที่"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
+              <div class="col-xs-12 col-sm-3">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  for="#whereInvestigate"
+                  ref="disciplinaryInvestigateAtRef"
+                  v-model="formData.disciplinaryInvestigateAt"
+                  label="สอบสวนที่"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
 
-                <div class="col-xs-12 col-sm-3">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    dense
-                    outlined
-                    for="#faultLevel"
-                    ref="disciplinaryFaultLevelRef"
-                    v-model="formData.disciplinaryFaultLevel"
-                    option-label="name"
-                    option-value="id"
-                    emit-value
-                    map-options
-                    hide-bottom-space
-                    :options="investigateDis.optionsfaultLevel"
-                    label="ระดับโทษความผิด"
-                    group-label="group"
-                    group-values="options"
-                    clearable
-                    @update:model-value="changeFormData()"
-                  >
-                  </q-select>
-                </div>
-                <div
-                  class="col-3"
-                  v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'"
+              <div class="col-xs-12 col-sm-3">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  dense
+                  outlined
+                  for="#faultLevel"
+                  ref="disciplinaryFaultLevelRef"
+                  v-model="formData.disciplinaryFaultLevel"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  :options="investigateDis.optionsfaultLevel"
+                  label="ระดับโทษความผิด"
+                  group-label="group"
+                  group-values="options"
+                  clearable
+                  @update:model-value="changeFormData()"
                 >
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    outlined
-                    dense
-                    label="ระดับโทษความผิดอื่นๆ"
-                    v-model="formData.disciplinaryFaultLevelOther"
-                  />
-                </div>
-                <div class="col-xs-12 col-sm-3">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    dense
-                    for="#refLaw"
-                    hide-bottom-space
-                    outlined
-                    ref="disciplinaryRefLawRef"
-                    v-model="formData.disciplinaryRefLaw"
-                    label="อ้างอิงมาตราตามกฎหมาย"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
+                </q-select>
+              </div>
+              <div
+                class="col-3"
+                v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'"
+              >
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  outlined
+                  dense
+                  label="ระดับโทษความผิดอื่นๆ"
+                  v-model="formData.disciplinaryFaultLevelOther"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-3">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  dense
+                  for="#refLaw"
+                  hide-bottom-space
+                  outlined
+                  ref="disciplinaryRefLawRef"
+                  v-model="formData.disciplinaryRefLaw"
+                  label="อ้างอิงมาตราตามกฎหมาย"
+                  @update:model-value="changeFormData()"
+                />
               </div>
 
               <div class="col-xs-12 col-sm-6">
@@ -1751,11 +1746,11 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-          <div class="col-12 row"><q-separator vertical /></div> 
+          <div class="row"><q-separator vertical /></div> 
         </div>
 
         <!-- อัพโหลดไฟล์ -->
-        <div class="col-sm-12 col-md-3 q-col-gutter-md q-pa-md">
+        <div class="col-sm-12 col-md-3 q-col-gutter-y-md q-pa-md">
           <!-- ยังไม่มี api  -->
           <UploadFile
             title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
diff --git a/src/modules/11_discipline/components/4_Result/Form.vue b/src/modules/11_discipline/components/4_Result/Form.vue
index 4e919f9dd..466d897c1 100644
--- a/src/modules/11_discipline/components/4_Result/Form.vue
+++ b/src/modules/11_discipline/components/4_Result/Form.vue
@@ -259,7 +259,7 @@ function updatemodalPersonal(modal: boolean) {
 }
 </script>
 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row col-12 bg-white">
     <div v-if="isSave" class=" col-12">
       <q-banner
         inline-actions
@@ -272,341 +272,338 @@ function updatemodalPersonal(modal: boolean) {
       </q-banner>
       <q-separator />
     </div>
-    
       
-      <form @submit.prevent="validateForm">
-        <q-card bordered>
-          <div class="col-12 row">
-            <div class="col-sm-12 col-md-9 row no-wrap">
-              <div class="row col-12 q-pa-md">
-                <div class="row q-col-gutter-md">
-                  
-                  <div class="col-xs-12 col-sm-4">
-                    <q-select
-                      readonly
-                      for="SelectrespondentType"
-                      v-model="respondentType"
-                      ref="respondentTypeRef"
-                      dense
-                      outlined
-                      label="ผู้ถูกร้องเรียน"
-                      option-value="id"
-                      option-label="name"
-                      emit-value
-                      use-input
-                      map-options
-                      hide-bottom-space
-                      :options="dataStore.complainantoptions"
-                      @update:model-value="selectComplainant(respondentType)"
-                      @filter="(inputValue: any,
-                    doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
-                    )"
-                    >
-                      <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-xs-12 col-sm-3"
-                    v-if="respondentType === 'ORGANIZATION'"
-                    id="organizationId"
-                  >
-                    <q-select
-                      for="inputOffice"
-                      name="organizationId"
-                      ref="organizationIdRef"
-                      dense
-                      hide-bottom-space
-                      outlined
-                      option-label="name"
-                      option-value="id"
-                      emit-value
-                      map-options
-                      v-model="organizationId"
-                      :options="organizationOption"
-                      label="เลือกสำนักงาน"
-                    />
-                  </div>
-                  <div class="row col-12" v-if="respondentType === 'PERSON'">
-                    <q-card
-                      bordered
-                      class="row col-12"
-                      style="border: 1px solid #d6dee1"
-                    >
-                      <div
-                        class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                      >
-                        ผู้ถูกร้องเรียน
-                      </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="col-xs-12 q-pa-sm">
-                        <d-table
-                          ref="table"
-                          :columns="mainStore.columnsRespondent"
-                          :rows="mainStore.rowsAdd"
-                          row-key="idcard"
-                          flat
-                          bordered
-                          :paging="true"
-                          dense
-                          class="custom-header-table"
-                          :visible-columns="mainStore.visibleColumnsRespondent"
-                        >
-                          <template v-slot:header="props">
-                            <q-tr :props="props">
-                              <q-th auto-width></q-th>
-                              <q-th
-                                v-for="col in props.cols"
-                                :key="col.name"
-                                :props="props"
-                                style="color: #000000; font-weight: 500"
-                              >
-                                <span class="text-weight-medium">{{
-                                  col.label
-                                }}</span>
-                              </q-th>
-                            </q-tr>
-                          </template>
-                          <template v-slot:body="props">
-                            <q-tr :props="props" class="cursor-pointer">
-                              <td>
-                                <q-btn
-                                  dense
-                                  flat
-                                  round
-                                  color="info"
-                                  icon="info"
-                                  @click="onclickViewinfo(props.row.personId)"
-                                >
-                                  <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                                </q-btn>
-                              </td>
-                              <q-td
-                                v-for="col in props.cols"
-                                :key="col.name"
-                                :props="props"
-                                @click="openDetial(props.row.personId)"
-                              >
-                                <div v-if="col.name == 'no'">
-                                  {{ props.rowIndex + 1 }}
-                                </div>
-
-                                <div
-                                  v-else-if="col.name === 'organization'"
-                                  class="table_ellipsis"
-                                >
-                                  {{ props.row.organization }}
-                                </div>
-                                <div v-else-if="col.name === 'salary'">
-                                  {{ props.row.salary.toLocaleString() }}
-                                </div>
-                                <div v-else>
-                                  {{ col.value }}
-                                </div>
-                              </q-td>
-                            </q-tr>
-                          </template>
-                        </d-table>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div class="col-12">
-                    <q-input
-                      :class="inputEdit(isReadonly)"
-                      type="textarea"
-                      dense
-                      outlined
-                      ref="detailRef"
-                      v-model="formData.resultDescription"
-                      for="#detail"
-                      label="สรุปผลการพิจารณา"
-                      hide-bottom-space
-                      @update:model-value="changeFormData()"
-                    />
-                  </div>
-                  <div class="col-12">
-                    <div class="row q-col-gutter-sm">
-                      <div class="col-3">
-                        <q-input
-                          v-model="formData.disciplineType"
-                          dense
-                          :class="inputEdit(isReadonly)"
-                          outlined
-                          label="ประเภทวินัย"
-                        />
-                      </div>
-                      <div class="col-3">
-                        <q-input
-                          v-model="formData.titleType"
-                          dense
-                          outlined
-                          :class="inputEdit(isReadonly)"
-                          label="ประเภทของเรื่อง"
-                        />
-                      </div>
-                      <div class="col-4">
-                        <q-input
-                          v-model="formData.oc"
-                          dense
-                          outlined
-                          :class="inputEdit(isReadonly)"
-                          label="หน่วยงาน/ส่วนราชการ"
-                        />
-                      </div>
-                      <div class="col-2">
-                        <datepicker
-                          menu-class-name="modalfix"
-                          v-model="formData.year"
-                          class="col-2"
-                          :locale="'th'"
-                          autoApply
-                          year-picker
-                          :enableTimePicker="false"
-                        >
-                          <template #year="{ year }">{{ year + 543 }}</template>
-                          <template #year-overlay-value="{ value }">{{
-                            parseInt(value + 543)
-                          }}</template>
-                          <template #trigger>
-                            <q-input
-                              dense
-                              :class="inputEdit(isReadonly)"
-                              outlined
-                              :model-value="
-                                formData.year === 0
-                                  ? null
-                                  : Number(formData.year) + 543
-                              "
-                              :label="`${'ปีงบประมาณ'}`"
-                            >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  style="color: var(--q-primary)"
-                                >
-                                </q-icon>
-                              </template>
-                              <template v-if="formData.year" v-slot:append>
-                                <q-icon
-                                  name="cancel"
-                                  @click.stop.prevent="formData.year = 0"
-                                  class="cursor-pointer"
-                                />
-                              </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+    <form @submit.prevent="validateForm" class="col-12 row">
+      <div class="col-12 row">
+        <div class="col-sm-12 col-md-9 row no-wrap">
+          <div class=" col-12 q-pa-md">
+            <div class="row col-12 q-col-gutter-md">
+              
+              <div class="col-xs-12 col-sm-4">
+                <q-select
+                  readonly
+                  for="SelectrespondentType"
+                  v-model="respondentType"
+                  ref="respondentTypeRef"
+                  dense
+                  outlined
+                  label="ผู้ถูกร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  use-input
+                  map-options
+                  hide-bottom-space
+                  :options="dataStore.complainantoptions"
+                  @update:model-value="selectComplainant(respondentType)"
+                  @filter="(inputValue: any,
+                doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
+                )"
+                >
+                  <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 row"><q-separator vertical /></div> 
-            </div>
-
-            <!-- อัพโหลดไฟล์ -->
-            <div class="col-sm-12 col-md-3 q-pa-md">
-              <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-                <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                  อัปโหลดไฟล์เอกสารหลักฐาน
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="col-12 q-pa-sm row">
-                  <q-file
-                    for="inputFiles"
-                    class="col-12"
-                    outlined
-                    dense
-                    v-model="formData.file"
-                    @added="uploadFile"
-                    label="ไฟล์เอกสารหลักฐาน"
-                    hide-bottom-space
-                    accept=".pdf,.xlsx,.docx,.png,.jpg"
-                    clearable
+              <div
+                class="col-xs-12 col-sm-3"
+                v-if="respondentType === 'ORGANIZATION'"
+                id="organizationId"
+              >
+                <q-select
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="organizationId"
+                  :options="organizationOption"
+                  label="เลือกสำนักงาน"
+                />
+              </div>
+              <div class="row col-12" v-if="respondentType === 'PERSON'">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                   >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" color="primary" />
-                    </template>
-                    <template v-slot:after>
-                      <q-btn
-                      v-if="formData.file"
-                      size="14px"
+                    ผู้ถูกร้องเรียน
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm">
+                    <d-table
+                      ref="table"
+                      :columns="mainStore.columnsRespondent"
+                      :rows="mainStore.rowsAdd"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="mainStore.visibleColumnsRespondent"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width></q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <td>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              color="info"
+                              icon="info"
+                              @click="onclickViewinfo(props.row.personId)"
+                            >
+                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                            </q-btn>
+                          </td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            @click="openDetial(props.row.personId)"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'organization'"
+                              class="table_ellipsis"
+                            >
+                              {{ props.row.organization }}
+                            </div>
+                            <div v-else-if="col.name === 'salary'">
+                              {{ props.row.salary.toLocaleString() }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
+              </div>
+              <div class="col-12">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  type="textarea"
+                  dense
+                  outlined
+                  ref="detailRef"
+                  v-model="formData.resultDescription"
+                  for="#detail"
+                  label="สรุปผลการพิจารณา"
+                  hide-bottom-space
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+              <div class="col-3">
+                <q-input
+                  v-model="formData.disciplineType"
+                  dense
+                  :class="inputEdit(isReadonly)"
+                  outlined
+                  label="ประเภทวินัย"
+                />
+              </div>
+              <div class="col-3">
+                <q-input
+                  v-model="formData.titleType"
+                  dense
+                  outlined
+                  :class="inputEdit(isReadonly)"
+                  label="ประเภทของเรื่อง"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.oc"
+                  dense
+                  outlined
+                  :class="inputEdit(isReadonly)"
+                  label="หน่วยงาน/ส่วนราชการ"
+                />
+              </div>
+              <div class="col-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.year"
+                  class="col-2"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      :class="inputEdit(isReadonly)"
+                      outlined
+                      :model-value="
+                        formData.year === 0
+                          ? null
+                          : Number(formData.year) + 543
+                      "
+                      :label="`${'ปีงบประมาณ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                      <template v-if="formData.year" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="formData.year = 0"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+          <div class="row"><q-separator vertical /></div> 
+        </div>
+
+        <!-- อัพโหลดไฟล์ -->
+        <div class="col-sm-12 col-md-3 q-pa-md">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              อัปโหลดไฟล์เอกสารหลักฐาน
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+              <div class="col-12 row">
+                <q-file
+                  for="inputFiles"
+                  class="col-12"
+                  outlined
+                  dense
+                  v-model="formData.file"
+                  @added="uploadFile"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                  accept=".pdf,.xlsx,.docx,.png,.jpg"
+                  clearable
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                    v-if="formData.file"
+                    size="14px"
+                    flat
+                    round
+                    dense
+                    color="add"
+                    icon="mdi-upload"
+                    @click="uploadFile"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                  </template>
+                </q-file>
+              </div>
+              </div>
+              <div
+                v-if="formData.disciplineDisciplinary_DocResults.length > 0"
+                class="col-xs-12 row"
+              >
+                <q-list
+                  class="full-width"
+                  bordered
+                  separator
+                >
+                  <q-item 
+                    v-for="data in formData.disciplineDisciplinary_DocResults"
+                    :key="data.id"
+                    clickable 
+                    v-ripple>
+                    <q-item-section>{{ data.fileName }}</q-item-section>
+                    <q-space />
+                    <q-btn
+                      size="12px"
                       flat
                       round
                       dense
-                      color="add"
-                      icon="mdi-upload"
-                      @click="uploadFile"
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
-                    </template>
-                  </q-file>
-                </div>
-                <div
-                  v-if="formData.disciplineDisciplinary_DocResults.length > 0"
-                  class="col-xs-12 q-pa-sm row"
-                >
-                  <q-list
-                    v-for="data in formData.disciplineDisciplinary_DocResults"
-                    :key="data.id"
-                    class="full-width"
-                    bordered
-                    separator
-                  >
-                    <q-item clickable v-ripple>
-                      <q-item-section>{{ data.fileName }}</q-item-section>
-                      <q-space />
-                      <q-btn
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="blue"
-                        icon="mdi-download"
-                        @click="downloadFile(data.pathName)"
-                        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                      >
-                      <q-btn
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="red"
-                        class="q-ml-sm"
-                        icon="mdi-delete-outline"
-                        @click="deleteFile(data.id)"
-                        ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                      >
-                    </q-item>
-                  </q-list>
-                </div>
-                <div class="col-12 q-pa-sm" v-else>
-                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-                </div>
-              </q-card>
+                      color="blue"
+                      icon="mdi-download"
+                      @click="downloadFile(data.pathName)"
+                      ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                    >
+                    <q-btn
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="red"
+                      class="q-ml-sm"
+                      icon="mdi-delete-outline"
+                      @click="deleteFile(data.id)"
+                      ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                    >
+                  </q-item>
+                </q-list>
+              </div>
+              <div class="col-12 q-pa-sm" v-else>
+                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
             </div>
-          
-            <div class="col-12 "><q-separator /></div>
-            <div class="row col-12 q-pa-sm">
-              <q-space />
-              <q-btn
-                for="ButtonOnSubmit"
-                id="formSubmit"
-                color="secondary"
-                label="บันทึก"
-                type="submit"
-                ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-              >
-            </div>
-          </div>
-        </q-card>
-      </form>
-    </div>
+          </q-card>
+        </div>
+      
+        <div class="col-12 "><q-separator /></div>
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            for="ButtonOnSubmit"
+            id="formSubmit"
+            color="secondary"
+            label="บันทึก"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </form>
+  </div>
     
   <PopupPersonal
     :modal="modalPersonal"
diff --git a/src/modules/11_discipline/components/8_AppealComplain/Form.vue b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
index 79938705a..b59b40bf2 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/Form.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
@@ -339,336 +339,340 @@ onMounted(() => {
 </script>
 <template>
   <div class="row q-col-gutter-xs">
-    <div class="col-12">
-      <form @submit.prevent="validateForm">
-        <q-card bordered>
-          <div class="q-pa-md">
-            <div class="q-gutter-y-sm">
-              <div class="row q-gutter-x-sm">
-                <div class="col-3">
-                  <q-select
-                    ref="typeRef"
-                    :class="inputEdit(isReadonly)"
-                    v-model="formData.type"
-                    label="ประเภท"
-                    dense
-                    outlined
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    :options="dataStore.typeOptions"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
+      <form @submit.prevent="validateForm" class="col-12 row">
+        <q-card bordered class="col-12 row">
+          <div class="col-12 row">
+          <div :class="isReadonly== true ? 'col-sm-12 col-md-9 row no-wrap': 'col-12'">
+            <div class=" col-12 q-pa-md">
+              <div class="q-gutter-y-sm">
+                <div class="row q-gutter-x-sm">
+                  <div class="col-3">
+                    <q-select
+                      ref="typeRef"
+                      :class="inputEdit(isReadonly)"
+                      v-model="formData.type"
+                      label="ประเภท"
+                      dense
+                      outlined
+                      emit-value
+                      map-options
+                      option-label="name"
+                      option-value="id"
+                      :options="dataStore.typeOptions"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-3" v-if="isReadonly">
+                    <q-select
+                      ref="statusRef"
+                      v-model="formData.status"
+                      :class="inputEdit(isReadonly)"
+                      label="สถานะ"
+                      dense
+                      bg-color="white"
+                      outlined
+                      emit-value
+                      :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                      map-options
+                      hide-bottom-space
+                      option-label="name"
+                      option-value="id"
+                      :options="dataStore.statusOptionsEdit"
+                    />
+                  </div>
+                  <div class="col-2 self-center" v-if="isReadonly">
+                    <q-btn
+                      size="16px"
+                      flat
+                      round
+                      dense
+                      color="info"
+                      class="q-ml-sm"
+                      icon="mdi-history"
+                      @click="historyStatus"
+                    >
+                      <q-tooltip>ประวัติแก้ไขสถานะ</q-tooltip>
+                    </q-btn>
+                  </div>
                 </div>
-                <div class="col-3" v-if="isReadonly">
-                  <q-select
-                    ref="statusRef"
-                    v-model="formData.status"
-                    :class="inputEdit(isReadonly)"
-                    label="สถานะ"
-                    dense
-                    bg-color="white"
-                    outlined
-                    emit-value
-                    :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-                    map-options
-                    hide-bottom-space
-                    option-label="name"
-                    option-value="id"
-                    :options="dataStore.statusOptionsEdit"
-                  />
-                </div>
-                <div class="col-2 self-center" v-if="isReadonly">
-                  <q-btn
-                    size="16px"
-                    flat
-                    round
-                    dense
-                    color="info"
-                    class="q-ml-sm"
-                    icon="mdi-history"
-                    @click="historyStatus"
+                <div class="row col-12">
+                  <q-card
+                    bordered
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
                   >
-                    <q-tooltip>ประวัติแก้ไขสถานะ</q-tooltip>
-                  </q-btn>
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    >
+                      ผู้ยื่นอุทธณ์/ร้องทุกข์
+                      <q-btn
+                        v-if="!isReadonly"
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="add"
+                        class="q-ml-sm"
+                        icon="mdi-plus"
+                        @click="toggleModal"
+                      >
+                        <q-tooltip>เพิ่มผู้ยื่นอุทธณ์/ร้องทุกข์</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm">
+                      <q-table
+                        ref="table"
+                        :columns="dataStore.columns"
+                        :rows="dataStore.rowsAdd"
+                        row-key="idcard"
+                        flat
+                        bordered
+                        dense
+                        hide-bottom
+                        class="custom-header-table"
+                        :visible-columns="dataStore.visibleColumns"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                              style="color: #000000; font-weight: 500"
+                            >
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                          </q-tr>
+                        </template>
+                        <template v-slot:body="props">
+                          <q-tr :props="props" class="cursor-pointer">
+                            <q-td
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+                              <div
+                                v-else-if="col.name === 'oc'"
+                                class="table_ellipsis"
+                              >
+                                {{ props.row.oc }}
+                              </div>
+                              <div v-else>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </q-table>
+                    </div>
+                  </q-card>
+                </div>
+
+                <div class="row col-12">
+                  <div class="col-12" id="title">
+                    <q-input
+                      ref="titleRef"
+                      dense
+                      :class="inputEdit(isReadonly)"
+                      outlined
+                      hide-bottom-space
+                      v-model="formData.title"
+                      :rules="[(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์']"
+                      lazy-rules
+                      label="เรื่องอุทธรณ์/ร้องทุกข์"
+                    />
+                  </div>
+                </div>
+
+                <div class="col-xs-12 col-sm-12" id="detail">
+                  <q-input
+                    ref="descriptionRef"
+                    dense
+                    :class="inputEdit(isReadonly)"
+                    outlined
+                    hide-bottom-space
+                    v-model="formData.description"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
+                    ]"
+                    lazy-rules
+                    label="รายละเอียดอุทธรณ์/ร้องทุกข์"
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
+                <div class="row q-gutter-x-sm">
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.year"
+                      class="col-2"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          :class="inputEdit(isReadonly)"
+                          lazy-rules
+                          outlined
+                          :model-value="Number(formData.year) + 543"
+                          :label="`${'ปีงบประมาณ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      ref="caseTypeRef"
+                      :class="inputEdit(isReadonly)"
+                      v-model="formData.caseType"
+                      dense
+                      outlined
+                      :rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']"
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเภทคดี"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      ref="caseNumberRef"
+                      :class="inputEdit(isReadonly)"
+                      v-model="formData.caseNumber"
+                      dense
+                      outlined
+                      :rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
+                      lazy-rules
+                      label="เลขที่คดี"
+                      hide-bottom-space
+                    />
+                  </div>
                 </div>
               </div>
-              <div class="row col-12">
-                <q-card
-                  bordered
-                  class="row col-12"
-                  style="border: 1px solid #d6dee1"
-                >
-                  <div
-                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+            </div>
+            <div class="row"><q-separator vertical /></div> 
+          </div>
+                <!-- อัพโหลดไฟล์ -->
+          <div v-if="isReadonly" class="col-sm-12 col-md-3 q-pa-md">
+            <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                อัปโหลดไฟล์เอกสารหลักฐาน
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+                <div class="col-12 row">
+                  <q-file
+                    for="inputFiles"
+                    class="col-12"
+                    outlined
+                    dense
+                    v-model="formData.file"
+                    @added="uploadFile"
+                    label="ไฟล์เอกสารหลักฐาน"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
+                    clearable
                   >
-                    ผู้ยื่นอุทธณ์/ร้องทุกข์
-                    <q-btn
-                      v-if="!isReadonly"
-                      size="12px"
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" color="primary" />
+                    </template>
+                    <template v-slot:after>
+                      <q-btn
+                      v-if="formData.file && isReadonly"
+                      size="14px"
                       flat
                       round
                       dense
                       color="add"
-                      class="q-ml-sm"
-                      icon="mdi-plus"
-                      @click="toggleModal"
-                    >
-                      <q-tooltip>เพิ่มผู้ยื่นอุทธณ์/ร้องทุกข์</q-tooltip>
-                    </q-btn>
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm">
-                    <q-table
-                      ref="table"
-                      :columns="dataStore.columns"
-                      :rows="dataStore.rowsAdd"
-                      row-key="idcard"
-                      flat
-                      bordered
-                      dense
-                      hide-bottom
-                      class="custom-header-table"
-                      :visible-columns="dataStore.visibleColumns"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
-                          >
-                            <span class="text-weight-medium">{{
-                              col.label
-                            }}</span>
-                          </q-th>
-                        </q-tr>
-                      </template>
-                      <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
-                          <q-td
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div
-                              v-else-if="col.name === 'oc'"
-                              class="table_ellipsis"
-                            >
-                              {{ props.row.oc }}
-                            </div>
-                            <div v-else>
-                              {{ col.value }}
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </q-table>
-                  </div>
-                </q-card>
-              </div>
-
-              <div class="row col-12">
-                <div class="col-12" id="title">
-                  <q-input
-                    ref="titleRef"
-                    dense
-                    :class="inputEdit(isReadonly)"
-                    outlined
-                    hide-bottom-space
-                    v-model="formData.title"
-                    :rules="[(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์']"
-                    lazy-rules
-                    label="เรื่องอุทธรณ์/ร้องทุกข์"
-                  />
-                </div>
-              </div>
-
-              <div class="col-xs-12 col-sm-12" id="detail">
-                <q-input
-                  ref="descriptionRef"
-                  dense
-                  :class="inputEdit(isReadonly)"
-                  outlined
-                  hide-bottom-space
-                  v-model="formData.description"
-                  :rules="[
-                    (val) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
-                  ]"
-                  lazy-rules
-                  label="รายละเอียดอุทธรณ์/ร้องทุกข์"
-                  type="textarea"
-                  rows="5"
-                />
-              </div>
-              <div class="row q-gutter-x-sm">
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.year"
-                    class="col-2"
-                    :locale="'th'"
-                    autoApply
-                    year-picker
-                    :enableTimePicker="false"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        :class="inputEdit(isReadonly)"
-                        lazy-rules
-                        outlined
-                        :model-value="Number(formData.year) + 543"
-                        :label="`${'ปีงบประมาณ'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
+                      icon="mdi-upload"
+                      @click="uploadFile"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
                     </template>
-                  </datepicker>
+                  </q-file>
                 </div>
 
-                <div class="col-3">
-                  <q-input
-                    ref="caseTypeRef"
-                    :class="inputEdit(isReadonly)"
-                    v-model="formData.caseType"
-                    dense
-                    outlined
-                    :rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']"
-                    lazy-rules
-                    hide-bottom-space
-                    label="ประเภทคดี"
-                  />
+                <div
+                  v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
+                  class="col-xs-12 row"
+                >
+                  <q-list
+                    v-for="data in formData.disciplineComplaint_Appeal_Docs"
+                    :key="data.id"
+                    class="full-width"
+                    bordered
+                    separator
+                  >
+                    <q-item clickable v-ripple>
+                      <q-item-section>{{ data.fileName }}</q-item-section>
+                      <q-space />
+                      <q-btn
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(data.pathName)"
+                        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                      >
+                      <q-btn
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="red"
+                        class="q-ml-sm"
+                        icon="mdi-delete-outline"
+                        @click="deleteFile(data.id)"
+                        ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                      >
+                    </q-item>
+                  </q-list>
                 </div>
-                <div class="col-3">
-                  <q-input
-                    ref="caseNumberRef"
-                    :class="inputEdit(isReadonly)"
-                    v-model="formData.caseNumber"
-                    dense
-                    outlined
-                    :rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
-                    lazy-rules
-                    label="เลขที่คดี"
-                    hide-bottom-space
-                  />
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
                 </div>
               </div>
-            </div>
+            </q-card>
           </div>
-          <q-separator />
+          <div class="col-12"><q-separator /></div>
           <div class="row col-12 q-pa-sm">
             <q-space />
             <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
               ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
             >
           </div>
+        </div>
         </q-card>
       </form>
-    </div>
 
-    <!-- อัพโหลดไฟล์ -->
-    <div v-if="isReadonly" class="col-sm-12 col-md-3">
-      <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          อัปโหลดไฟล์เอกสารหลักฐาน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm row">
-          <q-file
-            for="inputFiles"
-            class="col-11"
-            outlined
-            dense
-            v-model="formData.file"
-            @added="uploadFile"
-            label="ไฟล์เอกสารหลักฐาน"
-            hide-bottom-space
-            lazy-rules
-            accept=".pdf,.xlsx,.doc"
-            clearable
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-
-          <div class="col-1 self-center text-center">
-            <q-btn
-              v-if="formData.file && isReadonly"
-              size="14px"
-              flat
-              round
-              dense
-              color="add"
-              icon="mdi-upload"
-              @click="uploadFile"
-              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-            >
-          </div>
-        </div>
-
-        <div
-          v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
-          class="col-xs-12 q-pa-sm row"
-        >
-          <q-list
-            v-for="data in formData.disciplineComplaint_Appeal_Docs"
-            :key="data.id"
-            class="full-width"
-            bordered
-            separator
-          >
-            <q-item clickable v-ripple>
-              <q-item-section>{{ data.fileName }}</q-item-section>
-              <q-space />
-              <q-btn
-                size="12px"
-                flat
-                round
-                dense
-                color="blue"
-                icon="mdi-download"
-                @click="downloadFile(data.pathName)"
-                ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-              >
-              <q-btn
-                size="12px"
-                flat
-                round
-                dense
-                color="red"
-                class="q-ml-sm"
-                icon="mdi-delete-outline"
-                @click="deleteFile(data.id)"
-                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-              >
-            </q-item>
-          </q-list>
-        </div>
-        <div class="col-12 q-pa-sm" v-else>
-          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-        </div>
-      </q-card>
-    </div>
+    
   </div>
 
   <DialogAddPersonal
diff --git a/src/modules/11_discipline/components/UploadFile.vue b/src/modules/11_discipline/components/UploadFile.vue
index 70a5b0755..99cece489 100644
--- a/src/modules/11_discipline/components/UploadFile.vue
+++ b/src/modules/11_discipline/components/UploadFile.vue
@@ -133,49 +133,49 @@ function downloadFile(link: string) {
         {{ title }}
       </div>
       <div class="col-12"><q-separator /></div>
-      <div v-if="!isReadonly" class="row">
-        <div class="col-12 q-px-sm q-pt-sm row">
-          <q-file
-            class="col-12"
-            outlined
-            dense
-            ref="fileRef"
-            for="#files"
-            v-model="file"
-            :label="label"
-            hide-bottom-space
-            lazy-rules
-            accept=".pdf,.xlsx,.docx,.png,.jpg"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" />
-            </template>
-            <template v-slot:after>
-              <q-btn
-                v-if="file"
-                size="14px"
-                flat
-                round
-                dense
-                color="add"
-                icon="mdi-upload"
-                @click="uploadFile()"
-                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-              >
-            </template>
-          </q-file>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div v-if="!isReadonly" class="col-12">
+            <q-file
+              outlined
+              dense
+              ref="fileRef"
+              for="#files"
+              v-model="file"
+              :label="label"
+              hide-bottom-space
+              lazy-rules
+              accept=".pdf,.xlsx,.docx,.png,.jpg"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+              <template v-slot:after>
+                <q-btn
+                  v-if="file"
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  icon="mdi-upload"
+                  @click="uploadFile()"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </template>
+            </q-file>
         </div>
-      </div>
 
-      <div v-if="props.files.length > 0" class="col-xs-12 q-pa-sm row">
+      <div v-if="props.files.length > 0" class="col-xs-12 row">
         <q-list
-          v-for="(f, index) in props.files"
-          :key="index"
           bordered
           separator
-          class="full-width"
+          class="full-width rounded-borders"
         >
-          <q-item clickable v-ripple>
+          <q-item 
+            v-for="(f, index) in props.files"
+            :key="index"
+            clickable 
+            v-ripple>
             <q-item-section>{{ f.fileName }}</q-item-section>
             <q-item-section avatar>
               <div class="row">
@@ -210,10 +210,12 @@ function downloadFile(link: string) {
           </q-item>
         </q-list>
       </div>
+   
 
-      <div class="col-12  q-pa-sm" v-if="props.files.length == 0">
+      <div class="col-12" v-if="props.files.length == 0">
         <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
-      </div>
+      </div> 
+    </div>
     </q-card>
   </div>
 </template>