diff --git a/src/components/DialogHeader.vue b/src/components/DialogHeader.vue
new file mode 100644
index 0000000..14758aa
--- /dev/null
+++ b/src/components/DialogHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{
+      tittle
+    }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+function close() {
+  props.close();
+}
+</script>
diff --git a/src/modules/06_evaluate/components/Tab1.vue b/src/modules/06_evaluate/components/Tab1.vue
index d8b6edb..c0f8443 100644
--- a/src/modules/06_evaluate/components/Tab1.vue
+++ b/src/modules/06_evaluate/components/Tab1.vue
@@ -22,6 +22,8 @@ import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
 import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
 import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
 
+import DialogMain from "@/modules/06_evaluate/components/directorandmeet/DialogMain.vue";
+
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -168,6 +170,23 @@ async function saveStep9() {
   console.log("Save 9");
 }
 
+const modalDirector = ref<boolean>(false);
+
+function onClickDialogDirevtor() {
+  modalDirector.value = true;
+}
+
+function closeDialogDirector() {
+  modalDirector.value = false;
+}
+function fetchDirector() {
+  console.log("ประเมินชำนาญการ:director");
+}
+
+function fetchMeeting() {
+  console.log("ประเมินชำนาญการ:meeting");
+}
+
 onMounted(() => {
   store.step = 1;
 });
