diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 5a9fbc0b..0d29377b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -44,7 +44,7 @@ const inputSearch = ref<string>('');
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
-const isViewDetailGroup = ref<boolean>(false);
+const isType = ref<boolean>(false);
 const groupName = ref<string>('test');
 
 const formData = ref({
@@ -80,13 +80,13 @@ async function deleteProductById() {
 
 <template>
   <div v class="column q-pb-lg">
-    <div v-if="isViewDetailGroup" class="row items-center q-mb-md">
+    <div v-if="isType" class="row items-center q-mb-md">
       <q-btn
         round
         icon="mdi-arrow-left"
         flat
         dense
-        @click="isViewDetailGroup = false"
+        @click="isType = false"
         class="q-mr-md"
       />
       <div class="text-h6 text-weight-bold">
@@ -105,7 +105,7 @@ async function deleteProductById() {
     </AppBox>
     <AppBox bordered style="min-height: 80vh">
       <div class="row justify-between">
-        <div v-if="isViewDetailGroup" class="text-h6 text-weight-bold q-mb-md">
+        <div v-if="isType" class="text-h6 text-weight-bold q-mb-md">
           {{ $t('ProductAndServiceType') }}
         </div>
         <div v-else class="text-h6 text-weight-bold q-mb-md">
@@ -161,11 +161,11 @@ async function deleteProductById() {
       <div class="row q-col-gutter-lg">
         <div
           :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-          v-for="i in isViewDetailGroup ? 4 : 6"
+          v-for="i in isType ? 4 : 6"
           :key="i"
         >
           <ProductCardComponent
-            v-if="isViewDetailGroup"
+            v-if="isType"
             :title="cardTypeData.title"
             :subtitle="cardTypeData.subtitle"
             :date="cardTypeData.date"
@@ -182,14 +182,14 @@ async function deleteProductById() {
             :status="cardData.status"
             :color="cardData.color"
             @view-detail="drawerInfo = true"
-            @on-click="isViewDetailGroup = true"
+            @on-click="isType = true"
           />
         </div>
         <div
           :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
         >
           <NewProductCardCompoent
-            v-if="isViewDetailGroup"
+            v-if="isType"
             :label="$t('ProductAndServiceType')"
             :isType="true"
             @on-click="() => (dialogInputForm = true)"
@@ -219,7 +219,7 @@ async function deleteProductById() {
     <template #information>
       <BasicInformation
         dense
-        :isType="isViewDetailGroup"
+        :isType="isType"
         v-model:remark="formData.remark"
         v-model:name="formData.name"
         v-model:code="formData.code"
@@ -235,7 +235,7 @@ async function deleteProductById() {
     :undo="() => (isEdit = false)"
     :isEdit="isEdit"
     :editData="() => (isEdit = true)"
-    :submit="() => (isViewDetailGroup ? submitGroup() : submitType())"
+    :submit="() => (isType ? submitType() : submitGroup())"
     :delete-data="() => deleteProductById()"
     :close="() => (drawerInfo = false)"
   >
@@ -243,7 +243,7 @@ async function deleteProductById() {
       <AppBox class="q-ma-md" bordered>
         <BasicInformation
           dense
-          :isType="isViewDetailGroup"
+          :isType="isType"
           :readonly="!isEdit"
           v-model:remark="formData.remark"
           v-model:name="formData.name"