diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index ab94adde..d05d7682 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import useUserStore from 'src/stores/user';
+import { UserAttachmentDelete } from 'src/stores/user/types';
+import { dialog } from 'src/stores/utils';
 import { dateFormat } from 'src/utils/datetime';
+import { watch } from 'vue';
 
 const userStore = useUserStore();
 
+const userId = defineModel<string>('userId');
 const userType = defineModel<string>('userType');
 const registrationNo = defineModel<string | null>('registrationNo');
 const startDate = defineModel<Date | null>('startDate');
@@ -21,15 +25,43 @@ const importNationality = defineModel<string | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
-const checkPoint = defineModel<string>('checkPoint');
-const checkPointEN = defineModel<string>('checkPointEN');
-const idenDoc = defineModel<File>('idenDoc');
+const checkpoint = defineModel<string>('checkPoint');
+const checkpointEN = defineModel<string>('checkPointEN');
+const agencyFile = defineModel<File[]>('agencyFile');
+const agencyFileList =
+  defineModel<{ name: string; url: string }[]>('agencyFileList');
 
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
 }>();
+
+function openNewTab(url: string) {
+  window.open(url, '_blank');
+}
+
+function deleteFile(name: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: 'ยืนยันการลบเอกสารประจำตัว',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการลบเอกสารประจำตัว ใช่หรือไม่',
+    action: async () => {
+      if (!userId.value) return;
+      const payload: UserAttachmentDelete = {
+        file: [name],
+      };
+      userStore.deleteAttachment(userId.value, payload);
+      const result = await userStore.fetchAttachment(userId.value);
+      if (result) {
+        agencyFileList.value = result;
+      }
+    },
+  });
+}
 </script>
 <template>
   <div v-if="userType" class="col-3 app-text-muted">• ข้อมูลการทำงาน</div>
