diff --git a/public/images/product-service-group-banner.png b/public/images/product-service-group-banner.png
new file mode 100644
index 00000000..297ef281
Binary files /dev/null and b/public/images/product-service-group-banner.png differ
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 698a1938..f166cbc8 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -7,6 +7,7 @@ import { ref } from 'vue';
 const remark = defineModel<string>('remark');
 const detail = defineModel<string>('detail');
 const name = defineModel<string>('name');
+const code = defineModel<string>('code');
 
 const serviceCode = defineModel<string>('serviceCode');
 const serviceName = defineModel<string>('serviceNameTh');
@@ -37,130 +38,153 @@ const branchFilter = selectFilterOptionRefMod(
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">
-    • {{ $t(`formDialogTitleInformation`) }}
-  </div>
-  <div v-if="!service" class="col-9 row q-col-gutter-md">
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-12"
-      :label="
-        $t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName')
-      "
-      v-model="name"
-      :rules="[(val: string) => !!val || $t('pleaseInformation')]"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      type="textarea"
-      class="col-12"
-      :label="$t('detail')"
-      v-model="detail"
-      :for="`input-detail`"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      type="textarea"
-      class="col-12"
-      :label="$t('formDialogInputRemark')"
-      v-model="remark"
-      :for="`input-remark`"
-    />
-  </div>
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`formDialogTitleInformation`) }}
+    </div>
+    <div v-if="!service" class="col-12 row q-col-gutter-sm">
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        readonly
+        :disable="!readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('productAndServiceGroupCode')"
+        v-model="code"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="
+          $t(
+            isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName',
+          )
+        "
+        v-model="name"
+        :rules="[(val: string) => !!val || $t('pleaseInformation')]"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('detail')"
+        v-model="detail"
+        :for="`input-detail`"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('formDialogInputRemark')"
+        v-model="remark"
+        :for="`input-remark`"
+      />
+    </div>
 
-  <div v-if="service" class="col-9 row q-col-gutter-md">
-    <q-input
-      lazy-rules="ondemand"
-      id="input-service-code"
-      for="input-service-code"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-3"
-      :label="$t('serviceCode')"
-      v-model="serviceCode"
-      :rules="[(val: string) => !!val || $t('pleaseInformation')]"
-    />
+    <div v-if="service" class="col-9 row q-col-gutter-md">
+      <q-input
+        lazy-rules="ondemand"
+        id="input-service-code"
+        for="input-service-code"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('serviceCode')"
+        v-model="serviceCode"
+        :rules="[(val: string) => !!val || $t('pleaseInformation')]"
+      />
 
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      class="col-3"
-      option-value="id"
-      option-label="name"
-      lazy-rules="ondemand"
-      v-model="registeredBranchId"
-      id="input-source-nationality"
-      for="input-source-nationality"
-      :dense="dense"
-      :readonly="readonly"
-      :options="branchOptions"
-      :hide-dropdown-icon="readonly"
-      :label="$t('registeredBranch')"
-      :rules="[
-        (val) => {
-          const roles = getRole() || [];
-          const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
-            (role) => roles.includes(role),
-          );
-          return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
-        },
-      ]"
-      @filter="branchFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-3"
+        option-value="id"
+        option-label="name"
+        lazy-rules="ondemand"
+        v-model="registeredBranchId"
+        id="input-source-nationality"
+        for="input-source-nationality"
+        :dense="dense"
+        :readonly="readonly"
+        :options="branchOptions"
+        :hide-dropdown-icon="readonly"
+        :label="$t('registeredBranch')"
+        :rules="[
+          (val) => {
+            const roles = getRole() || [];
+            const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
+              (role) => roles.includes(role),
+            );
+            return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+          },
+        ]"
+        @filter="branchFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
 
-    <q-input
-      lazy-rules="ondemand"
-      id="input-service-name"
-      for="input-service-name"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('serviceName')"
-      v-model="serviceName"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      id="input-service-description"
-      for="input-service-description"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      type="textarea"
-      class="col-12"
-      :label="$t('serviceDetail')"
-      v-model="serviceDescription"
-    />
+      <q-input
+        lazy-rules="ondemand"
+        id="input-service-name"
+        for="input-service-name"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('serviceName')"
+        v-model="serviceName"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        id="input-service-description"
+        for="input-service-description"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('serviceDetail')"
+        v-model="serviceDescription"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index fc433013..edc88395 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -28,6 +28,9 @@ import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import TreeCompoent from 'src/components/TreeCompoent.vue';
+import DialogForm from 'src/components/DialogForm.vue';
+import ProfileBanner from 'src/components/ProfileBanner.vue';
+import SideMenu from 'src/components/SideMenu.vue';
 
 import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
