diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index f8de40c7..380a4ddd 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -88,6 +88,8 @@ export default {
     numberOf: 'number of {msg}',
     list: 'List of {msg}',
     for: 'for {msg}',
+    history: 'History',
+    historyEdit: 'Edit History',
   },
 
   menu: {
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index 4de8efb1..6e0f327d 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -88,6 +88,8 @@ export default {
     numberOf: 'จำนวน{msg}',
     list: 'รายการ{msg}',
     for: 'เพื่อ{msg}',
+    history: 'ประวัติ',
+    historyEdit: 'ประวัติการแก้ไข',
   },
 
   menu: {
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 261e2fb1..8dbf8773 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -46,6 +46,7 @@ import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa
 import DialogForm from 'components/DialogForm.vue';
 import SideMenu from 'components/SideMenu.vue';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
 import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
 import {
   UploadFileGroup,
@@ -1420,7 +1421,11 @@ const emptyCreateDialog = ref(false);
                               v-model:current-page="currentPageEmployee"
                               :list-employee="listEmployee"
                               :columns-employee="columnsEmployee"
-                              @history="(item: any) => {}"
+                              @history="
+                                (item: any) => {
+                                  openHistory(item.id);
+                                }
+                              "
                               @view="
                                 async (item: any) => {
                                   employeeFormState.drawerModal = true;
@@ -1706,7 +1711,11 @@ const emptyCreateDialog = ref(false);
                     :list-employee="listEmployee"
                     :columns-employee="columnsEmployee"
                     :field-selected="fieldSelected"
-                    @history="(item: any) => {}"
+                    @history="
+                      (item: any) => {
+                        openHistory(item.id);
+                      }
+                    "
                     @view="
                       async (item: any) => {
                         employeeFormState.drawerModal = true;
@@ -4020,6 +4029,19 @@ const emptyCreateDialog = ref(false);
       </div>
     </div>
   </DrawerInfo>
+  {{ employeeHistory }}
+
+  <DialogForm
+    :title="$t('general.historyEdit')"
+    v-model:modal="employeeHistoryDialog"
+  >
+    <div class="q-pa-md">
+      <HistoryEditComponent
+        v-if="employeeHistory"
+        v-model:history-list="employeeHistory"
+      />
+    </div>
+  </DialogForm>
 </template>
 
 <style scoped>