diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 415252ce..5fe558f7 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -27,6 +27,12 @@ import NoData from 'components/NoData.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 import useFlowStore from 'src/stores/flow';
+import useMyBranchStore from 'src/stores/my-branch';
+
+const useMyBranch = useMyBranchStore();
+
+const { fetchListOptionBranch } = useMyBranch;
+
 import { Status } from 'src/stores/types';
 
 import useUtilsStore, { dialog, dialogWarningClose } from 'src/stores/utils';
@@ -151,6 +157,7 @@ const formDataGroup = ref<ProductGroupCreate>({
 });
 
 const formDataProduct = ref<ProductCreate>({
+  registeredBranchId: '',
   productTypeId: '',
   remark: '',
   serviceCharge: 0,
@@ -172,6 +179,7 @@ const formDataProductService = ref<ServiceCreate>({
   name: '',
   code: '',
   productTypeId: '',
+  registeredBranchId: '',
 });
 
 const serviceTab = [
@@ -217,6 +225,8 @@ const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
 const currentIdProduct = ref<string>('');
 
+const branchOption = ref<{ id: string; name: string }[]>([]);
+
 const currentStatus = ref<Status | 'All'>('All');
 
 const inputFile = (() => {
@@ -268,6 +278,12 @@ async function featchStatsService() {
   flowStore.rotate();
 }
 
+async function fetchListOfOptionBranch() {
+  const res = await fetchListOptionBranch({ pageSize: 999 });
+
+  if (res) branchOption.value = res.result;
+}
+
 async function featchStatsProduct() {
   const resStatsProduct = await fetchStatsProduct({
     productTypeId: currentIdType.value,
@@ -627,6 +643,7 @@ const prevService = ref<ServiceCreate>({
   name: '',
   code: '',
   productTypeId: '',
+  registeredBranchId: '',
 });
 
 const currentService = ref<ServiceById>();
@@ -649,6 +666,7 @@ async function assignFormDataProductService(id: string) {
       work: [],
       status: res.status,
       productTypeId: res.productTypeId,
+      registeredBranchId: res.registeredBranchId,
     };
 
     formDataProductService.value = { ...prevService.value };
@@ -692,6 +710,7 @@ const prevProduct = ref<ProductCreate>({
   name: '',
   code: '',
   image: undefined,
+  registeredBranchId: '',
 });
 
 function assignFormDataProduct(data: ProductList) {
@@ -711,6 +730,7 @@ function assignFormDataProduct(data: ProductList) {
     name: data.name,
     code: data.code,
     image: undefined,
+    registeredBranchId: data.registeredBranchId,
   };
 
   formDataProduct.value = { ...prevProduct.value };
@@ -739,6 +759,7 @@ function clearFormProduct() {
     name: '',
     code: '',
     image: undefined,
+    registeredBranchId: '',
   };
   imageProduct.value = undefined;
   dialogProduct.value = false;
@@ -758,6 +779,7 @@ function clearFormService() {
     work: [],
     status: undefined,
     productTypeId: '',
+    registeredBranchId: '',
   };
 
   workItems.value = [];
@@ -1061,6 +1083,7 @@ watch(inputSearchProductAndService, async () => {
       @click="
         () => {
           clearFormProduct();
+          fetchListOfOptionBranch();
           dialogProduct = true;
         }
       "
@@ -1077,6 +1100,7 @@ watch(inputSearchProductAndService, async () => {
         () => {
           clearFormGroup();
           clearFormService();
+          fetchListOfOptionBranch();
           currentServiceTab = 'serviceInformation';
           dialogService = true;
         }
@@ -1634,7 +1658,7 @@ watch(inputSearchProductAndService, async () => {
                 }
               "
               @menuViewDetail="
-                () => {
+                async () => {
                   if (i.type === 'product') {
                     currentIdProduct = i.id;
                     assignFormDataProduct(i);
@@ -1646,10 +1670,11 @@ watch(inputSearchProductAndService, async () => {
                     assignFormDataProductService(i.id);
                     dialogServiceEdit = true;
                   }
+                  await fetchListOfOptionBranch();
                 }
               "
               @menuEdit="
-                () => {
+                async () => {
                   if (i.type === 'product') {
                     currentIdProduct = i.id;
                     infoProductEdit = true;
@@ -1662,6 +1687,8 @@ watch(inputSearchProductAndService, async () => {
                     assignFormDataProductService(i.id);
                     dialogServiceEdit = true;
                   }
+
+                  await fetchListOfOptionBranch();
                 }
               "
             />
@@ -1919,6 +1946,8 @@ watch(inputSearchProductAndService, async () => {
 
     <template #information>
       <BasicInfoProduct
+        :options-branch="branchOption"
+        v-model:registered-branch-id="formDataProduct.registeredBranchId"
         v-model:detail="formDataProduct.detail"
         v-model:remark="formDataProduct.remark"
         v-model:name="formDataProduct.name"
@@ -1983,7 +2012,9 @@ watch(inputSearchProductAndService, async () => {
 
     <template #information>
       <BasicInfoProduct
+        :options-branch="branchOption"
         :readonly="!infoProductEdit"
+        v-model:registered-branch-id="formDataProduct.registeredBranchId"
         v-model:detail="formDataProduct.detail"
         v-model:remark="formDataProduct.remark"
         v-model:name="formDataProduct.name"