diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 067d4126..ac6a4317 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -19,6 +19,7 @@ defineProps<{
   noAction?: boolean;
   noBg?: boolean;
   history?: boolean;
+  prefixId: string;
 }>();
 
 defineEmits<{
@@ -60,6 +61,7 @@ defineEmits<{
         </div>
         <q-btn
           v-if="history"
+          :id="`btn-history-${prefixId}`"
           flat
           round
           class="app-text-muted-2"
@@ -70,7 +72,7 @@ defineEmits<{
         />
 
         <q-btn
-          :id="`btn-dots-${data.code}`"
+          :id="`btn-dots-${prefixId}`"
           :key="data.code"
           flat
           round
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d388231f..6f6bc688 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -32,6 +32,7 @@ import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useOptionStore from 'src/stores/options';
+status;
 
 const { locale, t } = useI18n();
 const $q = useQuasar();
@@ -1155,6 +1156,7 @@ watch(
 
                 <q-td>
                   <q-btn
+                    :id="`btn-view-${props.row.username}`"
                     icon="mdi-eye-outline"
                     size="sm"
                     dense
@@ -1168,7 +1170,7 @@ watch(
                   />
 
                   <q-btn
-                    :id="`btn-dots-${props.row.code}`"
+                    :id="`btn-dots-${props.row.username}`"
                     icon="mdi-dots-vertical"
                     size="sm"
                     dense
@@ -1288,8 +1290,10 @@ watch(
             <template v-slot:item="props">
               <div class="col-md-3 col-sm-6 col-12">
                 <PersonCard
+                  :prefix-id="props.row.username"
                   :data="{
                     code: props.row.code,
+
                     name:
                       $i18n.locale === 'en-US'
                         ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 232c0e07..58629f8d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2290,6 +2290,9 @@ watch(isMainPage, () => {
                           :id="`card-${props.row.customerName}`"
                           :field-selected="fieldSelected"
                           history
+                          :prefix-id="
+                            props.row.customerNameEN ?? props.rowIndex
+                          "
                           :data="{
                             code: props.row.code,
                             name:
@@ -2753,6 +2756,7 @@ watch(isMainPage, () => {
                           :id="`card-${props.row.firstNameEN}`"
                           :field-selected="fieldSelected"
                           history
+                          :prefix-id="props.row.firstNameEN ?? props.rowIndex"
                           :data="{
                             code: props.row.code,
                             name:
@@ -4069,6 +4073,7 @@ watch(isMainPage, () => {
             no-hover
             no-action
             no-detail
+            prefix-id="drawer-edit"
             :data="{
               name:
                 formDataEmployee.firstName + ' ' + formDataEmployee.lastName,