diff --git a/index.html b/index.html
index 0d4cc7e..93bfac4 100644
--- a/index.html
+++ b/index.html
@@ -6,27 +6,40 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
+        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
+        crossorigin="anonymous"></script>
     <link rel="stylesheet" href="dist/style.css">
 </head>
 
 <body>
     <section class="sidebar">
         <nav class="main">
-            <ul>
+            <ul id="tree-root">
                 <li><a href="#" class="icon icon-dashboard">Dashboard</a></li>
                 <li><a href="#" class="icon icon-machines">Machines</a></li>
                 <li><a href="#" class="icon icon-events">Events</a></li>
                 <li><a href="#" class="icon icon-reports">Reports</a></li>
                 <li>
-                    <a href="#" class="icon icon-call-center">Call Center</a>
-                    <ul class="subnav">
+                    <a href="#" class="icon icon-call-center collapsed" data-toggle="collapse"
+                        data-target="#call-center-collapse">
+                        Call Center</a>
+                    <ul class="subnav collapse" id="call-center-collapse" data-parent="#tree-root">
                         <li><a href="#">Ticket Stream</a></li>
                         <li><a href="#">Configuration</a></li>
                     </ul>
                 </li>
                 <li>
-                    <a href="#" class="icon icon-warehouse-management">Warehouse Management</a>
-                    <ul class="subnav">
+                    <a href="#" class="icon icon-warehouse-management" data-toggle="collapse"
+                        data-target="#warehouse-management-collapse">
+                        Warehouse Management
+                    </a>
+                    <ul class="subnav collapse show" id="warehouse-management-collapse" data-parent="#tree-root">
                         <li><a href="#">Product Warehouse</a></li>
                         <li>
                             <a href="#">Spare part Warehouse</a>
@@ -43,7 +56,7 @@
                                             </ul>
                                         </li>
                                     </ul>
-                                    </li>
+                                </li>
                                 <li>
                                     <a href="#">Reporting</a>
                                     <ul>
