diff --git a/public/images/product-service-type-banner.png b/public/images/product-service-type-banner.png
new file mode 100644
index 00000000..851e86e4
Binary files /dev/null and b/public/images/product-service-type-banner.png differ
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index f166cbc8..0f82a1aa 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -59,7 +59,11 @@ const branchFilter = selectFilterOptionRefMod(
         :disable="!readonly"
         hide-bottom-space
         class="col-6"
-        :label="$t('productAndServiceGroupCode')"
+        :label="
+          $t(
+            isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode',
+          )
+        "
         v-model="code"
       />
       <q-input
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index edc88395..4c62b633 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -419,8 +419,8 @@ const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
 const currentIdProduct = ref<string>('');
 
-const currentStatusGroup = ref<Status>('CREATED');
-const currentStatusType = ref<Status>('CREATED');
+const currentStatusGroupType = ref<Status>('CREATED');
+const currentIdGroupType = ref('');
 
 const branchOption = ref<{ id: string; name: string }[]>([]);
 
@@ -685,9 +685,10 @@ async function toggleStatusService(id: string, status: Status) {
   flowStore.rotate();
 }
 async function toggleStatusType(id: string, status: Status) {
-  await editProductServiceType(id, {
+  const res = await editProductServiceType(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
+  if (res) currentStatusGroupType.value = res.status;
 
   await fetchListType();
   flowStore.rotate();
@@ -697,7 +698,7 @@ async function toggleStatusGroup(id: string, status: Status) {
   const res = await editProductService(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
-  if (res) currentStatusGroup.value = res.status;
+  if (res) currentStatusGroupType.value = res.status;
 
   await fetchListGroups();
   flowStore.rotate();
@@ -865,8 +866,8 @@ function undoProductGroup() {
 
 function assignFormDataGroup(data: ProductGroup) {
   previousValue.value = data;
-  currentStatusGroup.value = data.status;
-  currentIdGrop.value = data.id;
+  currentStatusGroupType.value = data.status;
+  currentIdGroupType.value = data.id;
 
   formDataGroup.value = {
     remark: data.remark,
@@ -984,7 +985,7 @@ function clearFormGroup() {
     name: '',
     code: '',
   };
-  currentStatusGroup.value = 'CREATED';
+  currentStatusGroupType.value = 'CREATED';
   dialogInputForm.value = false;
 }
 
@@ -3332,7 +3333,7 @@ watch(
         active
         hideFade
         useToggle
-        icon="mdi-folder-plus"
+        :icon="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
         :title="formDataGroup.name"
         :caption="formDataGroup.code"
         :menu="[
@@ -3342,14 +3343,26 @@ watch(
             bgColor: 'var(--surface-1)',
           },
         ]"
-        fallbackCover="/images/product-service-group-banner.png"
-        color="hsla(var(--pink-6-hsl)/1)"
-        bg-color="hsla(var(--pink-6-hsl)/0.1)"
-        v-model:toggle-status="currentStatusGroup"
+        :fallbackCover="`/images/product-service-${productMode}-banner.png`"
+        :color="`hsla(var(${
+          productMode === 'group'
+            ? '--pink-6'
+            : $q.dark.isActive
+              ? '--violet-10'
+              : '--violet-11'
+        }-hsl)/1)`"
+        :bg-color="`hsla(var(${
+          productMode === 'group'
+            ? '--pink-6'
+            : $q.dark.isActive
+              ? '--violet-10'
+              : '--violet-11'
+        }-hsl)/0.1)`"
+        v-model:toggle-status="currentStatusGroupType"
         @update:toggle-status="
           () => {
-            currentStatusGroup =
-              currentStatusGroup === 'CREATED' ? 'INACTIVE' : 'CREATED';
+            currentStatusGroupType =
+              currentStatusGroupType === 'CREATED' ? 'INACTIVE' : 'CREATED';
           }
         "
       />
@@ -3439,19 +3452,35 @@ watch(
       }
     "
     :delete-data="() => deleteProductById()"
-    :close="() => (drawerInfo = false)"
+    :close="
+      () => {
+        (drawerInfo = false), (currentIdGroupType = '');
+      }
+    "
   >
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
         <ProfileBanner
-          :active="currentStatusGroup !== 'INACTIVE'"
+          :active="currentStatusGroupType !== 'INACTIVE'"
           hideFade
           useToggle
-          icon="mdi-folder-plus"
-          fallbackCover="/images/product-service-group-banner.png"
-          v-model:toggle-status="currentStatusGroup"
-          color="hsla(var(--pink-6-hsl)/1)"
-          bg-color="hsla(var(--pink-6-hsl)/0.1)"
+          :icon="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
+          :fallbackCover="`/images/product-service-${productMode}-banner.png`"
+          v-model:toggle-status="currentStatusGroupType"
+          :color="`hsla(var(${
+            productMode === 'group'
+              ? '--pink-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
+          }-hsl)/1)`"
+          :bg-color="`hsla(var(${
+            productMode === 'group'
+              ? '--pink-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
+          }-hsl)/0.1)`"
           :title="formDataGroup.name"
           :caption="formDataGroup.code"
           :toggleTitle="$t('formDialogTitleUserStatus')"
@@ -3464,7 +3493,7 @@ watch(
           ]"
           @update:toggle-status="
             async (v) => {
-              await triggerChangeStatus(currentIdGrop, v, 'group');
+              await triggerChangeStatus(currentIdGroupType, v, productMode);
             }
           "
         />