diff --git a/src/modules/02_organizationalNew/components/DialogHistory.vue b/src/modules/02_organizationalNew/components/DialogHistory.vue
index 22482272f..51e7e8f12 100644
--- a/src/modules/02_organizationalNew/components/DialogHistory.vue
+++ b/src/modules/02_organizationalNew/components/DialogHistory.vue
@@ -165,15 +165,15 @@ watch(
 
                       <div v-else-if="col.name == 'orgRevisionIsCurrent'">
                         <q-icon
-                          :name="props.row.orgRevisionIsCurrent == true ? 'mdi-check':'mdi-close'"
-                          :color="props.row.orgRevisionIsCurrent == true ? 'positive':'red'"
+                          :name="props.row.orgRevisionIsCurrent == true ? 'mdi-check':''"
+                          :color="props.row.orgRevisionIsCurrent == true ? 'positive':''"
                           class="text-h5"
                         />
                       </div>
                       <div v-else-if="col.name == 'orgRevisionIsDraft'">
                         <q-icon
-                          :name="props.row.orgRevisionIsDraft == true ? 'mdi-check':'mdi-close'"
-                          :color="props.row.orgRevisionIsDraft == true ? 'positive':'red'"
+                          :name="props.row.orgRevisionIsDraft == true ? 'mdi-check':''"
+                          :color="props.row.orgRevisionIsDraft == true ? 'positive':''"
                           class="text-h5"
                         />
                       </div>
diff --git a/src/modules/02_organizationalNew/components/PositionDetail.vue b/src/modules/02_organizationalNew/components/PositionDetail.vue
new file mode 100644
index 000000000..516c36cd0
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/PositionDetail.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const modal = defineModel<boolean>("positionDetail", { required: true });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const formData = reactive<any>({
+  positionNo: "ศสท.2", //*เลขที่ตำแหน่ง
+  positionType: "วิชาการ", //*ตำแหน่งประเภท
+  positionPathSide: "นักจัดการทั่วไป", //*ตำแหน่งในสายงาน
+  positionLine: "จัดการงานทั่วไป", //*สายงาน
+  positionSide: "ไม่มี", //*ด้าน/สาขา
+  positionLevel: "ชำนาญการพิเศษ", //*ระดับตำแหน่ง
+  positionExecutive: "หัวหน้าฝ่าย", //*ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "ไม่มี", //*ด้านทางการบริหาร
+  status: "ปกติ", //*สถานะตำแหน่ง
+});
+
+function close() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card :style="$q.screen.gt.md ? 'min-width: 30vw' : 'min-width: 80vw'">
+        <DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>เลขที่ตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งประเภท</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionType }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งในสายงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionPathSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สายงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionLine }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ด้าน/สาขา</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ระดับตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionLevel }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งทางการบริหาร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionExecutive }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ด้านทางการบริหาร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionExecutiveSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สถานะตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.status }}</p>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/components/StructureDetail.vue b/src/modules/02_organizationalNew/components/StructureDetail.vue
new file mode 100644
index 000000000..9b5023792
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/StructureDetail.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const modal = defineModel<boolean>("structureDetail", { required: true });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const formData = reactive<any>({
+  orgName: "สำนักงาน ก.ก.",
+  agencyName: "กลุ่มงานสารสนเทศฯศูนย์สารสนเทศ", //*ส่วนราชการ
+  orgType: "ส่วนราชการ", //*ประเภท
+  orgLevel: "กลุ่มงาน", //*ระดับ
+  status: "ปกติ", //*สถานะ
+  orgPhoneEx: "0111111111", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
+  orgPhoneIn: "0333333333", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
+  orgFax: "023123456", //หมายเลขโทรสาร
+});
+
+function close() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card :style="$q.screen.gt.md ? 'min-width: 20vw' : 'min-width: 70vw'">
+        <DialogHeader :tittle="`รายละเอียดโครงสร้าง`" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>หน่วยงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgName }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ส่วนราชการ</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.agencyName }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ประเภท</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgType }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ระดับ</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgLevel }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สถานะ</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.status }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p class="q-ma-none">เบอร์โทร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p class="q-ma-none">ภายนอก {{ formData.orgPhoneEx }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm">
+              <div class="offset-4 col-8 text-grey-8">
+                <p>ภายใน {{ formData.orgPhoneIn }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>Fax</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgFax }}</p>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 3904e42a6..42c09a7f2 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -12,7 +12,8 @@ import StructureView from "@/modules/02_organizationalNew/components/structureVi
 import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
 import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
-
+import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
+import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
@@ -20,6 +21,10 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+const modalNewStructure = ref<boolean>(false);
+const modalStructureDetail = ref<boolean>(false);
+const modalPositionDetail = ref<boolean>(false);
+
 const stroe = useOrganizational();
 
 const isStatusData = ref<boolean>(false);
@@ -76,7 +81,6 @@ async function fetchOrganizationActive() {
     });
 }
 
-const modalNewStructure = ref<boolean>(false);
 const typeStructure = ref<string>("");
 function ocClickAddStructure(type: string) {
   modalNewStructure.value = !modalNewStructure.value;
@@ -236,6 +240,16 @@ onMounted(async () => {
 
   <!-- ประวัติโครงสร้าง -->
   <DialogHistory :modal="modalHistory" :close="onClickHistory" />
+
+  <!-- รายละเอียดโครงสร้าง -->
+  <DialogStructureDetail
+    v-model:structure-detail="modalStructureDetail"
+  />
+
+  <!-- รายละเอียดตำแหน่ง -->
+  <DialogPositionDetail
+    v-model:position-detail="modalPositionDetail"
+  />
 </template>
 
 <style scoped></style>