diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index fbeafe2a..6af4b069 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -26,7 +26,7 @@ defineProps<{
       class="col-5"
       :label="$t('formDialogInputEmailHq')"
       v-model="email"
-      id="input-email"
+      for="input-email"
     />
 
     <q-input
@@ -38,7 +38,7 @@ defineProps<{
       class="col-7"
       :label="$t('formDialogInputTelephoneHq')"
       v-model="telephoneNo"
-      id="input-telephone-no"
+      for="input-telephone-no"
     />
 
     <q-input
@@ -50,7 +50,7 @@ defineProps<{
       class="col-5"
       :label="$t('formDialogInputContactName')"
       v-model="contactName"
-      id="input-contact-name"
+      for="input-contact-name"
     />
 
     <q-input
@@ -62,7 +62,7 @@ defineProps<{
       class="col-7"
       :label="$t('formDialogInputTelephoneContact')"
       v-model="contact"
-      id="input-contact"
+      for="input-contact"
     />
 
     <q-input
@@ -74,7 +74,7 @@ defineProps<{
       class="col-5"
       label="Line ID"
       v-model="lineId"
-      id="input-line-id"
+      for="input-line-id"
     />
   </div>
   <q-separator
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 87712bd9..3e8f433a 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -30,7 +30,7 @@ defineProps<{
       }"
       :label="$t('formDialogInputCode')"
       v-model="code"
-      id="input-code"
+      for="input-code"
     />
 
     <q-input
@@ -46,7 +46,7 @@ defineProps<{
       }"
       :label="$t('branchLabelCode')"
       v-model="codeSubBranch"
-      id="input-code-sub-branch"
+      for="input-code-sub-branch"
     />
 
     <q-input
@@ -65,7 +65,7 @@ defineProps<{
       :rules="[
         (val) => (val && val.length > 0) || $t('formDialogInputTaxNoValidate'),
       ]"
-      id="input-tax-no"
+      for="input-tax-no"
     />
 
     <q-input
@@ -88,7 +88,7 @@ defineProps<{
           ? $t('formDialogInputNameHqValidate')
           : $t('formDialogInputNameSubBranchValidate')
       "
-      id="input-name"
+      for="input-name"
     />
 
     <q-input
@@ -110,7 +110,7 @@ defineProps<{
           ? $t('formDialogInputNameHqEnValidate')
           : $t('formDialogInputNameSubBranchEnValidate')
       "
-      id="input-name-en"
+      for="input-name-en"
     />
   </div>
   <q-separator
diff --git a/src/components/01_branch-management/TableCardComponent.vue b/src/components/01_branch-management/TableCardComponent.vue
index 83f69538..8dc2e731 100644
--- a/src/components/01_branch-management/TableCardComponent.vue
+++ b/src/components/01_branch-management/TableCardComponent.vue
@@ -125,6 +125,7 @@ const filter = ref('');
                   dense
                   :label="$t('viewDetail')"
                   @click.stop="$emit('showInfo', prop.row)"
+                  :id="`view-detail-btn-${prop.row.id}`"
                 >
                   <Icon
                     icon="mdi:navigate-next"