diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 6d5397ef..7bd57f12 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3550,7 +3550,7 @@ watch(
       </div>
       <div
         class="col-12 col-md-10"
-        id="customer-form-content"
+        id="group-create"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-py-md q-px-lg': !$q.screen.gt.sm,
@@ -4069,7 +4069,7 @@ watch(
         </div>
         <div
           class="col-12 col-md-10"
-          id="customer-form-content"
+          id="product-create"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
             'q-pa-sm': !$q.screen.gt.sm,
@@ -4295,7 +4295,7 @@ watch(
             'q-py-md q-pr-md ': $q.screen.gt.sm,
             'q-pa-sm': !$q.screen.gt.sm,
           }"
-          id="customer-form-content"
+          id="product-info"
           style="height: 100%; max-height: 100%; overflow-y: auto"
         >
           <BasicInfoProduct
@@ -4476,6 +4476,11 @@ watch(
                 sub: true,
               }))
             "
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#service-create"
           />
         </div>
         <span
@@ -4498,7 +4503,7 @@ watch(
       </div>
       <div
         class="col-12 col-md-10"
-        id="customer-form-content"
+        id="service-create"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-pa-sm': !$q.screen.gt.sm,
@@ -4697,7 +4702,7 @@ watch(
     </div>
   </DialogForm>
 
-  <!-- edit service -->
+  <!-- edit service edit package-->
   <!-- :edit="!(formDataProductService.status === 'INACTIVE')" -->
   <DialogForm
     hide-footer
@@ -4952,6 +4957,7 @@ watch(
               background: 'hsla(var(--blue-6-hsl) / .2)',
               foreground: 'var(--blue-6)',
             }"
+            scroll-element="#service-info"
           />
         </div>
         <span
@@ -4974,7 +4980,7 @@ watch(
       </div>
       <div
         class="col-12 col-md-10"
-        id="customer-form-content"
+        id="service-info"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-pa-sm': !$q.screen.gt.sm,