diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index 7c186b81..e17e1a4e 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -38,7 +38,6 @@ const nodes = ref([
   {
     title: props.service?.name,
     subtitle: props.service?.code || ' ',
-    selected: false,
     opened: true,
     children: (function () {
       const noNameObjects = workItems.value
@@ -99,7 +98,6 @@ watch(
       {
         title: props.service?.name,
         subtitle: props.service?.code || ' ',
-        selected: false,
         opened: true,
         children: (function () {
           const noNameObjects = workItems.value
diff --git a/src/components/shared/TreeView.vue b/src/components/shared/TreeView.vue
index 60bbd5d6..7e599df7 100644
--- a/src/components/shared/TreeView.vue
+++ b/src/components/shared/TreeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 type Node = {
   [key: string]: any;
@@ -9,6 +9,7 @@ type Node = {
   bg?: string;
   fg?: string;
   icon?: string;
+  displayDropIcon?: boolean;
   children?: Node[];
 };
 
@@ -36,6 +37,7 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
 const emits = defineEmits<{
   (e: 'checked'): void;
   (e: 'select', node: Node, ancestor?: Node[]): void;
+  (e: 'open', node: Node, ancestor?: Node[]): void;
 }>();
 
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
@@ -59,8 +61,9 @@ function toggleCheck(node: Node) {
   if (node.checked === true) emits('checked');
 }
 
-function toggleExpand(node: Node) {
+function toggleExpand(node: Node, ancestor?: []) {
   node.opened = !node.opened;
+  emits('open', node, ancestor);
 }
 </script>
 
@@ -98,13 +101,25 @@ function toggleExpand(node: Node) {
           <div
             v-if="level !== maxLevel"
             class="q-mr-md"
-            :style="`color: ${node.children?.length === 0 || !node.children ? 'transparent' : 'var(--stone-4)'}`"
+            :style="`color: ${
+              !node.displayDropIcon &&
+              (!node.children || node.children.length === 0)
+                ? 'transparent'
+                : $q.dark.isActive
+                  ? 'var(--gray-7)'
+                  : 'var(--gray-4)'
+            }`"
           >
             <q-icon
               name="mdi-chevron-down-circle"
               size="sm"
               :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
-              @click.stop="toggleExpand(node)"
+              @click.stop="
+                !node.displayDropIcon &&
+                (!node.children || node.children.length === 0)
+                  ? $emit('select', node)
+                  : toggleExpand(node)
+              "
             />
           </div>
 
@@ -125,6 +140,7 @@ function toggleExpand(node: Node) {
             :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
           >
             <div
+              class="flex items-center justify-center"
               :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
             >
               <Icon
@@ -157,16 +173,38 @@ function toggleExpand(node: Node) {
             class="item__children"
             v-if="node.children"
             v-model:nodes="node.children"
+            @open="
+              (n) => {
+                $emit(
+                  'open',
+                  n,
+                  !props.ancestorNode || props.ancestorNode.length === 0
+                    ? [node]
+                    : [...props.ancestorNode, node],
+                );
+              }
+            "
             @checked="
               () => {
                 node.checked = true;
                 $emit('checked');
               }
             "
-            @select="(v) => $emit('select', v, props.ancestorNode)"
+            @select="
+              (v) =>
+                $emit(
+                  'select',
+                  v,
+                  !props.ancestorNode || props.ancestorNode.length === 0
+                    ? [node]
+                    : [...props.ancestorNode, node],
+                )
+            "
             :level="(level || 0) + 1"
             :ancestorNode="
-              !props.ancestorNode ? [node] : [...props.ancestorNode, node]
+              !props.ancestorNode || props.ancestorNode.length === 0
+                ? [node]
+                : [...props.ancestorNode, node]
             "
             :expandable
             :decoration
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index dd37a96e..5843c80d 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -65,6 +65,17 @@ import { useQuotationStore } from 'src/stores/quotations';
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';
 
+type Node = {
+  [key: string]: any;
+  opened?: boolean;
+  checked?: boolean;
+  bg?: string;
+  fg?: string;
+  icon?: string;
+  displayDropIcon?: boolean;
+  children?: Node[];
+};
+
 const flowStore = useFlowStore();
 const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   {
@@ -91,49 +102,92 @@ const { state: customerFormState, currentFormData: customerFormData } =
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 
-const test1 = ref(true);
-const test2 = ref(true);
+const test1 = ref(false);
+const test2 = ref(false);
 const dialog = ref(true);
-const nodes = ref([
+const nodes = ref<Node[]>([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',
     subtitle: 'TG01000000001',
     selected: false,
+    type: 'group',
     children: [
       {
-        title: 'งานที่ 1',
+        title:
+          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
         subtitle: 'TG01000000001',
         selected: false,
+        type: 'type',
         children: [
           {
-            title: 'สินค้า 1',
+            title: 'งาน 1',
             subtitle: 'TG01000000001',
             selected: false,
+            type: 'work',
+            children: [
+              {
+                title: 'สินค้า 1',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 2',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 3',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+            ],
           },
+        ],
+      },
+    ],
+  },
+
+  {
+    title: 'กลุ่มสินค้าและบริการที่ 2',
+    subtitle: 'TG01000000001',
+    selected: false,
+    type: 'group',
+    children: [
+      {
+        title:
+          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
+        subtitle: 'TG01000000001',
+        selected: false,
+        type: 'type',
+        children: [
           {
-            title: 'สินค้า 2',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 3',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 4',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 5',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 6',
+            title: 'งาน 1',
             subtitle: 'TG01000000001',
             selected: false,
+            type: 'work',
+            children: [
+              {
+                title: 'สินค้า 1',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 2',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 3',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+            ],
           },
         ],
       },
@@ -288,8 +342,75 @@ async function getService(id: string, force = false) {
 }
 
 function convertToTree() {
-  // TODO: convert product or service into selectable tree
-  // NOTE: this is meant to be used inside getService() and getProduct() before return and after return
+  const node = productGroup.value.map((g) => ({
+    id: g.id,
+    title: g.name,
+    subtitle: g.code,
+    detail: g.detail,
+    remark: g.remark,
+    type: 'group',
+    displayDropIcon: g._count.service + g._count.product !== 0,
+  }));
+  nodes.value = node;
+}
+
+async function openProductServiceTree(node: Node, anchestor?: Node[]) {
+  if (node.type === 'group') {
+    const curGroupNode = nodes.value.find((v) => v.id === node.id);
+    await getAllService(node.id);
+    if (!curGroupNode) return;
+
+    curGroupNode.children = serviceList.value[curGroupNode.id]?.map((t) => ({
+      id: t.id,
+      title: t.name,
+      subtitle: t.code,
+      detail: t.detail,
+      type: 'type',
+      displayDropIcon: t.work.length > 0,
+    }));
+  }
+
+  if (node.type === 'type' && anchestor && anchestor[0].children) {
+    const curTypeNode = anchestor[0].children.find((v) => v.id === node.id);
+    const curType = serviceList.value[anchestor[0].id]?.find(
+      (v) => v.id === node.id,
+    );
+    if (!curTypeNode) return;
+    const noNameWork = curType.work
+      .filter((v) => !v.name)
+      .flatMap((v) =>
+        v.productOnWork.map((p) => ({
+          id: p.product.id,
+          title: p.product.name,
+          subtitle: p.product.code,
+          detail: p.product.detail,
+          remark: p.product.remark,
+          type: 'product',
+          icon: 'mdi-shopping-outline',
+          bg: 'hsla(var(--teal-10-hsl)/0.1)',
+          fg: 'var(--teal-10)',
+        })),
+      );
+    const withNameWork = curType.work
+      .filter((v) => v.name)
+      .flatMap((w) => ({
+        id: w.id,
+        title: w.name,
+        subtitle: ' ',
+        attributes: w.attributes,
+        type: 'work',
+        displayDropIcon: w.productOnWork.length > 0,
+        children: w.productOnWork.map((p) => ({
+          id: p.product.id,
+          title: p.product.name,
+          subtitle: p.product.code,
+          detail: p.product.detail,
+          remark: p.product.remark,
+          type: 'product',
+        })),
+      }));
+    curTypeNode.children = noNameWork.concat(withNameWork);
+  }
 }
 
 const quotationStore = useQuotationStore();
@@ -354,6 +475,7 @@ watch(
 </script>
 
 <template>
+  {{ convertToTree() }}
   <div class="column full-height no-wrap">
     <!-- SEC: stat -->
     <section class="text-body-2 q-mb-xs flex items-center">
@@ -618,8 +740,8 @@ watch(
                 :date="new Date(n.createdAt).toLocaleString()"
                 :amount="n.workerCount"
                 :customer-name="
-                  n.customerBranch.registerName ||
-                  `${n.customerBranch.firstName || '-'} ${n.customerBranch.lastName}`
+                  n.customerBranch?.registerName ||
+                  `${n.customerBranch?.firstName || '-'} ${n.customerBranch?.lastName || ''}`
                 "
                 :reporter="n.actorName"
                 :total-price="n.totalPrice"
@@ -1252,6 +1374,8 @@ watch(
 
   <ProductServiceForm
     v-model="pageState.productServiceModal"
+    v-model:nodes="nodes"
+    @open="openProductServiceTree"
   ></ProductServiceForm>
 </template>
 
diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index 31394933..34d0b686 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
 import DialogForm from 'src/components/DialogForm.vue';
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 
+import {
+  ProductGroup,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
+
 type Node = {
   [key: string]: any;
   opened?: boolean;
@@ -13,114 +19,25 @@ type Node = {
   children?: Node[];
 };
 
+defineEmits<{
+  (e: 'open', node: Node, ancestorNode?: Node[]): void;
+}>();
+
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
+const nodes = defineModel<Node[]>('nodes', { default: [] });
 
 const splitterModel = ref(20);
-const subSplitterModel = ref(100);
+const infoDrawer = ref(false);
 const currentTab = ref('1');
 const currentSelectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
 const currentSelectedNode = ref<Node[]>([]);
 
-const nodes = ref([
-  {
-    title: 'กลุ่มสินค้าและบริการที่ 1',
-    subtitle: 'TG01000000001',
-    selected: false,
-    type: 'group',
-    children: [
-      {
-        title:
-          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
-        subtitle: 'TG01000000001',
-        selected: false,
-        type: 'type',
-        children: [
-          {
-            title: 'งาน 1',
-            subtitle: 'TG01000000001',
-            selected: false,
-            type: 'work',
-            children: [
-              {
-                title: 'สินค้า 1',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 2',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 3',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-
-  {
-    title: 'กลุ่มสินค้าและบริการที่ 2',
-    subtitle: 'TG01000000001',
-    selected: false,
-    type: 'group',
-    children: [
-      {
-        title:
-          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
-        subtitle: 'TG01000000001',
-        selected: false,
-        type: 'type',
-        children: [
-          {
-            title: 'งาน 1',
-            subtitle: 'TG01000000001',
-            selected: false,
-            type: 'work',
-            children: [
-              {
-                title: 'สินค้า 1',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 2',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 3',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]);
-
 function triggerInfo() {
-  if (subSplitterModel.value === 100) {
-    subSplitterModel.value = 60;
-  } else {
-    subSplitterModel.value = 100;
-  }
+  infoDrawer.value = !infoDrawer.value;
 }
 
-function toggleSelected(node: Node) {
+function toggleSelected(node: Node, ancestorNode?: Node[]) {
   if (currentSelectedNode.value.includes(node)) {
     currentSelectedNode.value = [];
   } else {
@@ -143,6 +60,7 @@ watch(
 <template>
   <div>
     <DialogForm
+      bg-color="var(--surface-2)"
       v-model:modal="model"
       :title="$t('general.list', { msg: $t('productService.title') })"
       :submit-label="$t('general.select', { msg: $t('productService.title') })"
@@ -206,17 +124,10 @@ watch(
             </header>
 
             <article class="col">
-              <q-splitter
-                disable
-                v-model="subSplitterModel"
-                :limits="[0, 100]"
-                before-class="overflow-hidden"
-                after-class="overflow-hidden"
-                style="height: 100%"
-              >
+              <div style="height: 100%" class="relative-position scroll">
                 <!-- SEC: tree view body -->
-                <template v-slot:before>
-                  <section class="full-height column">
+                <section>
+                  <div class="full-height column">
                     <span
                       v-if="false"
                       class="col column items-center justify-center app-text-muted"
@@ -232,13 +143,18 @@ watch(
                         })
                       }}
                     </span>
-                    <article>
+                    <article v-else>
                       <TreeView
                         class="full-width q-pt-sm"
                         v-model:nodes="nodes"
                         expandable
                         selectable
                         :selected-node="currentSelectedNode"
+                        @open="
+                          (n, ancestor) => {
+                            $emit('open', n, ancestor);
+                          }
+                        "
                         @select="toggleSelected"
                         :decoration="[
                           {
@@ -268,12 +184,16 @@ watch(
                         ]"
                       />
                     </article>
-                  </section>
-                </template>
+                  </div>
+                </section>
 
                 <!-- SEC: info -->
-                <template v-slot:after>
-                  <section class="column no-wrap surface-1 full-height">
+                <transition name="info-slide">
+                  <div
+                    v-if="infoDrawer"
+                    class="column no-wrap surface-1 full-height absolute-right"
+                    style="z-index: 1; width: 20vw"
+                  >
                     <span
                       v-if="currentSelectedType === ''"
                       class="col column items-center justify-center app-text-muted"
@@ -381,9 +301,9 @@ watch(
                         </span>
                       </div>
                     </article>
-                  </section>
-                </template>
-              </q-splitter>
+                  </div>
+                </transition>
+              </div>
             </article>
           </section>
         </template>
@@ -391,3 +311,19 @@ watch(
     </DialogForm>
   </div>
 </template>
+<style scoped>
+.info-slide-enter-from {
+  transform: translate(100%, 0);
+}
+
+.info-slide-enter-active {
+  transition: all 0.1s ease-in-out;
+}
+
+.info-slide-leave-active {
+  transition: all 0.1s ease-in-out;
+}
+.info-slide-leave-to {
+  transform: translate(100%, 0);
+}
+</style>
diff --git a/src/stores/product-service/types.ts b/src/stores/product-service/types.ts
index a32a28ec..4ebae4d3 100644
--- a/src/stores/product-service/types.ts
+++ b/src/stores/product-service/types.ts
@@ -35,6 +35,7 @@ export interface WorkCreate {
 }
 
 export interface Work {
+  productOnWork: ProductOnWork[];
   id: string;
   order: number;
   name: string;