diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4429fdd3..5a9fbc0b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -4,6 +4,10 @@ import AppBox from 'components/app/AppBox.vue';
 import ProductCardComponent from 'src/components/04_product-service/ProductCardComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
 import NewProductCardCompoent from 'components/04_product-service/NewProductCardComponent.vue';
+import DrawerInfo from 'src/components/DrawerInfo.vue';
+import BasicInformation from 'src/components/04_product-service/BasicInformation.vue';
+import FormDialog from 'src/components/FormDialog.vue';
+import { dialog } from 'src/stores/utils';
 const cardData = ref({
   title: 'งาน MCU',
   subtitle: 'G00000000001',
@@ -12,6 +16,14 @@ const cardData = ref({
   date: new Date(),
 });
 
+const cardTypeData = ref({
+  title: 'บริการพิสูจน์สัญชาติ',
+  subtitle: 'TG10000000001',
+  color: 'var(--purple-11)',
+  status: true,
+  date: new Date(),
+});
+
 const stat = ref<
   {
     count: number;
@@ -24,19 +36,80 @@ const stat = ref<
   { count: 12, label: 'branchLabel', color: 'green' },
 ]);
 
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 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 groupName = ref<string>('test');
+
+const formData = ref({
+  remark: '',
+  detail: '',
+  name: '',
+  code: '',
+});
+
+async function submitGroup() {
+  console.log(formData.value);
+}
+async function submitType() {
+  console.log(formData.value);
+}
+
+async function deleteProductById() {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('deleteConfirmTitle'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('deleteConfirmMessage'),
+    action: async () => {
+      console.log('deleted');
+      drawerInfo.value = false;
+    },
+    cancel: () => {},
+  });
+}
 </script>
 
 <template>
-  <div class="column q-pb-lg">
-    <div class="text-h6 text-weight-bold q-mb-md">กลุ่มสินค้าและบริการ</div>
+  <div v class="column q-pb-lg">
+    <div v-if="isViewDetailGroup" class="row items-center q-mb-md">
+      <q-btn
+        round
+        icon="mdi-arrow-left"
+        flat
+        dense
+        @click="isViewDetailGroup = false"
+        class="q-mr-md"
+      />
+      <div class="text-h6 text-weight-bold">
+        {{ $t('ProductAndServiceType') }}
+      </div>
+      <div class="text-h6 app-text-muted q-mx-sm">/</div>
+      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
+        {{ groupName }}
+      </div>
+    </div>
+    <div v-else class="text-h6 text-weight-bold q-mb-md">
+      {{ $t('ProductAndService') }}
+    </div>
     <AppBox bordered class="q-mb-md">
       <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
     </AppBox>
     <AppBox bordered style="min-height: 80vh">
       <div class="row justify-between">
-        <div class="text-h6 text-weight-bold q-mb-md">
-          กลุ่มสินค้าและบริการทั้งหมด
+        <div v-if="isViewDetailGroup" class="text-h6 text-weight-bold q-mb-md">
+          {{ $t('ProductAndServiceType') }}
+        </div>
+        <div v-else class="text-h6 text-weight-bold q-mb-md">
+          {{ $t('ProductAndServiceAll') }}
         </div>
         <div class="row q-px-md q-pb-md">
           <q-input
@@ -88,28 +161,103 @@ const inputSearch = ref<string>('');
       <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 6"
+          v-for="i in isViewDetailGroup ? 4 : 6"
           :key="i"
         >
           <ProductCardComponent
+            v-if="isViewDetailGroup"
+            :title="cardTypeData.title"
+            :subtitle="cardTypeData.subtitle"
+            :date="cardTypeData.date"
+            :status="cardTypeData.status"
+            :color="cardTypeData.color"
+            @view-detail="drawerInfo = true"
+            @on-click="drawerInfo = true"
+          />
+          <ProductCardComponent
+            v-else
             :title="cardData.title"
             :subtitle="cardData.subtitle"
             :date="cardData.date"
             :status="cardData.status"
             :color="cardData.color"
+            @view-detail="drawerInfo = true"
+            @on-click="isViewDetailGroup = true"
           />
         </div>
         <div
           :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
         >
           <NewProductCardCompoent
-            :label="'กลุ่มสินค้าและบริการ'"
+            v-if="isViewDetailGroup"
+            :label="$t('ProductAndServiceType')"
+            :isType="true"
+            @on-click="() => (dialogInputForm = true)"
+          />
+          <NewProductCardCompoent
+            v-else
+            :label="$t('ProductAndService')"
             :isType="false"
+            @on-click="() => (dialogInputForm = true)"
           />
         </div>
       </div>
     </AppBox>
   </div>
+
+  <FormDialog
+    v-model:modal="dialogInputForm"
+    noAddress
+    :title="$t('customerEmployerAdd')"
+    :submit="
+      () => {
+        console.log('submit');
+      }
+    "
+    :close="() => {}"
+  >
+    <template #information>
+      <BasicInformation
+        dense
+        :isType="isViewDetailGroup"
+        v-model:remark="formData.remark"
+        v-model:name="formData.name"
+        v-model:code="formData.code"
+        v-model:detail="formData.detail"
+      />
+    </template>
+  </FormDialog>
+
+  <DrawerInfo
+    ref="formDialogRef"
+    v-model:drawerOpen="drawerInfo"
+    :title="'test'"
+    :undo="() => (isEdit = false)"
+    :isEdit="isEdit"
+    :editData="() => (isEdit = true)"
+    :submit="() => (isViewDetailGroup ? submitGroup() : submitType())"
+    :delete-data="() => deleteProductById()"
+    :close="() => (drawerInfo = false)"
+  >
+    <template #info>
+      <AppBox class="q-ma-md" bordered>
+        <BasicInformation
+          dense
+          :isType="isViewDetailGroup"
+          :readonly="!isEdit"
+          v-model:remark="formData.remark"
+          v-model:name="formData.name"
+          v-model:code="formData.code"
+          v-model:detail="formData.detail"
+        />
+      </AppBox>
+    </template>
+  </DrawerInfo>
 </template>
 
-<style scoped></style>
+<style scoped>
+.hover-underline:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>