@@ -225,7 +257,7 @@ defineProps<{
         :borderless="readonly"
         label="ด่าน"
         class="col-6"
-        v-model="checkPoint"
+        v-model="checkpoint"
       />
       <q-input
         :dense="dense"
@@ -234,18 +266,50 @@ defineProps<{
         :borderless="readonly"
         label="ด่าน ENG"
         class="col-6"
-        v-model="checkPointEN"
+        v-model="checkpointEN"
       />
       <q-file
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
+        multiple
+        append
         label="แบบเอกสารประจำตัว"
         class="col-12"
-        v-model="idenDoc"
-        type="textarea"
+        v-model="agencyFile"
       />
+
+      <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
+        <q-list bordered separator class="rounded" style="padding: 0">
+          <q-item
+            v-for="item in agencyFileList"
+            clickable
+            :key="item.url"
+            class="items-center row"
+            @click="() => openNewTab(item.url)"
+          >
+            <q-item-section>
+              <div class="row items-center justify-between">
+                <div class="col">
+                  {{ item.name }}
+                </div>
+                <q-btn
+                  v-if="!readonly && userId"
+                  rounded
+                  flat
+                  dense
+                  unelevated
+                  size="md"
+                  icon="mdi-trash-can-outline"
+                  class="app-text-negative"
+                  @click.stop="deleteFile(item.name)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/TooltipComponent.vue b/src/components/TooltipComponent.vue
index 06476c58..e8a4114d 100644
--- a/src/components/TooltipComponent.vue
+++ b/src/components/TooltipComponent.vue
@@ -99,6 +99,7 @@ defineProps<{
 }
 
 .tooltip .tooltip-text {
+  border: 1px solid var(--_bg-box-content);
   width: 250px;
   height: 200px;
   background-color: var(--_bg-tooltip-branch);
@@ -120,8 +121,7 @@ defineProps<{
   left: var(--_main-page-branch-tooltip);
   border-width: 8px;
   border-style: solid;
-  border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
-    transparent;
+  border-color: var(--_bg-box-content) transparent transparent transparent;
   transform: rotate(270deg);
 }
 
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 27324d20..71e9043b 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -5,7 +5,12 @@ import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
 import { dialog } from 'src/stores/utils';
 
-import { User, UserCreate, UserTypeStats } from 'src/stores/user/types';
+import {
+  User,
+  UserAttachmentCreate,
+  UserCreate,
+  UserTypeStats,
+} from 'src/stores/user/types';
 import { BranchUserStats } from 'src/stores/branch/types';
 import useAddressStore from 'src/stores/address';
 
@@ -20,7 +25,7 @@ import FormInformation from 'src/components/02_personnel-management/FormInformat
 import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 import DrawerInfo from 'src/components/DrawerInfo.vue';
-import infoForm from 'src/components/02_personnel-management/infoForm.vue';
+import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -61,6 +66,8 @@ const defaultFormData = {
   responsibleArea: null,
   username: '',
   status: 'CREATED',
+  checkpoint: null,
+  checkpointEN: null,
 };
 
 const currentUser = ref<User>();
@@ -83,6 +90,8 @@ const code = ref<string>();
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
+const agencyFile = ref<File[]>([]);
+const agencyFileList = ref<{ name: string; url: string }[]>([]);
 const formData = ref<UserCreate>({
   provinceId: null,
   districtId: null,
@@ -190,6 +199,14 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
 
   if (idEdit && userData.value) {
     assignFormData(idEdit);
+
+    if (formData.value.userType === 'AGENCY') {
+      const result = await userStore.fetchAttachment(idEdit);
+
+      if (result) {
+        agencyFileList.value = result;
+      }
+    }
   }
 }
 
@@ -205,6 +222,7 @@ function onClose() {
   brId.value = '';
   userId.value = '';
   urlProfile.value = '';
+  agencyFile.value = [];
   profileSubmit.value = false;
   modal.value = false;
   infoDrawer.value = false;
@@ -215,8 +233,6 @@ function onClose() {
 }
 
 async function onSubmit() {
-  console.log('hello');
-
   formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
     dialog({
@@ -234,7 +250,6 @@ async function onSubmit() {
           status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
         } as const;
         await userStore.editById(userId.value, formDataEdit);
-        onClose();
 
         if (
           hqId.value &&
@@ -249,12 +264,25 @@ async function onSubmit() {
           );
         }
 
+        if (userId.value && formDataEdit.userType === 'AGENCY') {
+          if (!agencyFile.value) return;
+          const payload: UserAttachmentCreate = {
+            file: agencyFile.value,
+          };
+
+          if (payload?.file) {
+            await userStore.addAttachment(userId.value, payload);
+          }
+        }
+
         userStore.fetchList({
           includeBranch: true,
           query: !!inputSearch.value ? inputSearch.value : undefined,
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
+
+        onClose();
       },
     });
   } else {
@@ -279,6 +307,19 @@ async function onSubmit() {
             result.id,
           );
         }
+
+        if (result && formData.value.userType === 'AGENCY') {
+          if (!agencyFile.value) return;
+
+          const payload: UserAttachmentCreate = {
+            file: agencyFile.value,
+          };
+
+          if (payload?.file) {
+            await userStore.addAttachment(result.id, payload);
+          }
+        }
+
         selectorLabel.value = formData.value.userType;
         userStore.fetchList({
           includeBranch: true,
@@ -286,6 +327,7 @@ async function onSubmit() {
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
+
         onClose();
       },
     });
@@ -364,6 +406,8 @@ async function assignFormData(idEdit: string) {
       userRole: foundUser.userRole,
       userType: foundUser.userType,
       username: foundUser.username,
+      checkpoint: foundUser.checkpoint,
+      checkpointEN: foundUser.checkpointEN,
       responsibleArea: foundUser.responsibleArea,
       status: foundUser.status,
       licenseExpireDate:
@@ -630,7 +674,7 @@ watch(inputSearch, async () => {
     :editData="() => (infoPersonCardEdit = true)"
   >
     <template #info>
-      <infoForm
+      <InfoForm
         :readonly="!infoPersonCardEdit"
         v-model:address="formData.address"
         v-model:addressEN="formData.addressEN"
@@ -699,9 +743,14 @@ watch(inputSearch, async () => {
             v-model:sourceNationality="formData.sourceNationality"
             v-model:importNationality="formData.importNationality"
             v-model:trainingPlace="formData.trainingPlace"
+            v-model:checkpoint="formData.checkpoint"
+            v-model:checkpointEN="formData.checkpointEN"
+            v-model:agencyFile="agencyFile"
+            v-model:agencyFileList="agencyFileList"
+            v-model:userId="userId"
           />
         </template>
-      </infoForm>
+      </InfoForm>
     </template>
   </DrawerInfo>
 
@@ -845,6 +894,9 @@ watch(inputSearch, async () => {
         v-model:sourceNationality="formData.sourceNationality"
         v-model:importNationality="formData.importNationality"
         v-model:trainingPlace="formData.trainingPlace"
+        v-model:checkpoint="formData.checkpoint"
+        v-model:checkpointEN="formData.checkpointEN"
+        v-model:agencyFile="agencyFile"
       />
     </template>
   </FormDialog>