diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
new file mode 100644
index 000000000..2788265dc
--- /dev/null
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import type { FormAddHistory } from "@/modules/15_development/interface/request/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
+import Dialog from "@/modules/15_development/components/history/Dialog.vue";
+import type { QTableProps } from "quasar";
+
+const router = useRouter();
+const store = useDevelopmentDataStore();
+const modalDialog = ref<boolean>(false);
+const typeSelect = ref<string>("");
+
+/** ตัวแปรข้อมูลหลัก */
+const formMain = reactive<FormAddHistory>({
+  citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+  name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+  position: "นักบริหาร", //ตําแหน่ง
+  type: "บริหาร", //ประเภทตําแหน่ง
+  level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+  positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+  oc: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่สังกัด
+});
+
+const fieldLabels = {
+  citizenId: "เลขประจําตัวประชาชน",
+  name: "ชื่อ - นามสกุล",
+  position: "ตําแหน่ง",
+  type: "ประเภทตําแหน่ง",
+
+  level: "ระดับตําแหน่ง",
+  positionSide: "ตําแหน่งทางการบริหาร",
+  oc: "หน่วยงานที่สังกัด",
+};
+
+const visibleColumnsGov = ref<string[]>([
+  "citizenId",
+  "name",
+  "position",
+  "type",
+  "level",
+  "positionSide",
+]);
+
+const visibleColumnsProject = ref<string[]>(["project", "year", "oc"]);
+
+const columnsGov = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    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: "type",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionSide",
+    align: "left",
+    label: "ตําแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsProject = ref<QTableProps["columns"]>([
+  {
+    name: "project",
+    align: "left",
+    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
+    sortable: true,
+    field: "project",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "oc",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบ",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** เปิด dialog ข้าราชการ/โครงการ */
+function openDialog(select: string) {
+  if (select == "GOV") {
+    store.columns = columnsGov.value;
+    store.visibleColumns = visibleColumnsGov.value;
+  } else {
+    store.columns = columnsProject.value;
+    store.visibleColumns = visibleColumnsProject.value;
+  }
+
+  modalDialog.value = true;
+  typeSelect.value = select;
+}
+</script>
+<template>
+  <div class="toptitle text-dark">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    <span class=""
+      >เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ</span
+    >
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-card flat bordered style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+        ข้อมูลข้าราชการ
+
+        <q-btn
+          flat
+          class="btn-fixed-width"
+          color="teal"
+          label="เลือกข้าราชการ"
+          icon="add"
+          @click="openDialog('GOV')"
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row q-col-gutter-md q-pa-md">
+        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+          <div
+            class="row"
+            v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
+            :key="index"
+          >
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-6 text-weight-medium">{{
+                fieldLabels[field as keyof typeof fieldLabels]
+              }}</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+          <div
+            class="row"
+            v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
+            :key="index"
+          >
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-6 text-weight-medium">{{
+                fieldLabels[field as keyof typeof fieldLabels]
+              }}</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+        ข้อมูลโครงการ
+        <q-btn
+          flat
+          class="btn-fixed-width"
+          color="teal"
+          label="เลือกโครงการ"
+          icon="add"
+          @click="openDialog('project')"
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+    </q-card>
+  </q-card>
+
+  <Dialog v-model:modal="modalDialog" v-model:type="typeSelect" />
+</template>
diff --git a/src/modules/15_development/components/history/Dialog.vue b/src/modules/15_development/components/history/Dialog.vue
new file mode 100644
index 000000000..8d77159a3
--- /dev/null
+++ b/src/modules/15_development/components/history/Dialog.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStore } from '@/modules/15_development/store/developmentStore'
+
+const store = useDevelopmentDataStore()
+
+const modal = defineModel<boolean>("modal", { required: true });
+const type = defineModel<string>("type", { required: true });
+
+const search = ref<string>("");
+const inputSearch = ref<string>("");
+
+const govOp = ref<DataOption[]>([
+  {
+    id: "citizenId",
+    name: "เลขประจำตัวประชาชน",
+  },
+  {
+    id: "prefix",
+    name: "คำนำหน้า",
+  },
+  {
+    id: "fullName",
+    name: "ชื่อ - นามสกุล",
+  },
+]);
+
+const projectOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "ชื่อโครงการ",
+  },
+  {
+    id: "ID2",
+    name: "ปีงบประมาณ",
+  },
+  {
+    id: "ID3",
+    name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  },
+]);
+
+/** save ข้อมูล */
+function onSubmit() {}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+}
+
+/** class */
+function getClass() {
+  return "inputgreen";
+}
+
+watch(
+  () => type.value,
+  () => {
+    if (type.value == "GOV") {
+      search.value = "citizenId";
+    } else {
+      search.value = "ID1";
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 60%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="type == 'GOV' ? 'เลือกข้าราชการ' : 'เลือกโครงการ'"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-x-sm">
+            <div class="col-2">
+              <q-select
+                dense
+                outlined
+                label="ค้นหาจาก"
+                v-model="search"
+                option-label="name"
+                option-value="id"
+                :options="type == 'GOV' ? govOp : projectOp"
+                map-options
+                emit-value
+                :class="getClass()"
+              />
+            </div>
+            <div class="col-8">
+              <q-input
+                dense
+                outlined
+                label="ค้นหา"
+                v-model="inputSearch"
+                :class="getClass()"
+              />
+            </div>
+            <div class="col-2">
+              <q-btn
+                label="ค้นหา"
+                class="full-width full-height"
+                unelevated
+                color="teal"
+              >
+              </q-btn>
+            </div>
+          </div>
+          <div class="q-mt-sm">
+            <d-table
+              for="table"
+              ref="table"
+              :columns="store.columns"
+              :rows="store.rows"
+              row-key="subject"
+              flat
+              bordered
+              dense
+              class="custom-header-table"
+              :visible-columns="store.visibleColumns"
+            >
+              <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">{{ 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 class="table_ellipsis">
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index ad3ddee52..0adefb3c8 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -52,6 +52,17 @@ interface FormFollowOther {
   issues:string
 }
 
+interface FormAddHistory{
+  citizenId:string
+  name:string
+  position:string
+  type:string
+  level:string
+  positionSide:string
+  oc:string
+  [key: string]: any;
+}
+
 export type {
   FormQueryProject,
   FormBasicinfo,
@@ -59,4 +70,5 @@ export type {
   FormGroupRelate,
   FormFollowResult,
   FormFollowOther,
+  FormAddHistory,
 };
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index 3cfaf3990..598cd7994 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -7,7 +7,7 @@ const employeeHistory = () =>
   import("@/modules/15_development/views/EmployeeHistory.vue");
 const Scholarship = () =>
   import("@/modules/15_development/views/Scholarship.vue");
-
+const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
 export default [
   {
     path: "/development",
@@ -69,4 +69,14 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/development/history/add",
+    name: "developmentHistoryAdd",
+    component: historyAdd,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
 ];
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index bd4186d1b..3b025bc05 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
 import { reactive } from "vue";
-
+import { ref } from 'vue'
 import type { FormQueryProject } from "@/modules/15_development/interface/request/Main";
+import type { QTableProps } from "quasar";
 
 // store
 export const useDevelopmentDataStore = defineStore(
@@ -11,8 +12,15 @@ export const useDevelopmentDataStore = defineStore(
       year: new Date().getFullYear(),
       keyword: "",
     });
+
+    const visibleColumns = ref<string[]>([]);
+    const columns = ref<QTableProps["columns"]>([]);
+    const rows = ref<any[]>([])
     return {
       formFilter,
+      visibleColumns,
+      columns,
+      rows,
     };
   }
 );
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 58de6eeb6..25ff54200 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -1,5 +1,269 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+
+/** importStore*/
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+
+/** use*/
+const router = useRouter()
+const store = useDevelopmentDataStore();
+const $q = useQuasar();
+const { showLoader, hideLoader } = useCounterMixin();
+
+const rows = ref<any>([]);
+const agency = ref<string>("");
+const agencyOp = ref<DataOption[]>([
+  {
+    id: "id1",
+    name: "name1",
+  },
+  {
+    id: "id2",
+    name: "name2",
+  },
+  {
+    id: "id3",
+    name: "name3",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "citizenId",
+  "name",
+  "position",
+  "type",
+  "level",
+  "positionSide",
+  "projectName",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    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: "type",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionSide",
+    align: "left",
+    label: "ตําแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "projectName",
+    align: "left",
+    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
+    sortable: true,
+    field: "projectName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onAdd(){
+    router.push(`/development/history/add`)
+
+}
+function onDownload(){
+
+}
+
+function onEdit(){
+
+}
+</script>
 <template>
-    <div>
-        ประวัติฝึกอบรม/ดูงาน ขรก.
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="store.formFilter.year"
+          :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
+              lazy-rules
+              outlined
+              :model-value="Number(store.formFilter.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>
+        <q-select
+          dense
+          outlined
+          label="หน่วยงาน"
+          v-model="agency"
+          :options="agencyOp"
+          option-value="id"
+          option-label="name"
+          style="width: 200px"
+        />
+      </div>
+
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onAdd()"
+      >
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-arrow-down-bold-circle-outline"
+        color="blue"
+        @click="onAdd()"
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <div class="row q-gutter-sm">
+        <q-input
+          standout
+          dense
+          v-model="store.formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="store.formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="store.formFilter.keyword = ''"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <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">{{ 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"
+              @click="onEdit()"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
\ No newline at end of file
+  </q-card>
+</template>