diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index 826cb7d7f..d6d343e42 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -26,6 +26,8 @@ const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
+const checkRoutePermisson = ref<boolean>(route.name == "disciplineComplaintsDetail");
+
 const modalPopup = ref<boolean>(false);
 
 /** ข้อมูล v-model ของฟอร์ม */
@@ -349,9 +351,9 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/complaints`)"
       />
-      <div class="q-ma-none">แก้ไขเรื่องร้องเรียน</div>
+      <div class="q-ma-none">{{ checkRoutePermisson ? 'รายละเอียดเรื่องร้องเรียน':'แก้ไขเรื่องร้องเรียน'}}</div>
       <q-space />
-      <div class="q-gutter-x-sm">
+      <div class="q-gutter-x-sm" v-if="!checkRoutePermisson">
         <q-btn
           v-if="data.status === 'NEW'"
           label="มีมูลส่งไปสืบสวน"
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 6e4504e0b..aa7d24590 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -11,6 +11,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
+import { useRouter, useRoute } from "vue-router";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -21,7 +23,7 @@ import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 const $q = useQuasar();
 const fileDocDataUpload = ref<File[]>([]);
 const channelOptions = ref<DataOption[]>([]);
-
+const route = useRoute();
 /** เรียกใช้ store */
 const mixin = useCounterMixin();
 const mainStore = useDisciplineMainStore();
@@ -30,7 +32,9 @@ const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const organization = ref<OptionData>();
 const consideredAgency = ref<OptionData>();
-
+const checkRoutePermisson = ref<boolean>(
+  route.name == "disciplineComplaintsDetail"
+);
 /**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
 const modal = ref<boolean>(false);
 const toggleModal = () => (modal.value = !modal.value);
@@ -430,7 +434,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   ref="respondentTypeRef"
                   dense
                   outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly ||checkRoutePermisson"
                   label="ผู้ถูกร้องเรียน"
                   option-value="id"
                   option-label="name"
@@ -467,7 +471,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   ref="organizationIdRef"
                   dense
                   hide-bottom-space
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                   outlined
                   option-label="name"
                   option-value="id"
@@ -504,7 +508,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   label="หน่วยงานที่พิจารณา"
                   option-value="id"
                   option-label="name"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                   hide-bottom-space
                   map-options
                   :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
@@ -536,7 +540,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   >
                     ผู้ถูกร้องเรียน
                     <q-btn
-                      v-if="!isReadonly"
+                      v-if="!isReadonly && !checkRoutePermisson"
                       size="12px"
                       flat
                       round
@@ -577,22 +581,31 @@ function filterOptionFnAgency(val: string, update: Function) {
                               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>
+                          <td auto-width>
                             <q-btn
                               dense
                               flat
                               round
                               color="info"
-                              icon="info"
+                              icon="mdi-eye"
                               @click="onclickViewinfo(props.row.personId)"
                             >
                               <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
                             </q-btn>
+                            <q-btn
+                              v-if="!isReadonly && !checkRoutePermisson"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              icon="mdi-delete"
+                              @click="deletePerson(props.row.personId)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
                           </td>
                           <q-td
                             v-for="col in props.cols"
@@ -629,20 +642,6 @@ function filterOptionFnAgency(val: string, update: Function) {
                               {{ 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>
@@ -657,7 +656,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   dense
                   :class="inputEdit(isReadonly)"
                   outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                   hide-bottom-space
                   v-model="formData.title"
                   :rules="[(val) => !!val || 'กรุณากรอกเรื่องร้องเรียน']"
@@ -675,7 +674,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   ref="descriptionRef"
                   dense
                   outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                   hide-bottom-space
                   v-model="formData.description"
                   label="รายละเอียดเรื่องร้องเรียน"
@@ -692,7 +691,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   :locale="'th'"
                   autoApply
                   borderless
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                   :enableTimePicker="false"
                   week-start="0"
                   @update:model-value="changeFormData()"
@@ -710,7 +709,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                       outlined
                       dense
                       :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
+                      :readonly="isReadonly|| checkRoutePermisson"
                       hide-bottom-space
                       :model-value="
                         formData.dateReceived != null
@@ -742,7 +741,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   ref="levelConsiderationRef"
                   dense
                   outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                   v-model="formData.levelConsideration"
                   :options="complainstStore.levelConsiderationtOptions"
                   label="ระดับการพิจารณา"
@@ -765,7 +764,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   v-model="formData.dateConsideration"
                   @update:model-value="changeFormData()"
                   :locale="'th'"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                   autoApply
                   borderless
                   :enableTimePicker="false"
@@ -789,7 +788,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                           ? date2Thai(formData.dateConsideration)
                           : null
                       "
-                      :readonly="isReadonly"
+                      :readonly="isReadonly|| checkRoutePermisson"
                       label="วันที่กำหนดพิจารณา"
                       hide-bottom-space
                     >
@@ -802,7 +801,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                         </q-icon>
                       </template>
                       <template
-                        v-if="formData.dateConsideration && !isReadonly"
+                        v-if="formData.dateConsideration && !isReadonly && !checkRoutePermisson"
                         v-slot:append
                       >
                         <q-icon
@@ -825,7 +824,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   ref="offenseDetailsRef"
                   dense
                   outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                   v-model="formData.offenseDetails"
                   :options="mainStore.offenseDetailstOptions"
                   label="ลักษณะความผิด"
@@ -845,7 +844,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   v-model="formData.dateNotification"
                   :locale="'th'"
                   autoApply
-                  :readonly="isReadonly"
+                  :readonly="isReadonly||checkRoutePermisson"
                   borderless
                   :enableTimePicker="false"
                   week-start="0"
@@ -864,7 +863,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                       outlined
                       :class="inputEdit(isReadonly)"
                       dense
-                      :readonly="isReadonly"
+                      :readonly="isReadonly||checkRoutePermisson"
                       hide-bottom-space
                       :model-value="
                         formData.dateNotification != null
@@ -882,7 +881,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                         </q-icon>
                       </template>
                       <template
-                        v-if="formData.dateNotification && !isReadonly"
+                        v-if="formData.dateNotification && !isReadonly && !checkRoutePermisson"
                         v-slot:append
                       >
                         <q-icon
@@ -902,7 +901,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   for="selectReceivecomplaints"
                   ref="complaintFromRef"
                   dense
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                   outlined
                   v-model="formData.complaintFrom"
                   :options="channelOptions"
@@ -925,7 +924,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   dense
                   outlined
                   v-model="formData.appellant"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly ||checkRoutePermisson"
                   label="ผู้ร้องเรียน"
                   hide-bottom-space
                   type="textarea"
@@ -936,7 +935,7 @@ function filterOptionFnAgency(val: string, update: Function) {
               <div class="col-xs-12 col-sm-12">
                 <q-input
                   :class="inputEdit(isReadonly)"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                   for="result"
                   ref="resultRef"
                   dense
@@ -976,7 +975,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                   <div class="col-12"><q-separator /></div>
                   <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
                     <div
-                      v-if="!isReadonly && formData.id !== ''"
+                      v-if="!checkRoutePermisson && !isReadonly && formData.id !== ''"
                       class="col-12 row"
                     >
                       <q-file
@@ -1039,7 +1038,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                               ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                             >
                             <q-btn
-                              v-if="!isReadonly"
+                              v-if="!isReadonly && !checkRoutePermisson"
                               size="12px"
                               flat
                               round
@@ -1067,8 +1066,8 @@ function filterOptionFnAgency(val: string, update: Function) {
           </div>
         </div>
 
-        <div class="col-12"><q-separator /></div>
-        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
+        <div class="col-12" v-if="!checkRoutePermisson"><q-separator /></div>
+        <div class="row col-12 q-pa-sm" v-if="!isReadonly && !checkRoutePermisson">
           <q-space />
           <q-btn
             for="ButtonOnSubmit"
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 9fc124a94..afc4f7118 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -106,7 +106,7 @@ onMounted(async () => {
     รายการเรื่องร้องเรียน
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
       <div class="col-4">
         <q-select
           v-model="statusFilter"
@@ -145,7 +145,7 @@ onMounted(async () => {
           v-if="checkPermission($route)?.attrIsCreate"
           id="addComplaints"
           for="addComplaints"
-          size="12px"
+          dense
           flat
           round
           color="primary"
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index e24915c13..96b3ec3ca 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -4,6 +4,8 @@ import type { QTableProps } from "quasar";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRouter } from "vue-router";
 
+import { checkPermission } from "@/utils/permissions";
+
 const currentPage = ref<number>(1);
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
@@ -158,6 +160,14 @@ watch(
   }
 );
 
+/**
+ * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
+ * @param id ไอดีระบุ
+ */
+ function onDetail(id: string) {
+  router.push(`/discipline/complaints-detail/${id}`);
+}
+
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
   complainstStore.columns = columns.value;
@@ -184,6 +194,7 @@ onMounted(() => {
   >
     <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">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
@@ -191,12 +202,33 @@ onMounted(() => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props"
-          @click="OpenEdit(props.row.id)"
-        >
+        <q-td>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
+            id="addComplaints"
+            for="addComplaints"
+            dense
+            flat
+            round
+            color="info"
+            icon="mdi-eye"
+            @click="onDetail(props.row.id)"
+            ><q-tooltip>รายละเอียด</q-tooltip></q-btn
+          >
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate && checkPermission($route)?.attrIsGet"
+            id="addComplaints"
+            for="addComplaints"
+            dense
+            flat
+            round
+            color="edit"
+            icon="edit"
+            @click="OpenEdit(props.row.id)"
+            ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+          >
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
             {{
               (currentPage - 1) * Number(pagination.rowsPerPage) +
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 414ced8ae..4bd366b86 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -44,6 +44,8 @@ const complaintAdd = () =>
   import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
 const complaintEdit = () =>
   import("@/modules/11_discipline/components/1_Complaint/EditPage.vue");
+const complaintDetail = () =>
+  import("@/modules/11_discipline/components/1_Complaint/EditPage.vue");
 const reportType = () =>
   import("@/modules/11_discipline/components/5_Report/DetailPage.vue");
 // const InvestigateDisciplinaryAdd = () =>
@@ -108,6 +110,17 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/discipline/complaints-detail/:id",
+    name: "disciplineComplaintsDetail",
+    component: complaintDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_DISCIPLINE_COMPLAIN",
+      Role: "STAFF",
+    },
+  },
+
   {
     path: "/discipline/investigatefacts",
     name: "disciplineInvestigatefacts",