@@ -159,14 +162,14 @@ const treeProductTypeAndGroup = computed(() => {
         type: 'group',
         children:
           item.id === currentIdGrop.value
-            ? recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
+            ? (recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
                 ...x,
                 type: 'type',
-              })) ?? []
-            : recordTreeProductType.value[item.id]?.map((x) => ({
+              })) ?? [])
+            : (recordTreeProductType.value[item.id]?.map((x) => ({
                   ...x,
                   type: 'type',
-                })) ?? item._count.type > 0
+                })) ?? item._count.type > 0)
               ? [
                   {
                     id: '',
@@ -416,6 +419,9 @@ const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
 const currentIdProduct = ref<string>('');
 
+const currentStatusGroup = ref<Status>('CREATED');
+const currentStatusType = ref<Status>('CREATED');
+
 const branchOption = ref<{ id: string; name: string }[]>([]);
 
 const currentStatus = ref<Status | 'All'>('All');
@@ -688,9 +694,10 @@ async function toggleStatusType(id: string, status: Status) {
 }
 
 async function toggleStatusGroup(id: string, status: Status) {
-  await editProductService(id, {
+  const res = await editProductService(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
+  if (res) currentStatusGroup.value = res.status;
 
   await fetchListGroups();
   flowStore.rotate();
@@ -858,6 +865,8 @@ function undoProductGroup() {
 
 function assignFormDataGroup(data: ProductGroup) {
   previousValue.value = data;
+  currentStatusGroup.value = data.status;
+  currentIdGrop.value = data.id;
 
   formDataGroup.value = {
     remark: data.remark,
@@ -975,7 +984,7 @@ function clearFormGroup() {
     name: '',
     code: '',
   };
-
+  currentStatusGroup.value = 'CREATED';
   dialogInputForm.value = false;
 }
 
@@ -3311,23 +3320,82 @@ watch(
     </div>
   </div>
 
-  <FormDialog
+  <DialogForm
     v-model:modal="dialogInputForm"
     noAddress
     :title="$t('addProduct')"
     :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
     :close="clearFormGroup"
   >
-    <template #information>
-      <BasicInformation
-        dense
-        :isType="productMode === 'type'"
-        v-model:remark="formDataGroup.remark"
-        v-model:name="formDataGroup.name"
-        v-model:detail="formDataGroup.detail"
+    <div class="q-mx-lg q-mt-lg">
+      <ProfileBanner
+        active
+        hideFade
+        useToggle
+        icon="mdi-folder-plus"
+        :title="formDataGroup.name"
+        :caption="formDataGroup.code"
+        :menu="[
+          {
+            icon: 'mdi-office-building-outline',
+            color: 'hsl(var(--info-bg))',
+            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"
+        @update:toggle-status="
+          () => {
+            currentStatusGroup =
+              currentStatusGroup === 'CREATED' ? 'INACTIVE' : 'CREATED';
+          }
+        "
       />
-    </template>
-  </FormDialog>
+    </div>
+    <div
+      class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
+      id="group-form"
+    >
+      <div
+        class="col"
+        style="height: 100%; max-height: 100; overflow-y: auto"
+        v-if="$q.screen.gt.sm"
+      >
+        <div class="q-py-md q-pl-md q-pr-sm">
+          <SideMenu
+            :menu="[
+              {
+                name: $t('formDialogTitleInformation'),
+                anchor: 'form-group',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#group-form"
+          />
+        </div>
+      </div>
+      <div
+        class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+        id="customer-form-content"
+        style="height: 100%; max-height: 100%; overflow-y: auto"
+      >
+        <BasicInformation
+          ide="form-group"
+          dense
+          :isType="productMode === 'type'"
+          v-model:remark="formDataGroup.remark"
+          v-model:name="formDataGroup.name"
+          v-model:detail="formDataGroup.detail"
+        />
+      </div>
+    </div>
+  </DialogForm>
 
   <DrawerInfo
     :show-edit="!currentStatusProduct"
@@ -3373,11 +3441,61 @@ watch(
     :delete-data="() => deleteProductById()"
     :close="() => (drawerInfo = false)"
   >
-    <template #info>
-      <InfoForm noAddress>
-        <template #information>
-          <!-- <AppBox class="q-ma-md" bordered> -->
+    <InfoForm>
+      <div class="q-mx-lg q-mt-lg">
+        <ProfileBanner
+          :active="currentStatusGroup !== '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)"
+          :title="formDataGroup.name"
+          :caption="formDataGroup.code"
+          :toggleTitle="$t('formDialogTitleUserStatus')"
+          :menu="[
+            {
+              icon: 'mdi-office-building-outline',
+              color: 'hsl(var(--info-bg))',
+              bgColor: 'var(--surface-1)',
+            },
+          ]"
+          @update:toggle-status="
+            async (v) => {
+              await triggerChangeStatus(currentIdGrop, v, 'group');
+            }
+          "
+        />
+      </div>
+
+      <div
+        class="col surface-1 q-ma-lg rounded bordered scroll row"
+        id="group-info"
+      >
+        <div class="col">
+          <div style="position: sticky; top: 0" class="q-pa-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('formDialogTitleInformation'),
+                  anchor: 'info-group',
+                },
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#group-info"
+            />
+          </div>
+        </div>
+
+        <div class="col-10 q-pa-md q-gutter-y-xl">
           <BasicInformation
+            id="info-group"
             dense
             :isType="productMode === 'type'"
             :readonly="!isEdit"
@@ -3386,10 +3504,9 @@ watch(
             v-model:code="formDataGroup.code"
             v-model:detail="formDataGroup.detail"
           />
-          <!-- </AppBox> -->
-        </template>
-      </InfoForm>
-    </template>
+        </div>
+      </div>
+    </InfoForm>
   </DrawerInfo>
 
   <FormDialog
@@ -4086,8 +4203,8 @@ watch(
 }
 
 .status-inactive {
-  --_branch-status-color: var(--red-4-hsl);
-  --_branch-badge-bg: var(--red-4-hsl);
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
   filter: grayscale(0.5);
   opacity: 0.5;
 }