diff --git a/src/i18n/en-US/form-dialog.ts b/src/i18n/en-US/form-dialog.ts
index e4000b68..4acbf019 100644
--- a/src/i18n/en-US/form-dialog.ts
+++ b/src/i18n/en-US/form-dialog.ts
@@ -172,4 +172,7 @@ export default {
   formDialogTabWork: 'Work  ',
 
   formDialogEmployerRanchCode: 'Branch Code',
+
+  formTitleCustomer: 'Company {msg}',
+  formTitleBranch: 'Branch {msg}',
 };
diff --git a/src/i18n/th-th/form-dialog.ts b/src/i18n/th-th/form-dialog.ts
index 951781f0..4833e148 100644
--- a/src/i18n/th-th/form-dialog.ts
+++ b/src/i18n/th-th/form-dialog.ts
@@ -171,4 +171,7 @@ export default {
   formDialogTabWork: 'ครั้งที่ ',
 
   formDialogEmployerRanchCode: 'รหัสสาขา',
+
+  formTitleCustomer: 'บริษัท {msg}',
+  formTitleBranch: 'สาขา {msg}',
 };
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index fb1e5812..65a30280 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -212,6 +212,12 @@ const statsCustomerType = ref<CustomerStats>();
 const currentCustomerId = ref<string>('');
 const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
+
+const currentBranch = ref<{ name: string; code: string }>({
+  name: '',
+  code: '',
+});
+
 const branch = ref<CustomerBranch[]>();
 
 const currentPageCustomer = ref<number>(1);
@@ -1282,12 +1288,17 @@ watch(fieldSelectedCustomer, async () => {
         @dialog="dialogInputCustomerBranchForm = true"
         @viewDetail="
           (v) => {
-            infoDrawerBranch = true;
             currentBranchId = v[0].id;
 
+            currentBranch = {
+              name: v[0].name,
+              code: v[0].code,
+            };
+
             if (!!currentCustomer && !!v) {
               assignFormData({ ...currentCustomer, branch: v });
             }
+            infoDrawerBranch = true;
           }
         "
         v-model:branch="branch"
@@ -1875,9 +1886,9 @@ watch(fieldSelectedCustomer, async () => {
   <!-- DRAWER INFO ของ นายจ้าง -->
 
   <DrawerInfo
-    title="บริษัททดสอบ"
+    :title="$t('formTitleCustomer', { msg: currentCustomer?.customerName })"
     v-model:drawer-open="infoDrawer"
-    badgeLabel="HQ006"
+    :badgeLabel="currentCustomer?.code"
     badgeClass="app-bg-pers"
     :undo="() => undo()"
     :isEdit="infoDrawerEdit"
@@ -2065,9 +2076,9 @@ watch(fieldSelectedCustomer, async () => {
 
   <!-- DRAWER INFO ของ สาขา -->
   <DrawerInfo
-    title="สาขา"
+    :title="$t('formTitleBranch', { msg: currentBranch.name })"
     v-model:drawer-open="infoDrawerBranch"
-    badgeLabel="HQ006"
+    :badgeLabel="currentBranch.code"
     badgeClass="app-bg-pers"
     :undo="() => undo()"
     :isEdit="infoDrawerEdit"