diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 8c7a82196..9b7dfda15 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -158,7 +158,7 @@ onMounted(async () => {
         />
       </div>
     </div>
-    <q-card flat bordered class="col-12">
+    <q-card flat  class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
@@ -176,10 +176,10 @@ onMounted(async () => {
       <q-separator />
       <q-tab-panels v-model="store.tabMenu" animated>
         <q-tab-panel name="complaints">
-          <FormComplaints :on-submit="onSubmit" />
+          <FormComplaints :on-submit="onSubmit" :data="data" />
         </q-tab-panel>
         <q-tab-panel name="investigatefacts">
-          <FormInvestigatefacts :on-submit="onSubmit" />
+          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
         </q-tab-panel>
         <q-tab-panel name="disciplinary">
           <FormDisciplinary :on-submit="onSubmit" :data="data" />
@@ -189,3 +189,10 @@ onMounted(async () => {
     <!-- <Form :on-submit="onSubmit" :data="data" /> -->
   </div>
 </template>
+
+<style scoped>
+.q-tab-panel {
+  padding: 0;
+  background-color: #f0f3f3;
+}
+</style>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 07acba2ea..616a15263 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -88,12 +88,16 @@ const formData = reactive<FormData>({
   recordAccuser: "",
   witnesses: "",
   InvestResults: "",
-  complaintStatus:"",
+  complaintStatus: "",
   filesEvidence: null,
   filesRecordAccuser: null,
   filesWitnesses: null,
   filesEtc: null,
 });
+const filesEvidence = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesRecordAccuser = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesWitnesses = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesEtc = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: disciplinaryRef = {
@@ -156,6 +160,7 @@ async function fileUploadDoc(files: any) {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
+  console.log(fileDocDataUpload.value);
 }
 
 /**
@@ -230,6 +235,10 @@ watch(props.data, async () => {
   formData.filesEtc = props.data.filesEtc;
 });
 
+function uploadData() {
+  console.log("อัปโหลไฟล");
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -260,10 +269,10 @@ onMounted(async () => {
   <div class="col-xs-12 col-sm-12 col-md-11">
     <form @submit.prevent="validateForm">
       <div class="col-12">
-        <q-card bordered>
+        <q-card>
           <div class="col-12 row q-pa-md">
             <div class="col-12 row q-col-gutter-md">
-              <div class="col-12">
+              <!-- <div class="col-12">
                 <q-select
                   for="#fault"
                   outlined
@@ -286,9 +295,9 @@ onMounted(async () => {
                     </q-item>
                   </template>
                 </q-select>
-              </div>
+              </div> -->
 
-              <datepicker
+              <!-- <datepicker
                 menu-class-name="modalfix"
                 v-model="dateInvestigate"
                 ref="dateInvestigateRef"
@@ -330,14 +339,14 @@ onMounted(async () => {
                     </template>
                   </q-input>
                 </template>
-              </datepicker>
+              </datepicker> -->
 
               <datepicker
                 menu-class-name="modalfix"
                 ref="dateAllegationRef"
                 for="#dateAllegation"
                 v-model="dateAllegation"
-                class="col-xs-12 col-sm-4"
+                class="col-xs-12 col-sm-6"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -384,7 +393,7 @@ onMounted(async () => {
                 v-model="dateEvident"
                 :locale="'th'"
                 autoApply
-                class="col-xs-12 col-sm-4"
+                class="col-xs-12 col-sm-6"
                 borderless
                 :enableTimePicker="false"
                 week-start="0"
@@ -499,7 +508,7 @@ onMounted(async () => {
                 </q-card>
               </div>
               <q-input
-                class="col-xs-12 col-sm-6"
+                class="col-xs-12 col-sm-3"
                 dense
                 outlined
                 ref="casefaultRef"
@@ -512,7 +521,7 @@ onMounted(async () => {
               />
 
               <q-input
-                class="col-xs-12 col-sm-6"
+                class="col-xs-12 col-sm-3"
                 dense
                 hide-bottom-space
                 outlined
@@ -524,7 +533,7 @@ onMounted(async () => {
                 lazy-rules
               />
 
-              <q-select
+              <!-- <q-select
                 dense
                 class="col-xs-12 col-sm-3"
                 outlined
@@ -538,7 +547,7 @@ onMounted(async () => {
                 hide-bottom-space
                 :options="investigateDis.optionsTypefault"
                 label="ลักษณะความผิด"
-              />
+              /> -->
 
               <q-select
                 dense
@@ -557,7 +566,7 @@ onMounted(async () => {
               />
 
               <q-input
-                class="col-xs-12 col-sm-6"
+                class="col-xs-12 col-sm-3"
                 dense
                 for="#refLaw"
                 hide-bottom-space
@@ -571,7 +580,7 @@ onMounted(async () => {
                 lazy-rules
               />
 
-              <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 outlined
@@ -582,9 +591,9 @@ onMounted(async () => {
                 label="รายละเอียดเรื่องร้องเรียน"
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
-              />
+              /> -->
 
-              <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 outlined
@@ -595,148 +604,49 @@ onMounted(async () => {
                 label="รายละเอียดสืบสวนข้อเท็จจริง"
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
+              /> -->
+
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                for="#evidence"
+                ref="evidenceRef"
+                hide-bottom-space
+                v-model="formData.evidence"
+                label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
               />
 
-              <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="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <q-input
-                      class="col-12"
-                      dense
-                      outlined
-                      for="#evidence"
-                      ref="evidenceRef"
-                      hide-bottom-space
-                      v-model="formData.evidence"
-                      label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                      type="textarea"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                    />
-
-                    <q-file
-                      class="col-12 q-mt-sm"
-                      outlined
-                      dense
-                      ref="filesEvidenceRef"
-                      for="#filesEvidence"
-                      v-model="formData.filesEvidence"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.doc"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </q-card>
-              </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="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <q-input
-                      class="col-12"
-                      dense
-                      outlined
-                      ref="recordAccuserRef"
-                      for="#recordAccuser"
-                      v-model="formData.recordAccuser"
-                      label="บันทึกถ้อยคำของผู้กล่าวหา"
-                      hide-bottom-space
-                      type="textarea"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                    />
-
-                    <q-file
-                      class="col-12 q-mt-sm"
-                      outlined
-                      dense
-                      ref="filesRecordAccuserRef"
-                      for="#filesRecordAccuser"
-                      v-model="formData.filesRecordAccuser"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.doc"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </q-card>
-              </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="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <q-input
-                      class="col-12"
-                      dense
-                      outlined
-                      for="#witnesses"
-                      ref="witnessesRef"
-                      v-model="formData.witnesses"
-                      label="พยานและการบันทึกถ้อยคำ"
-                      hide-bottom-space
-                      type="textarea"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                    />
-
-                    <q-file
-                      class="col-12 q-mt-sm"
-                      outlined
-                      dense
-                      ref="filesWitnessesRef"
-                      for="#filesWitnesses"
-                      v-model="formData.filesWitnesses"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.doc"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </q-card>
-              </div>
               <q-input
-                class="col-12"
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                ref="recordAccuserRef"
+                for="#recordAccuser"
+                v-model="formData.recordAccuser"
+                label="บันทึกถ้อยคำของผู้กล่าวหา"
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+              />
+
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                for="#witnesses"
+                ref="witnessesRef"
+                v-model="formData.witnesses"
+                label="พยานและการบันทึกถ้อยคำ"
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+              />
+
+              <q-input
+                class="col-xs-12 col-sm-6"
                 dense
                 outlined
                 for="#InvestResults"
@@ -747,24 +657,6 @@ onMounted(async () => {
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
               />
-
-              <q-file
-                class="col-12"
-                outlined
-                dense
-                ref="filesEtcRef"
-                for="#filesEtc"
-                v-model="formData.filesEtc"
-                @added="fileUploadDoc"
-                label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-                hide-bottom-space
-                lazy-rules
-                accept=".pdf,.xlsx,.doc"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
             </div>
           </div>
           <q-separator />
@@ -780,6 +672,344 @@ onMounted(async () => {
             >
           </div>
         </q-card>
+
+        <div class="col-12 row q-col-gutter-md q-mt-sm">
+          <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="col-12"><q-separator /></div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-file
+                  class="col-11 q-mt-sm"
+                  outlined
+                  dense
+                  ref="filesEvidenceRef"
+                  for="#filesEvidence"
+                  v-model="formData.filesEvidence"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-btn
+                  class="col q-mt-sm"
+                  flat
+                  round
+                  color="primary"
+                  icon="upload"
+                >
+                  <q-tooltip>อัปโหลดเอกสารหลักฐาน</q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesEvidence"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </q-card>
+          </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="col-12"><q-separator /></div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-file
+                  class="col-11 q-mt-sm"
+                  outlined
+                  dense
+                  ref="filesRecordAccuserRef"
+                  for="#filesRecordAccuser"
+                  v-model="formData.filesRecordAccuser"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-btn
+                  class="col q-mt-sm"
+                  flat
+                  round
+                  color="primary"
+                  icon="upload"
+                >
+                  <q-tooltip>อัปโหลดเอกสารหลักฐาน</q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesRecordAccuser"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </q-card>
+          </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="col-12"><q-separator /></div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-file
+                  class="col-11 q-mt-sm"
+                  outlined
+                  dense
+                  ref="filesWitnessesRef"
+                  for="#filesWitnesses"
+                  v-model="formData.filesWitnesses"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-btn
+                  class="col q-mt-sm"
+                  flat
+                  round
+                  color="primary"
+                  icon="upload"
+                >
+                  <q-tooltip>อัปโหลดเอกสารหลักฐาน</q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesWitnesses"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </q-card>
+          </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="col-12"><q-separator /></div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-file
+                  class="col-11 q-mt-sm"
+                  outlined
+                  dense
+                  ref="filesEtcRef"
+                  for="#filesEtc"
+                  v-model="formData.filesEtc"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-btn
+                  class="col q-mt-sm"
+                  flat
+                  round
+                  color="primary"
+                  icon="upload"
+                >
+                  <q-tooltip>อัปโหลดเอกสารหลักฐาน</q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesEtc"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </q-card>
+          </div>
+        </div>
       </div>
     </form>
   </div>