diff --git a/package.json b/package.json
index 86a3d2bdb625b937d89f9a5b5dfbc237ef22dd2b..3dc04d1f6246025ed5473b442cf68fbccb12211e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cce-frontend",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
index 2ad5f1e10b91ffca7604655f759295b697111b52..a98abc337585f25771d38a40b80cedd4cd0308b3 100644
--- a/src/components/Tree.vue
+++ b/src/components/Tree.vue
@@ -23,11 +23,19 @@
       <p v-if="hoveredNode?.resource?.weight != null"><b>Resource weight:</b> {{hoveredNode.resource.weight}}</p>
       <p v-if="hoveredNode?.description != null"><b>Description:</b> {{hoveredNode.description}}</p>
     </div>
-    <div style="display: flex;">
-      <button class="btn btn-outline-primary" @click="controlScale('bigger')">Zoom in</button>
-      <button class="btn btn-outline-primary" @click="controlScale('smaller')">Zoom out</button>
-      <button class="btn btn-outline-primary" @click="controlScale('restore')">Reset zoom</button>
-      <button class="btn btn-outline-success" @click="toogleInstructions">Instructions</button>
+    <div>
+      <span class="btn-group">
+        <button class="btn btn-outline-primary" @click="controlScale('bigger')">Zoom in</button>
+        <button class="btn btn-outline-primary" @click="controlScale('smaller')">Zoom out</button>
+        <button class="btn btn-outline-primary" @click="controlScale('restore')">Reset zoom</button>
+      </span>
+      <span class="btn-group">
+        <button class="btn btn-outline-primary" @click="collapseAll">Collapse all</button>
+        <button class="btn btn-outline-primary" @click="expandAll">Expand all</button>
+      </span>
+      <span class="btn-group">
+        <button class="btn btn-outline-success" @click="toogleInstructions">Instructions</button>
+      </span>
     </div>
     <div class="box" id="instructions" v-show="showInstructions">
       <div class="close-button"><i @click="toogleInstructions" title="Close" class="fa fa-solid fa-xmark"></i></div>
@@ -70,6 +78,7 @@ import VueTree from "@ssthouse/vue3-tree-chart";
 import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
 import {formatDateHelper} from '../helpers/dataFormat';
 import $ from 'jquery';
+import { collapseExpandTree } from '@/mixins/collapseExpandTree';
 
 export default {
   name: 'Tree',
@@ -77,6 +86,7 @@ export default {
     'vue-tree': VueTree
   },
   props: ['treeData'],
+  mixins: [collapseExpandTree],
   data() {
     return {
       treeConfig: { nodeWidth: 230, nodeHeight: 80, levelHeight: 200 },
@@ -127,6 +137,16 @@ export default {
       this.infoBoxHide(el);
     },
 
+    collapseAll() {
+      this.collapseRecursively(this.$refs.scaleTree.nodeDataList[0].data)
+      this.$refs.scaleTree.draw();
+    },
+
+    expandAll() {
+      this.expandRecursively(this.$refs.scaleTree.nodeDataList[0].data);
+      this.$refs.scaleTree.draw();
+    },
+
     toogleInstructions() {
       this.showInstructions = !this.showInstructions;
     },
@@ -175,7 +195,7 @@ export default {
 
   padding-top: 10px;
   position: fixed;
-  top: 128px;
+  top: 134px;
   min-width: 340px;
   background-color: white;
   border: 1px solid;
@@ -202,8 +222,11 @@ export default {
   }
 }
 
-.btn {
-  margin: 5px 5px;
+.btn-group {
+  margin: 3px 3px;
+  .btn {
+    margin: 5px 5px;
+  }
 }
 
 .node-unset {
diff --git a/src/mixins/collapseExpandTree.js b/src/mixins/collapseExpandTree.js
new file mode 100644
index 0000000000000000000000000000000000000000..acc676188eed336700df39f5b648444680d0f333
--- /dev/null
+++ b/src/mixins/collapseExpandTree.js
@@ -0,0 +1,38 @@
+export const collapseExpandTree = {
+  methods: {
+    collapseRecursively(node) {
+      if(!node.children) {
+        return;
+      }
+    
+      node.children.forEach(i => {
+        this.collapseRecursively(i);
+      });
+      
+      node._children = node.children;
+      node.children = null;
+      node._collapsed = true;
+    },
+
+    collapseAllFromLevel(node, level) {
+      if (level <= 0) {
+        this.collapseRecursively(node);
+      } else {
+        node.children?.forEach(i => {
+          this.collapseAllFromLevel(i, level - 1);
+        });
+      }
+    },                       
+
+    expandRecursively(node) {
+      if (node._children) {
+        node.children = node._children;
+        node._children = null;
+        node._collapsed = false;
+      }
+      node.children?.forEach(n => {
+        this.expandRecursively(n);
+      });
+    },
+  }
+}
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index ae265e807d0c30f8987aa8e999230fc8fa93274c..34eb412fecc129af790b1e7fe0cbdd0bcc184aa1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,6 @@
 import {createStore} from 'vuex';
 import {ApiService} from '../services/ApiService';
+import { collapseExpandTree } from '../mixins/collapseExpandTree';
 
 const store = createStore({
   state: {
@@ -16,6 +17,9 @@ const store = createStore({
   actions: {
     async getTreeData({commit}) {
       await ApiService.getEvaluationTreeData().then((response) => {
+        // collapse all except root
+        collapseExpandTree.methods.collapseAllFromLevel(response.data.root, 1);
+
         commit('SAVE_TREE_DATA', response.data);
       }).catch((err) => {
         console.log("ERROR at action getTreeData: " + err);