diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 7720f10f..345d2e9e 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -393,7 +393,10 @@ async function openProductServiceTree(node: Node, anchestor?: Node[]) {
         id: w.id,
         title: w.name,
         subtitle: ' ',
-        attributes: w.attributes,
+        attributes: {
+          additional: w.attributes.additional,
+          showTotalPrice: w.attributes.showTotalPrice,
+        },
         type: 'work',
         displayDropIcon: w.productOnWork.length > 0,
         children: w.productOnWork.map((p) => ({
diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index bc83c760..1d54335e 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -2,12 +2,7 @@
 import DialogForm from 'src/components/DialogForm.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';
+import useOptionStore from 'stores/options';
 
 type Node = {
   [key: string]: any;
@@ -23,6 +18,7 @@ defineEmits<{
   (e: 'open', node: Node, ancestorNode?: Node[]): void;
 }>();
 
+const optionStore = useOptionStore();
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
 const nodes = defineModel<Node[]>('nodes', { default: [] });
@@ -84,9 +80,25 @@ watch(
                 {{ $t('productService.group.title') }}
               </span>
             </header>
-            <article class="surface-1 col">
-              <!-- TODO: tree component -->
-              waiting for tree
+            <article class="surface-1 col q-pa-md scroll">
+              <nav
+                v-for="node in nodes"
+                :key="node.id"
+                :class="{ 'active-nav': currentSelectedNode.includes(node) }"
+                class="column q-py-xs q-px-md rounded q-mb-sm cursor-pointer"
+                @click.stop="
+                  () => {
+                    toggleSelected(node);
+                    $emit('open', node);
+                    node.opened = !node.opened;
+                  }
+                "
+              >
+                <span style="font-weight: 600">{{ node.title }}</span>
+                <span class="text-caption app-text-muted">
+                  {{ node.subtitle }}
+                </span>
+              </nav>
             </article>
           </section>
         </template>
@@ -253,7 +265,7 @@ watch(
                         </q-tab>
                       </q-tabs>
 
-                      <div class="q-pa-md column">
+                      <div class="q-pa-md column scroll">
                         <span v-if="currentTab === '1'">
                           <span class="app-text-muted">
                             {{
@@ -269,7 +281,9 @@ watch(
                               })
                             }}
                           </span>
-                          <aside class="surface-3 q-pa-md">-</aside>
+                          <aside class="surface-3 q-pa-md">
+                            {{ currentSelectedNode[0].detail || '-' }}
+                          </aside>
                         </span>
 
                         <span v-if="currentTab === '2'">
@@ -291,11 +305,26 @@ watch(
                             v-if="currentSelectedType !== 'work'"
                             class="surface-3 q-pa-md"
                           >
-                            -
+                            {{ currentSelectedNode[0].remark || '-' }}
                           </aside>
                           <aside v-else class="q-pt-md row q-gutter-sm">
-                            <div class="bordered q-py-xs q-px-sm rounded">
-                              บันทึกบริการ_Name
+                            <template
+                              v-if="
+                                currentSelectedNode[0].attributes.additional
+                                  .length > 0
+                              "
+                            >
+                              <div
+                                v-for="att in currentSelectedNode[0].attributes
+                                  .additional"
+                                :key="att"
+                                class="bordered q-py-xs q-px-sm rounded"
+                              >
+                                {{ optionStore.mapOption(att.fieldName) }}
+                              </div>
+                            </template>
+                            <div v-else>
+                              {{ $t('productService.service.noProperties') }}
                             </div>
                           </aside>
                         </span>
@@ -326,4 +355,9 @@ watch(
 .info-slide-leave-to {
   transform: translate(100%, 0);
 }
+
+.active-nav {
+  background: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
 </style>