@@ -178,6 +197,16 @@ onMounted(() => {
     <div class="col-xs-12 col-sm-3">
       <div class="toptitle">ประเมินชำนาญการ</div>
       <Stepper />
+
+      <div class="text-center">
+        <q-btn
+          unelevated
+          outline
+          label="รายชื่อกรรมการและการประชุม"
+          color="public"
+          @click="onClickDialogDirevtor"
+        />
+      </div>
     </div>
 
     <div class="col-xs-12 col-sm-9">
@@ -258,6 +287,13 @@ onMounted(() => {
       </div>
     </div>
   </div>
+
+  <DialogMain
+    :modal="modalDirector"
+    :close="closeDialogDirector"
+    :fetchDirector="fetchDirector"
+    :fetchMeeting="fetchMeeting"
+  />
 </template>
 
 <style>
diff --git a/src/modules/06_evaluate/components/Tab2.vue b/src/modules/06_evaluate/components/Tab2.vue
index 7039195..aef5b68 100644
--- a/src/modules/06_evaluate/components/Tab2.vue
+++ b/src/modules/06_evaluate/components/Tab2.vue
@@ -17,6 +17,8 @@ import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
 import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
 import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
 
+import DialogMain from "@/modules/06_evaluate/components/directorandmeet/DialogMain.vue";
+
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -40,6 +42,24 @@ function onCilckprPeviousStep() {
     });
 }
 
+const modalMeeting = ref<boolean>(false);
+
+function onClickDialogMeeting() {
+  modalMeeting.value = true;
+}
+
+function closeDialogMeeting() {
+  modalMeeting.value = false;
+}
+
+function fetchDirector() {
+  console.log("ประเมินชำนาญการพิเศษ:director");
+}
+
+function fetchMeeting() {
+  console.log("ประเมินชำนาญการพิเศษ:meeting");
+}
+
 onMounted(() => {
   store.step = 1;
 });
@@ -50,6 +70,15 @@ onMounted(() => {
     <div class="col-xs-12 col-sm-3">
       <div class="toptitle">ประเมินชำนาญการพิเศษ</div>
       <Stepper />
+      <div class="text-center">
+        <q-btn
+          unelevated
+          outline
+          label="รายชื่อกรรมการและการประชุม"
+          color="public"
+          @click="onClickDialogMeeting"
+        />
+      </div>
     </div>
 
     <div class="col-xs-12 col-sm-9">
@@ -113,6 +142,13 @@ onMounted(() => {
       </div>
     </div>
   </div>
+
+  <DialogMain
+    :modal="modalMeeting"
+    :close="closeDialogMeeting"
+    :fetchDirector="fetchDirector"
+    :fetchMeeting="fetchMeeting"
+  />
 </template>
 
 <style>
diff --git a/src/modules/06_evaluate/components/directorandmeet/DialogMain.vue b/src/modules/06_evaluate/components/directorandmeet/DialogMain.vue
new file mode 100644
index 0000000..c5ba545
--- /dev/null
+++ b/src/modules/06_evaluate/components/directorandmeet/DialogMain.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+import TableView from "@/modules/06_evaluate/components/directorandmeet/Table.vue";
+
+/** รับ props DialogMain.vue */
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  fetchDirector: {
+    type: Function,
+    require: true,
+    default: () => "",
+  },
+  fetchMeeting: {
+    type: Function,
+    require: true,
+    default: () => "",
+  },
+  close: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const tabMenu = ref<string>("director");
+
+watch([() => props.modal, () => tabMenu.value], () => {
+  props.modal && fetchData();
+});
+
+function fetchData() {
+  const functionMain =
+    tabMenu.value === "director"
+      ? props.fetchDirector?.()
+      : props.fetchMeeting?.();
+
+  return functionMain;
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section>
+        <HeaderDialog
+          :tittle="'รายชื่อกรรมการและการประชุม'"
+          :close="props.close"
+        />
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+          <div class="col-12 row">
+            <q-card class="col-12 row caedNone">
+              <q-card class="col-12 items-center">
+                <q-tabs
+                  v-model="tabMenu"
+                  dense
+                  align="left"
+                  inline-label
+                  class="rounded-borders"
+                  indicator-color="primary"
+                  active-bg-color="teal-1"
+                  active-class="text-primary"
+                >
+                  <q-tab name="director" label="กรรมการ" />
+                  <q-tab name="meeting" label="การประชุม" />
+                </q-tabs>
+                <q-separator />
+                <q-tab-panels v-model="tabMenu" animated>
+                  <q-tab-panel name="director"
+                    ><TableView :type="tabMenu"
+                  /></q-tab-panel>
+
+                  <q-tab-panel name="meeting">
+                    <TableView :type="tabMenu"
+                  /></q-tab-panel>
+                </q-tab-panels>
+              </q-card>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+
+      <!-- <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat label="OK" v-close-popup />
+      </q-card-actions> -->
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_evaluate/components/directorandmeet/Table.vue b/src/modules/06_evaluate/components/directorandmeet/Table.vue
new file mode 100644
index 0000000..04a64b5
--- /dev/null
+++ b/src/modules/06_evaluate/components/directorandmeet/Table.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  type: {
+    type: String,
+  },
+});
+
+const columnsDrictor = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "duty",
+    align: "left",
+    label: "หน้าที่",
+    sortable: true,
+    field: "duty",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "email",
+    align: "left",
+    label: "อีเมล",
+    sortable: true,
+    field: "email",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "phone",
+    align: "left",
+    label: "เบอร์โทรศัพท์",
+    sortable: true,
+    field: "phone",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsMeeting = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateMeeting",
+    align: "left",
+    label: "วันเวลาในการประชุม",
+    sortable: true,
+    field: "dateMeeting",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "results",
+    align: "left",
+    label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
+    sortable: true,
+    field: "results",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "timePeriod",
+    align: "left",
+    label: "ระยะเวลาในการแก้ไขผลงาน",
+    sortable: true,
+    field: "timePeriod",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([]);
+
+onMounted(() => {
+  columns.value =
+    props.type === "director" ? columnsDrictor.value : columnsMeeting.value;
+});
+</script>
+
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    :columns="columns"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </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>
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_evaluate/components/viewstep/tableStep1.vue b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
index b311e4b..cc8c441 100644
--- a/src/modules/06_evaluate/components/viewstep/tableStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
@@ -10,26 +10,27 @@ const props = defineProps({
 <template>
   <q-table
     ref="table"
-    :columns="props.columns"
-    row-key="name"
     flat
     bordered
-    dense
     class="custom-header-table"
-    style="width: 625px"
+    :columns="props.columns"
+    dense
     :rows-per-page-options="[10, 25, 50, 100]"
+    style="width: 625px"
   >
-    <!-- <template v-slot:header="props">
+    <template v-slot:header="props">
       <q-tr :props="props">
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium" v-html="col.label" />
         </q-th>
-        <q-th auto-width />
       </q-tr>
-    </template> -->
+    </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>
             {{ col.value }}
           </div>
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index 9d64382..e8c6518 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -7,148 +7,140 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   /** columns TableViewStep1*/
   const columnsLicense = ref<QTableProps["columns"]>([
     {
-      name: "",
+      name: "licenseName",
       align: "center",
       label: "ชื่อใบอนุณาต",
       sortable: false,
-      field: "",
+      field: "licenseName",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "licensingAgency",
       align: "left",
       label: "หน่วยงานผู้ออกใบอนุญาต",
       sortable: true,
-      field: "",
+      field: "licensingAgency",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "licenseNumber",
       align: "left",
       label: "เลขที่ใบอนุญาต",
       sortable: true,
-      field: "",
+      field: "licenseNumber",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "licenseDate",
       align: "left",
       label: "วันที่ออกใบอนุญาต",
       sortable: true,
-      field: "",
+      field: "licenseDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "expirationDate",
       align: "left",
       label: "วันที่หมดอายุ",
       sortable: true,
-      field: "",
+      field: "expirationDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
   ]);
 
   const columnPeriodhistory = ref<QTableProps["columns"]>([
     {
-      name: "",
+      name: "date",
       align: "center",
       label: "วัน เดือน ปี",
       sortable: false,
-      field: "",
+      field: "date",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "affiliation",
       align: "left",
       label: "สังกัด",
       sortable: true,
-      field: "",
+      field: "affiliation",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "position",
       align: "left",
       label: "ตำแหน่ง",
       sortable: true,
-      field: "",
+      field: "position",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "positionNumber",
       align: "left",
       label: "ตำแหน่งเลขที่",
       sortable: true,
-      field: "",
+      field: "positionNumber",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "lineWork",
       align: "left",
       label: "สายงาน",
       sortable: true,
-      field: "",
+      field: "lineWork",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "side",
       align: "left",
       label: "ด้าน/สาขา",
       sortable: true,
-      field: "",
+      field: "side",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "positionType",
       align: "left",
       label: "ตำแหน่งประเภท",
       sortable: true,
-      field: "",
+      field: "positionType",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "level",
       align: "left",
       label: "ระดับ",
       sortable: true,
-      field: "",
+      field: "level",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "positionsAdministrative ",
       align: "left",
       label: "ตำแหน่งทางการบริหาร",
       sortable: true,
-      field: "",
+      field: "positionsAdministrative",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "aspectAdministrative",
       align: "left",
       label: "ด้านทางการบริหาร",
       sortable: true,
-      field: "",
+      field: "aspectAdministrative",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
@@ -156,69 +148,65 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const columnTrainingHistory = ref<QTableProps["columns"]>([
     {
-      name: "",
+      name: "projectName",
       align: "center",
       label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
       sortable: false,
-      field: "",
+      field: "projectName",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "trainingTopics",
       align: "left",
       label: "หัวข้อการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "trainingTopics",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "trainingStartDate",
       align: "left",
       label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "trainingStartDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "trainingEndDate",
       align: "left",
       label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "trainingEndDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "trainingYear",
       align: "left",
       label: "ปีที่อบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "trainingYear",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "trainingTotalTime",
       align: "left",
       label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "trainingTotalTime",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "trainingAgency",
       align: "left",
       label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
       sortable: true,
-      field: "",
+      field: "trainingAgency",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
@@ -226,51 +214,47 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const columnProjectsProposed = ref<QTableProps["columns"]>([
     {
-      name: "",
+      name: "receivedDate",
       align: "center",
       label: "วันที่ได้รับ",
-      sortable: false,
-      field: "",
+      sortable: true,
+      field: "receivedDate",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "authority",
       align: "left",
       label: "ผู้มีอำนาจลงนาม",
       sortable: true,
-      field: "",
+      field: "authority",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "datail",
       align: "left",
       label: "รายละเอียด",
       sortable: true,
-      field: "",
+      field: "detail",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
     {
-      name: "",
+      name: "orderNumber",
       align: "left",
       label: "เลขที่คำสั่ง",
       sortable: true,
-      field: "",
+      field: "orderNumber",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "",
+      name: "doc",
       align: "left",
       label: "เอกสารอ้างอิง",
       sortable: true,
-      field: "",
+      field: "doc",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },