diff --git a/lerna.json b/lerna.json
index dd7190c4b2..417a4bbf5e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index ec75651638..2a38e2dc3f 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index f7e06046af..3df72757d4 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 261b840577..8bda515fbc 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -37,9 +37,8 @@ Cypress.Commands.add("createApp", name => {
       cy.contains("Create app").click()
     })
     .then(() => {
-      cy.get(".selected > .content", {
-        timeout: 20000,
-      }).should("be.visible")
+      cy.expandBudibaseConnection()
+      cy.get(".nav-item.selected > .content").should("be.visible")
     })
 })
 
@@ -83,6 +82,7 @@ Cypress.Commands.add("createTable", tableName => {
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
+  cy.selectTable(tableName)
   cy.contains(".nav-item", tableName).click()
   cy.contains("Create column").click()
 
@@ -161,3 +161,15 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
     cy.get(".spectrum-Button--cta").click()
   })
 })
+
+Cypress.Commands.add("expandBudibaseConnection", () => {
+  if (Cypress.$(".nav-item > .content > .opened").length === 0) {
+    // expand the Budibase DB connection string
+    cy.get(".icon.arrow").eq(0).click()
+  }
+})
+
+Cypress.Commands.add("selectTable", tableName => {
+  cy.expandBudibaseConnection()
+  cy.contains(".nav-item", tableName).click()
+})
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 14b0d84795..7a1481f5e2 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.125-alpha.7",
-    "@budibase/client": "^0.9.125-alpha.7",
+    "@budibase/bbui": "^0.9.125-alpha.10",
+    "@budibase/client": "^0.9.125-alpha.10",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.125-alpha.7",
+    "@budibase/string-templates": "^0.9.125-alpha.10",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 42ea30dbb0..84c737eb67 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -9,7 +9,10 @@
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import ICONS from "./icons"
 
+  let openDataSources = []
+
   function selectDatasource(datasource) {
+    toggleNode(datasource)
     datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
@@ -19,6 +22,15 @@
     $goto(`./datasource/${query.datasourceId}/${query._id}`)
   }
 
+  function toggleNode(datasource) {
+    const isOpen = openDataSources.includes(datasource._id)
+    if (isOpen) {
+      openDataSources = openDataSources.filter(id => datasource._id !== id)
+    } else {
+      openDataSources = [...openDataSources, datasource._id]
+    }
+  }
+
   onMount(() => {
     datasources.fetch()
     queries.fetch()
@@ -31,8 +43,11 @@
       <NavItem
         border={idx > 0}
         text={datasource.name}
+        opened={openDataSources.includes(datasource._id)}
         selected={$datasources.selected === datasource._id}
+        withArrow={true}
         on:click={() => selectDatasource(datasource)}
+        on:iconClick={() => toggleNode(datasource)}
       >
         <div class="datasource-icon" slot="icon">
           <svelte:component
@@ -46,13 +61,16 @@
         {/if}
       </NavItem>
 
-      <TableNavigator sourceId={datasource._id} />
+      {#if openDataSources.includes(datasource._id)}
+        <TableNavigator sourceId={datasource._id} />
+      {/if}
 
       {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
           icon="SQLQuery"
           text={query.name}
+          opened={$queries.selected === query._id}
           selected={$queries.selected === query._id}
           on:click={() => onClickQuery(query)}
         >
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 977369299d..ec7994be84 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
 
   export let icon
   export let withArrow = false
@@ -10,6 +11,13 @@
   export let selected = false
   export let opened = false
   export let draggable = false
+
+  const dispatch = createEventDispatcher()
+
+  function onIconClick(event) {
+    event.stopPropagation()
+    dispatch("iconClick")
+  }
 </script>
 
 <div
@@ -28,7 +36,7 @@
 >
   <div class="content">
     {#if withArrow}
-      <div class:opened class="icon arrow">
+      <div class:opened class="icon arrow" on:click={onIconClick}>
         <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 494050f690..33ef0c6ea4 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import { store, currentAsset } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
@@ -97,26 +97,47 @@
       { once: true }
     )
 
-    // Add listener for events sent by cliebt library in preview
-    iframe.contentWindow.addEventListener("bb-event", event => {
-      const { type, data } = event.detail
-      if (type === "select-component" && data.id) {
-        store.actions.components.select({ _id: data.id })
-      } else if (type === "update-prop") {
-        store.actions.components.updateProp(data.prop, data.value)
-      } else if (type === "delete-component" && data.id) {
-        idToDelete = data.id
-        confirmDeleteDialog.show()
-      } else if (type === "preview-loaded") {
-        // Wait for this event to show the client library if intelligent
-        // loading is supported
-        loading = false
-      } else {
-        console.warning(`Client sent unknown event type: ${type}`)
-      }
-    })
+    // Add listener for events sent by client library in preview
+    iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
+    iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
   })
 
+  // remove all iframe event listeners on component destroy
+  onDestroy(() => {
+    iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
+    iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
+  })
+
+  const handleBudibaseEvent = event => {
+    const { type, data } = event.detail
+    if (type === "select-component" && data.id) {
+      store.actions.components.select({ _id: data.id })
+    } else if (type === "update-prop") {
+      store.actions.components.updateProp(data.prop, data.value)
+    } else if (type === "delete-component" && data.id) {
+      confirmDeleteComponent(data.id)
+    } else if (type === "preview-loaded") {
+      // Wait for this event to show the client library if intelligent
+      // loading is supported
+      loading = false
+    } else {
+      console.warning(`Client sent unknown event type: ${type}`)
+    }
+  };
+
+  const handleKeydownEvent = event => {
+    if ((event.key === "Delete" || event.key === "Backspace") &&
+      selectedComponentId &&
+      ['input', 'textarea'].indexOf(iframe.contentWindow.document.activeElement?.tagName.toLowerCase()) === -1) {
+      confirmDeleteComponent(selectedComponentId);
+    }
+  }
+
+  const confirmDeleteComponent = (componentId) => {
+    idToDelete = componentId
+    confirmDeleteDialog.show()
+  }
+
   const deleteComponent = () => {
     store.actions.components.delete({ _id: idToDelete })
     idToDelete = null
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 2cc9a1aba3..8ee230cfd0 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 9b60b1eddc..d1340881fd 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.125-alpha.7",
+    "@budibase/bbui": "^0.9.125-alpha.10",
     "@budibase/standard-components": "^0.9.124",
-    "@budibase/string-templates": "^0.9.125-alpha.7",
+    "@budibase/string-templates": "^0.9.125-alpha.10",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index f805fea051..9b84d01579 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -64,9 +64,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.125-alpha.7",
-    "@budibase/client": "^0.9.125-alpha.7",
-    "@budibase/string-templates": "^0.9.125-alpha.7",
+    "@budibase/auth": "^0.9.125-alpha.10",
+    "@budibase/client": "^0.9.125-alpha.10",
+    "@budibase/string-templates": "^0.9.125-alpha.10",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 43b1f6f7d7..0c5032359c 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 59258e3886..1af20f5445 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.125-alpha.7",
+  "version": "0.9.125-alpha.10",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -25,8 +25,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.125-alpha.7",
-    "@budibase/string-templates": "^0.9.125-alpha.7",
+    "@budibase/auth": "^0.9.125-alpha.10",
+    "@budibase/string-templates": "^0.9.125-alpha.10",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",