diff --git a/resources/js/client-custom/nestedList.js b/resources/js/client-custom/nestedList.js
new file mode 100644
index 0000000..0cfdde7
--- /dev/null
+++ b/resources/js/client-custom/nestedList.js
@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.nested-list')?.forEach(function (list) {
+        list.querySelectorAll('li').forEach(function (li) {
+            // Check if the <li> has a <ul> child
+            const ulChild = Array.from(li.children).find(child => child.tagName === 'UL');
+
+            // Check if the <ul> is not empty (has at least one <li> child)
+            const hasLiChildInUl = ulChild && ulChild.querySelectorAll('li').length > 0;
+
+            if (hasLiChildInUl) {
+                let plus = document.createElement('i');
+                plus.setAttribute('class','ri-arrow-down-wide-line float-end mx-2');
+                li.prepend(plus);
+                li.classList.add('nested-parent');
+                plus.addEventListener('click',function () {
+                    this.parentNode.querySelector(':scope > ul').classList.toggle('active');
+                    if (this.classList.contains('ri-arrow-down-wide-line')){
+                        span.classList.remove('ri-arrow-down-wide-line');
+                        span.classList.add('ri-arrow-up-wide-line');
+                    }else{
+                        span.classList.remove('ri-arrow-up-wide-line');
+                        span.classList.add('ri-arrow-down-wide-line');
+
+                    }
+                });
+            }
+        });
+    });
+});
diff --git a/resources/sass/client-custom/_zfix.scss b/resources/sass/client-custom/_zfix.scss
index 46e8a6c..9d1944d 100644
--- a/resources/sass/client-custom/_zfix.scss
+++ b/resources/sass/client-custom/_zfix.scss
@@ -150,3 +150,17 @@ ul.pagination {
 .btn-outline-light:hover{
     color: black !important;
 }
+
+.nested-list{
+    .ri-arrow-down-wide-line, .ri-arrow-up-wide-line{
+        cursor: pointer;
+    }
+    .nested-parent{
+        ul{
+            display: none;
+        }
+    }
+    .active{
+        display: block !important;
+    }
+}