diff --git a/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue b/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
new file mode 100644
index 000000000..5d853ee25
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/EditEmployee/Employment.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type {
+  FormEmployment,
+  FormEmploymentRef,
+} from "@/modules/08_registryEmployee/interface/response/Main";
+
+const $q = useQuasar();
+const maxin = useCounterMixin();
+const { date2Thai, dialogConfirm } = maxin;
+
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "dateEmployment",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: false,
+    field: "dateEmployment",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderEmployment",
+    align: "left",
+    label: "คำสั่งจ้าง",
+    sortable: false,
+    field: "orderEmployment",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["dateEmployment", "orderEmployment"]);
+const filter = ref<string>();
+// เพิ่มข้อมูลการจ้าง
+const modal = ref<boolean>(false);
+const formData = reactive<FormEmployment>({
+  dateEmployment: null,
+  orderEmployment: "",
+});
+const dateEmploymentRef = ref<object | null>();
+const orderEmploymentRef = ref<object | null>();
+const formDataRef: FormEmploymentRef = {
+  dateEmployment: dateEmploymentRef,
+  orderEmployment: orderEmploymentRef,
+};
+
+function onClickAdd() {
+  modal.value = true;
+  formData.dateEmployment = null;
+  formData.orderEmployment = "";
+}
+function colsePopup() {
+  modal.value = false;
+}
+function validateForm() {
+  const hasError = [];
+  for (const key in formDataRef) {
+    if (Object.prototype.hasOwnProperty.call(formDataRef, key)) {
+      const property = formDataRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      colsePopup();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <div class="flex items-center">
+      <div class="flex items-center">
+        <q-icon
+          name="mdi-clipboard"
+          size="1.5em"
+          color="grey-5"
+          class="q-mr-md"
+        />
+
+        <div class="text-bold text-subtitle2 col-12 row items-center">
+          ข้อมูลการจ้าง
+        </div>
+      </div>
+      <div class="q-gutter-sm q-mx-sm">
+        <q-btn
+          size="12px"
+          flat
+          round
+          color="primary"
+          @click="onClickAdd"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-space />
+      <div class="q-gutter-sm" style="display: flex">
+        <q-input
+          outlined
+          dense
+          v-model="filter"
+          label="ค้นหา"
+          style="min-width: 150px"
+        />
+
+        <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>
+    </div>
+    <div class="q-mt-sm">
+      <d-table
+        flat
+        bordered
+        id="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filter"
+        row-key="dateEmployment"
+        :paging="true"
+        dense
+        :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+      >
+        <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" style="height: 40px">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-weight-bold">
+          <span style="margin-right: 0"> เพิ่มข้อมูลการจ้าง </span>
+        </q-toolbar-title>
+        <q-btn
+          for="closeDialog"
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #eb0505; background-color: #ffdede"
+          @click="colsePopup"
+        />
+      </q-toolbar>
+      <form @submit.prevent="validateForm">
+        <q-card-section class="q-pt-none">
+          <div class="col-12 row q-pa-md">
+            <div
+              class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
+            >
+              <div class="col-xs-12 col-sm-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.dateEmployment"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="inputdateEmployment"
+                      ref="dateEmploymentRef"
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        formData.dateEmployment != null
+                          ? date2Thai(formData.dateEmployment)
+                          : null
+                      "
+                      label="วันที่จ้าง"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
+                      lazy-rules
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  for="inputOrderEmployment"
+                  ref="orderEmploymentRef"
+                  dense
+                  outlined
+                  v-model="formData.orderEmployment"
+                  label="คำสั่งจ้าง"
+                  :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
+                  lazy-rules
+                />
+              </div>
+            </div>
+          </div>
+          <div class="row col-12">
+            <q-space />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            for="ButtonOnSubmit"
+            id="onSubmit"
+            flat
+            round
+            color="secondary"
+            icon="mdi-content-save-outline"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/08_registryEmployee/interface/response/Main.ts b/src/modules/08_registryEmployee/interface/response/Main.ts
index 272bbb5e5..9cb23c57b 100644
--- a/src/modules/08_registryEmployee/interface/response/Main.ts
+++ b/src/modules/08_registryEmployee/interface/response/Main.ts
@@ -46,5 +46,14 @@ interface employeePosition {
   positionEmployeePositionSides: ObjectNameId[];
   use: boolean;
 }
+interface FormEmployment {
+  dateEmployment: Date | null
+  orderEmployment: string
+}
+interface FormEmploymentRef {
+  dateEmployment: Object | null
+  orderEmployment: Object | null
+  [key: string]: any;
+};
 
-export type { employeePosition };
+export type { employeePosition, FormEmployment, FormEmploymentRef };
diff --git a/src/modules/08_registryEmployee/views/EditDetail.vue b/src/modules/08_registryEmployee/views/EditDetail.vue
index 975c6cf6c..fc830579b 100644
--- a/src/modules/08_registryEmployee/views/EditDetail.vue
+++ b/src/modules/08_registryEmployee/views/EditDetail.vue
@@ -20,6 +20,7 @@ import Information from "@/modules/08_registryEmployee/components/EditEmployee/I
 import TempInformation from "@/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue";
 import Address from "@/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue";
 import Family from "@/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue";
+import Employment from "@/modules/08_registryEmployee/components/EditEmployee/Employment.vue";
 
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
@@ -409,9 +410,13 @@ const Retire = async () => {
       <div id="tempInformation" name="19" class="row col-12">
         <TempInformation v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
+
+      <div id="Employment" name="20" class="row col-12 q-mt-md">
+        <Employment v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
       <div id="address" name="17" class="row col-12">
         <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>  
+      </div>
       <div id="family" name="18" class="row col-12">
         <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>