diff --git a/content.js b/content.js
index 7574e4d..e8bcd59 100644
--- a/content.js
+++ b/content.js
@@ -33,6 +33,7 @@ if (isIE()) {
 
   // manage page content
   addLegend();
+  addExpandAndCollapseTreeButtons();
   addInfoBoxResizeBar();
   addSideNavLinks();
   addAutoComplete(document.getElementById("search_input"));
diff --git a/dag.js b/dag.js
index 3b39048..65f0347 100644
--- a/dag.js
+++ b/dag.js
@@ -77,6 +77,14 @@ function initGraph() {
     }
     updateShownNodeMap(treeData);
     drawTree(currentTree,"init");
+    if(zoomTransform === undefined)
+    {
+        zoomTransform = d3.zoomIdentity
+    }
+    zoomTransform.k = 2.2;
+    zoomTransform.x = -2000;
+    zoomTransform.y = 2000;
+    graph.attr('transform', zoomTransform);
 }
 
 /**
@@ -275,7 +283,13 @@ function drawTree(drawData,state)
     // keepTopLayersNodesUp();
     svgSelection = d3.select("svg");
     svgSelection.selectAll('*').remove();
-    svgSelection.attr("viewBox", [0, 0, 11000, 10000].join(" "));
+    if(state === "expand tree")
+    {
+        svgSelection.attr("viewBox", [0, 0, width, (window.innerHeight)*sizeFactor].join(" "));
+    }
+    else{
+        svgSelection.attr("viewBox", [0, 0, 11000, 10000].join(" "));
+    }
     svgSelection.call(zoom);
     graph = svgSelection.append("g");
 
@@ -699,11 +713,11 @@ function updateTreeGraph(drawData,currentNodeId)
 {
     generateTreeLayout(drawData);
     layout(dag);
-    let highlight = false;
-    if(currentHighlightedNodeId === currentNodeId)
-    {
-        highlight = true;
-    }
+    // let highlight = false;
+    // if(currentHighlightedNodeId === currentNodeId)
+    // {
+    //     highlight = true;
+    // }
     // keepTopLayersNodesUp();
 
     // Select nodes
@@ -725,10 +739,10 @@ function updateTreeGraph(drawData,currentNodeId)
             {
                 drawTree(drawData,"update");
                 graph.attr('transform', zoomTransform);
-                if(highlight)
-                {
+                // if(highlight)
+                // {
                     updateGraphPlot(currentNodeId);
-                }
+                // }
             }
         });
 }
@@ -797,4 +811,40 @@ function keepTopLayersNodesUp()
             node.points[0].y = rootsNodesCoord[node.source.data.id][1];
         }
     })
+}
+
+function expandTree()
+{
+    currentTree = structuredClone(treeData);
+    for(let i = 0;i<currentTree.length;++i)
+    {
+        shownNodesMap[currentTree[i]["id"]] = 1;
+    }
+    updateShownNodeMap(currentTree);
+    if(zoomTransform !== undefined)
+    {
+        zoomTransform.k = 1;
+        zoomTransform.x = 0;
+        zoomTransform.y = 0;
+    }
+    drawTree(currentTree,"expand tree");
+    graph.attr('transform', zoomTransform);
+
+}
+
+function collapseTree()
+{
+    currentTree = [];
+    shownNodesMap = {};
+    leavesNodesIds = [];
+    rootsNodesIds = [];
+    rootsNodesCoord = {};
+    initGraph();
+    // if(zoomTransform !== undefined)
+    // {
+    //     zoomTransform.k = 3;
+    //     zoomTransform.x = 0;
+    //     zoomTransform.y = 0;
+    //     graph.attr('transform', zoomTransform);
+    // }
 }
\ No newline at end of file
diff --git a/helper.js b/helper.js
index 9f8178e..48ed857 100644
--- a/helper.js
+++ b/helper.js
@@ -407,3 +407,34 @@ function addInfoBoxResizeBar()
   }
 }
 
+function addExpandAndCollapseTreeButtons()
+{
+
+  const buttonsContainer = document.createElement('div');
+  buttonsContainer.classList.add('tree_buttons_container');
+
+  const expandButton = document.createElement('div');
+  expandButton.classList.add('tree_btn');
+  expandButton.id = "expand_tree_btn";
+  let expandText = document.createTextNode('Expand Tree');
+  expandButton.appendChild(expandText);
+  expandButton.addEventListener('click',function(){
+    expandTree();
+  });
+
+  const collapseButton = document.createElement('div');
+  collapseButton.classList.add('tree_btn');
+  collapseButton.id = "collapse_tree_btn";
+  let collapseText = document.createTextNode('Collapse Tree');
+  collapseButton.appendChild(collapseText);
+  collapseButton.addEventListener('click',function(){
+    collapseTree();
+  });
+  buttonsContainer.appendChild(expandButton);
+  buttonsContainer.appendChild(collapseButton);
+
+  const content = document.getElementsByClassName('content');
+  const infoBox = document.getElementById('info_box');
+
+  content[0].insertBefore(buttonsContainer,infoBox);
+}
diff --git a/style.css b/style.css
index f541bb8..36b0944 100644
--- a/style.css
+++ b/style.css
@@ -265,14 +265,16 @@ body {
 .content .legend {
   width: auto;
   height: auto;
+  padding-top: 20px;
   padding-bottom: 20px;
-  margin-top: 20px;
+  /*margin-top: 20px;*/
   margin-left: var(--legend-margin-lr);
-  margin-right: var(--legend-margin-lr);
+  /*margin-right: var(--legend-margin-lr);*/
   position:fixed;
   top:0;
   right:0;
   user-select: none;
+  background-color: white;
 }
 
 .legend .circle {
@@ -296,6 +298,50 @@ body {
   line-height: 20px;
   float:left;
 }
+
+/* expand/collapse tree  */
+.content .tree_buttons_container{
+  position:fixed;
+  top:60px;
+  right:20px;
+}
+
+.content #expand_tree_btn{
+  background-color: green;
+}
+
+.content #collapse_tree_btn{
+  background-color: firebrick;
+}
+
+.content .tree_btn{
+  width: 100px;
+  height: 40px;
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 35px;
+  font-size: 14px;
+  font-weight:bold;
+  color: #fff;
+  border-radius: 10px;
+  border:2px solid var(--main-color);
+  cursor: pointer;
+}
+
+/*.content .tree_btn{*/
+/*  width: 100px;*/
+/*  height: 40px;*/
+/*  text-align: center;*/
+/*  line-height: 35px;*/
+/*  font-size: 14px;*/
+/*  font-weight:bold;*/
+/*  color: #fff;*/
+/*  border-radius: 10px;*/
+/*  border:2px solid var(--main-color);*/
+/*  cursor: pointer;*/
+/*}*/
+
+
 /* infobox  */
 .content .info_box_container {
   resize: vertical;
@@ -338,6 +384,7 @@ body {
   color: var(--main-color-sec);
   display: block;
   font-weight: bold;
+  user-select: none;
 }
 
 .content #info_box .info a {