diff --git a/src/components/shared/TreeView.vue b/src/components/shared/TreeView.vue
index 3246b791..daae9c8c 100644
--- a/src/components/shared/TreeView.vue
+++ b/src/components/shared/TreeView.vue
@@ -39,6 +39,7 @@ type Props = {
 
 const props = defineProps<Props>();
 const nodes = defineModel<Node[]>('nodes', { required: true });
+const filterText = defineModel<string>('filterText', { required: false });
 
 const emits = defineEmits<{
   (e: 'checked'): void;
@@ -91,6 +92,25 @@ function toggleExpand(node: Node, ancestor?: []) {
   node.opened = !node.opened;
   emits('open', node, ancestor);
 }
+
+function filterNode(text: string, node: Node, ancestor?: Node[]) {
+  if (!text) return;
+
+  const getTitle = (n: Node): string => n[props.keyTitle || 'title'];
+  const getSubtitle = (n: Node): string => n[props.keySubtitle || 'subtitle'];
+  const recursiveFilter = (n: Node): boolean => {
+    if (!n.children) {
+      return getTitle(n).includes(text) || getSubtitle(n).includes(text);
+    }
+    return n.children.some((v) => recursiveFilter(v));
+  };
+
+  return (
+    ancestor?.some(
+      (v) => getTitle(v).includes(text) || getSubtitle(v).includes(text),
+    ) || recursiveFilter(node)
+  );
+}
 </script>
 
 <template>
@@ -101,189 +121,195 @@ function toggleExpand(node: Node, ancestor?: []) {
       'last-children': level && level === maxLevel,
     }"
   >
-    <div v-for="(node, i) in nodes" class="tree-item" :key="i">
-      <slot
-        v-if="$slots['item']"
-        name="item"
-        :data="{ node, toggleExpand, toggleCheck }"
-      />
+    <template v-for="(node, i) in nodes" :key="i">
+      <div
+        class="tree-item"
+        v-if="filterText ? filterNode(filterText, node, ancestorNode) : true"
+      >
+        <slot
+          v-if="$slots['item']"
+          name="item"
+          :data="{ node, toggleExpand, toggleCheck }"
+        />
 
-      <div class="row items-center" v-else>
-        <div v-if="!level && movable" style="width: var(--size-16)">
-          <q-btn
-            id="btn-up"
-            for="btn-up"
-            icon="mdi-arrow-up"
-            size="sm"
-            dense
-            flat
-            round
-            :disable="i === 0"
-            style="color: hsl(var(--text-mute-2))"
-            @click.stop="$emit('moveUp', node)"
-          />
-          <q-btn
-            id="btn-down"
-            for="btn-down"
-            icon="mdi-arrow-down"
-            size="sm"
-            dense
-            flat
-            round
-            class="q-mx-sm"
-            :disable="i === nodes.length - 1"
-            style="color: hsl(var(--text-mute-2))"
-            @click.stop="$emit('moveDown', node)"
-          />
-        </div>
-        <div
-          class="item__content row items-center no-wrap col"
-          :class="{ active: selectedNode?.includes(node) }"
-          @click="
-            () => (selectable ? $emit('select', node) : toggleExpand(node))
-          "
-        >
-          <div style="width: var(--size-6); margin-right: var(--size-1)">
-            <div
-              v-if="level !== maxLevel"
-              class="q-mr-md"
-              :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="
+        <div class="row items-center" v-else>
+          <div v-if="!level && movable" style="width: var(--size-16)">
+            <q-btn
+              id="btn-up"
+              for="btn-up"
+              icon="mdi-arrow-up"
+              size="sm"
+              dense
+              flat
+              round
+              :disable="i === 0"
+              style="color: hsl(var(--text-mute-2))"
+              @click.stop="$emit('moveUp', node)"
+            />
+            <q-btn
+              id="btn-down"
+              for="btn-down"
+              icon="mdi-arrow-down"
+              size="sm"
+              dense
+              flat
+              round
+              class="q-mx-sm"
+              :disable="i === nodes.length - 1"
+              style="color: hsl(var(--text-mute-2))"
+              @click.stop="$emit('moveDown', node)"
+            />
+          </div>
+          <div
+            class="item__content row items-center no-wrap col"
+            :class="{ active: selectedNode?.includes(node) }"
+            @click="
+              () => (selectable ? $emit('select', node) : toggleExpand(node))
+            "
+          >
+            <div style="width: var(--size-6); margin-right: var(--size-1)">
+              <div
+                v-if="level !== maxLevel"
+                class="q-mr-md"
+                :style="`color: ${
                   !node.displayDropIcon &&
                   (!node.children || node.children.length === 0)
-                    ? $emit('select', node)
-                    : toggleExpand(node)
-                "
-              />
+                    ? '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="
+                    !node.displayDropIcon &&
+                    (!node.children || node.children.length === 0)
+                      ? $emit('select', node)
+                      : toggleExpand(node)
+                  "
+                />
+              </div>
             </div>
-          </div>
 
-          <label
-            v-if="!hideCheckBox"
-            class="flex items-center item__checkbox"
-            @click.stop
-          >
-            <input
-              type="checkbox"
-              v-model="node.checked"
-              :indeterminate="
-                node.children?.some((v) => !v.checked) &&
-                !node.children?.every((v) => !v.checked)
-              "
-              :style="`accent-color: var(--blue-7)`"
-              @click="toggleCheck(node)"
-            />
-          </label>
-
-          <div
-            class="item__icon flex items-center justify-center"
-            :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%)`"
+            <label
+              v-if="!hideCheckBox"
+              class="flex items-center item__checkbox"
+              @click.stop
             >
-              <Icon
-                v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
-                :icon="node.icon || dec.icon"
-                class="full-width full-height"
+              <input
+                type="checkbox"
+                v-model="node.checked"
+                :indeterminate="
+                  node.children?.some((v) => !v.checked) &&
+                  !node.children?.every((v) => !v.checked)
+                "
+                :style="`accent-color: var(--blue-7)`"
+                @click="toggleCheck(node)"
               />
+            </label>
+
+            <div
+              class="item__icon flex items-center justify-center"
+              :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
+                  v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
+                  :icon="node.icon || dec.icon"
+                  class="full-width full-height"
+                />
+              </div>
             </div>
-          </div>
 
-          <div class="column">
-            <span class="item__title">
-              {{ node[keyTitle || 'title'] || 'No Title' }}
-            </span>
-            <span class="item__subtitle">
-              {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
-            </span>
-          </div>
+            <div class="column">
+              <span class="item__title">
+                {{ node[keyTitle || 'title'] || 'No Title' }}
+              </span>
+              <span class="item__subtitle">
+                {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
+              </span>
+            </div>
 
-          <DeleteButton
-            v-if="deleteable"
-            class="q-ml-auto"
-            icon-only
-            @click.stop="$emit('delete', node)"
-          />
+            <DeleteButton
+              v-if="deleteable"
+              class="q-ml-auto"
+              icon-only
+              @click.stop="$emit('delete', node)"
+            />
+          </div>
         </div>
-      </div>
 
-      <transition name="slide">
-        <div
-          v-if="node.opened && node.children && node.children.length > 0"
-          :class="{ 'q-pl-xl': movable }"
-          class="tree-children"
-        >
-          <TreeView
-            :iconSize
-            :hideCheckBox
-            :selectable
-            :selectedNode
-            :deleteable="deleteableDeep"
-            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');
-              }
-            "
-            @unchecked="
-              () => {
-                if (node.children?.every((v) => v.checked === false)) {
-                  node.checked = false;
+        <transition name="slide">
+          <div
+            v-if="node.opened && node.children && node.children.length > 0"
+            :class="{ 'q-pl-xl': movable }"
+            class="tree-children"
+          >
+            <TreeView
+              :iconSize
+              :hideCheckBox
+              :selectable
+              :selectedNode
+              :filterText
+              :deleteable="deleteableDeep"
+              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],
+                  );
                 }
-                $emit('checked');
-              }
-            "
-            @select="
-              (v) =>
-                $emit(
-                  'select',
-                  v,
-                  !props.ancestorNode || props.ancestorNode.length === 0
-                    ? [node]
-                    : [...props.ancestorNode, node],
-                )
-            "
-            :level="(level || 0) + 1"
-            :ancestorNode="
-              !props.ancestorNode || props.ancestorNode.length === 0
-                ? [node]
-                : [...props.ancestorNode, node]
-            "
-            :expandable
-            :decoration
-          />
-        </div>
-      </transition>
-      <q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
-    </div>
+              "
+              @checked="
+                () => {
+                  node.checked = true;
+                  $emit('checked');
+                }
+              "
+              @unchecked="
+                () => {
+                  if (node.children?.every((v) => v.checked === false)) {
+                    node.checked = false;
+                  }
+                  $emit('checked');
+                }
+              "
+              @select="
+                (v) =>
+                  $emit(
+                    'select',
+                    v,
+                    !props.ancestorNode || props.ancestorNode.length === 0
+                      ? [node]
+                      : [...props.ancestorNode, node],
+                  )
+              "
+              :level="(level || 0) + 1"
+              :ancestorNode="
+                !props.ancestorNode || props.ancestorNode.length === 0
+                  ? [node]
+                  : [...props.ancestorNode, node]
+              "
+              :expandable
+              :decoration
+            />
+          </div>
+        </transition>
+        <q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
+      </div>
+    </template>
   </div>
 </template>
 
diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index 01b19094..fdc66237 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -540,6 +540,7 @@ watch(
                         movable
                         deleteable
                         selectable
+                        :filter-text="inputSearch"
                         :selected-node="selectedNode"
                         @move-up="(node) => toggleMove(node, 'up')"
                         @move-down="(node) => toggleMove(node, 'down')"