diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index cb386d42..dffc31d5 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -12,6 +12,9 @@ const { fetchListById } = userCustomer;
 const inputSearch = ref<string>('');
 const branch = ref<CustomerBranch[]>();
 
+const currentCustomerName = ref<string>('');
+const currentCustomerUrlImage = ref<string>('');
+
 const prop = withDefaults(
   defineProps<{
     color?: 'purple' | 'green';
@@ -24,7 +27,11 @@ const prop = withDefaults(
 
 onMounted(async () => {
   const result = await fetchListById(prop.customerId);
-  if (result) branch.value = result.branch;
+  if (result) {
+    currentCustomerName.value = result.customerName;
+    currentCustomerUrlImage.value = result.imageUrl;
+    branch.value = result.branch;
+  }
 });
 </script>
 
@@ -45,11 +52,16 @@ onMounted(async () => {
           style="border-radius: 0 0 40px 40px; position: relative"
         >
           <q-avatar no-padding size="50px">
-            <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
+            <img
+              :src="
+                currentCustomerUrlImage ??
+                'https://cdn.quasar.dev/img/avatar1.jpg'
+              "
+            />
           </q-avatar>
         </q-card-section>
         <div>
-          <div>นายสุขใจ แสนดี</div>
+          <div>{{ currentCustomerName }}</div>
           <div class="row items-center">
             <i
               class="isax isax-frame5"