diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js
index 618b3f8..a384523 100644
--- a/storage/d4s-storage.js
+++ b/storage/d4s-storage.js
@@ -15,11 +15,11 @@ class D4SStorageHtmlElement extends HTMLElement {
     this.attachShadow({mode: 'open'})
   }
 
-  static appendBootstrapStylesheets(root) {
+  connectedCallback() {
     let linkElem = document.createElement('link');
     linkElem.setAttribute('rel', 'stylesheet');
     linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
-    root.appendChild(linkElem);
+    this.shadowRoot.appendChild(linkElem);
   }
 
   get srcBaseURL() {
@@ -28,7 +28,7 @@ class D4SStorageHtmlElement extends HTMLElement {
 
 }
 
-class D4SStorageToolbar extends HTMLElement {
+class D4SStorageToolbar extends D4SStorageHtmlElement {
 
   static toolbar_event_name = "d4s-toolbar";
 
@@ -43,21 +43,20 @@ class D4SStorageToolbar extends HTMLElement {
 
   constructor() {
     super()
-    this.attachShadow({mode: 'open'})
   }
 
   connectedCallback() {
-    D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot);
+    super.connectedCallback();
 
     var div = document.createElement('div');
     div.innerHTML = /*html*/`
     <div class="border">
-      <span class="px-2" id="refresh"><img src="img/arrow-clockwise.svg" alt="Refresh folder contents"></img></span>
-      <span class="px-2" id="create"><img src="img/folder-plus.svg" alt="Create new folder"></img></span>
-      <span class="px-2" id="delete"><img src="img/folder-x.svg" alt="Delete folder"></img></span>
-      <span class="px-2" id="download"><img src="img/box-arrow-down.svg" alt="Download folder as ZIP"></img></span>
-      <span class="px-2" id="upload-file"><img src="img/box-arrow-in-up.svg" alt="Upload file"></img></span>
-      <span class="px-2" id="upload-archive"><img src="img/file-earmark-zip.svg" alt="Upload archive"></img></span>
+      <span class="px-2" id="refresh"><img src="${this.srcBaseURL}/img/arrow-clockwise.svg" alt="Refresh folder contents"></img></span>
+      <span class="px-2" id="create"><img src="${this.srcBaseURL}/img/folder-plus.svg" alt="Create new folder"></img></span>
+      <span class="px-2" id="delete"><img src="${this.srcBaseURL}/img/folder-x.svg" alt="Delete folder"></img></span>
+      <span class="px-2" id="download"><img src="${this.srcBaseURL}/img/box-arrow-down.svg" alt="Download folder as ZIP"></img></span>
+      <span class="px-2" id="upload-file"><img src="${this.srcBaseURL}/img/box-arrow-in-up.svg" alt="Upload file"></img></span>
+      <span class="px-2" id="upload-archive"><img src="${this.srcBaseURL}/img/file-earmark-zip.svg" alt="Upload archive"></img></span>
     </div>`;
     div.querySelector("#refresh").addEventListener('click', (ev) => {
       ev.stopPropagation();
@@ -88,7 +87,7 @@ class D4SStorageToolbar extends HTMLElement {
 
   actionPerformed(action) {
     this.#last_action = action;
-    this.dispatchEvent(new CustomEvent(D4SStorageToolbar.toolbar_event_name, {detail: action}));
+    this.dispatchEvent(new CustomEvent(D4SStorageToolbar.toolbar_event_name, {detail: {action: action}}));
   }
 
   get lastAction() {
@@ -147,14 +146,16 @@ class D4SStorageTree extends D4SStorageHtmlElement {
     return this.#currentid;
   }
 
-  setFolderItems(id, items) {
+  setFolderItems(id, items, fireEvent = true) {
     this.#foldersMap[id] = items;
-    this.dispatchEvent(
-      new CustomEvent(
-        D4SStorageTree.folder_data_event_name,
-        {detail: id}
-      )
-    );
+    if (fireEvent) {
+      this.dispatchEvent(
+        new CustomEvent(
+          D4SStorageTree.folder_data_event_name,
+          {detail: {id: id}}
+        )
+      );
+    }
   }
 
   getFolderItems(id) {
@@ -166,7 +167,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
   }
 
   connectedCallback() {
-    D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot)
+    super.connectedCallback();
 
     var div = document.createElement('div')
     div.innerHTML = /*css*/`
@@ -197,7 +198,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
       this.parseItemsData(div, data);
     }).catch(err => console.error(err))
 
-    this.addEventListener(D4SStorageTree.tree_event_name, this.localEventHandler);
     this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler);
     if (document.readyState === "loading") {
       document.addEventListener("DOMContentLoaded", this.registerOtherListeners.bind(this));
@@ -207,7 +207,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
   }
 
   disconnectedCallback() {
-    this.removeEventListener(D4SStorageTree.tree_event_name);
     this.removeEventListener(D4SStorageTree.folder_data_event_name);
     const toolbar = document.querySelector("d4s-storage-tool");
     if (toolbar) toolbar.removeEventListener(D4SStorageToolbar.toolbar_event_name);
@@ -222,18 +221,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
     if (folder) folder.addEventListener(D4SStorageFolder.selected_event_name, this.folderEventHandler.bind(this));
   }
 
-  localEventHandler(event) {
-    this.select(event.detail);
-  }
-
   folderDataEventHandler(event) {
-    if (event.detail === this.currentId) {
+    if (event.detail.id === this.currentId) {
       this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`))
     }
   }
 
   toolbarEventHandler(event) {
-    switch (event.detail) {
+    switch (event.detail.action) {
       case D4SStorageToolbar.refresh_folder:
         if (this.currentId) {
           this.refreshFolder(this.currentId);
@@ -278,7 +273,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
         file.click();
         break;
       default:
-        console.error('Unexpected event action: ' + event.action);
+        console.error('Unexpected event action: ' + event.detail.action);
         break;
     }
   }
@@ -314,11 +309,16 @@ class D4SStorageTree extends D4SStorageHtmlElement {
       }
       li.classList.add(this.#selectedClass)
     }
-    if (li.classList.contains(this.#loadedClass)) {
-      return
+    if (!li.classList.contains(this.#loadedClass)) {
+      this.fillWithContent(li);
     }
 
-    this.fillWithContent(li);
+    this.dispatchEvent(
+      new CustomEvent(
+        D4SStorageTree.tree_event_name,
+        {detail: {id: id}}
+      )
+    );
   }
 
   refreshContents(element) {
@@ -330,8 +330,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
 
   fillWithContent(element) {
     const id = element.getAttribute(D4SStorageTree.dataid_attr);
-    if (this.#foldersMap[id]) {
-      this.parseItemsData(element, this.#foldersMap[id]);
+    const contents = this.getFolderItems(id);
+    if (contents) {
+      this.parseItemsData(element, contents);
     } else {
       this.d4sWorkspace.listFolder(id).then(data => {
         this.setFolderItems(id, data);
@@ -372,13 +373,8 @@ class D4SStorageTree extends D4SStorageHtmlElement {
 
     li.addEventListener('click', (ev) => {
       ev.stopPropagation();
-      this.dispatchEvent(
-        new CustomEvent(
-          D4SStorageTree.tree_event_name,
-          {detail: ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr)}
-        )
-      );
-    })
+      this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
+    });
     return li;
   }
 
@@ -418,8 +414,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
   refreshFolder(id) {
     const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`);
     console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr));
+    this.setFolderItems(id, null, false);
     this.refreshContents(folder);
-    this.select(id);
+    // this.select(id);
   }
 
   createNewFolderIn(id) {
@@ -489,7 +486,8 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
   }
 
   connectedCallback() {
-    D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot);
+    super.connectedCallback();
+
     const style = document.createElement('style')
     style.innerHTML = /*css*/`
       span {
@@ -513,21 +511,30 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
   disconnectedCallback() {
     const tree = document.querySelector("d4s-storage-tree");
     if (tree) { 
-      tree.removeEventListener(D4SStorageTree.tree_event_name);
       tree.removeEventListener(D4SStorageTree.folder_data_event_name);
+      tree.removeEventListener(D4SStorageTree.tree_event_name);
     }
   }
 
   registerOtherListeners(event) {
     const tree = document.querySelector("d4s-storage-tree");
     if (tree) {
-      tree.addEventListener(D4SStorageTree.tree_event_name, this.treeEventHandler.bind(this));
       tree.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler.bind(this));
+      tree.addEventListener(D4SStorageTree.tree_event_name, this.treeEventHandler.bind(this));
+    }
+  }
+  
+  folderDataEventHandler(event) {
+    if (event.detail.id === event.target.currentId) {
+      const folderItems = event.target.getFolderItems(event.detail.id);
+      if (folderItems) {
+        this.parseItemsData(folderItems);
+      }
     }
   }
 
   treeEventHandler(event) {
-    const folderItems = event.target.getFolderItems(event.detail);
+    const folderItems = event.target.getFolderItems(event.detail.id);
     if (folderItems) {
       // It's first time folder is selected, data is stil not loaded,
       // they will be loaded by the folderDataEventHandler() function when available
@@ -535,15 +542,6 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
     }
   }
 
-  folderDataEventHandler(event) {
-    if (event.detail === event.target.currentId) {
-      const folderItems = event.target.getFolderItems(event.detail);
-      if (folderItems) {
-        this.parseItemsData(folderItems);
-      }
-    }
-  }
-
   createContainer() {
     var div = document.createElement('div')
     div.classList.add('d4s-folder')