diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index 472051ce..9604d04a 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -267,7 +267,7 @@ watch([inputSearch, currentStatus], async () => {
     </div>
   </div>
   <div
-    class="row q-pa-md col scroll full-width"
+    class="row q-pa-md col scroll full-width surface-2"
     :class="{
       'justify-center': totalBranch === 0,
       'items-center': totalBranch === 0,
@@ -380,6 +380,17 @@ watch([inputSearch, currentStatus], async () => {
             >
               {{ props.row._count?.employee }}
             </q-td>
+            <q-td>
+              <q-btn
+                icon="mdi-eye-outline"
+                :id="`btn-eye-${props.row.customerName}`"
+                size="sm"
+                dense
+                round
+                flat
+                @click="$emit('viewDetail', props.row, props.rowIndex)"
+              />
+            </q-td>
           </q-tr>
         </template>
         <template #item="props">
@@ -412,7 +423,8 @@ watch([inputSearch, currentStatus], async () => {
   </div>
 
   <div class="row justify-between items-center q-px-md q-py-sm surface-2">
-    <div class="app-text-muted col offset-md-4">
+    <div class="col"></div>
+    <div class="app-text-muted col text-center">
       {{
         $t('recordsPage', {
           resultcurrentPage: branch?.length,