diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9030158c46..72ad1fb6e9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,8 +12,6 @@ Budibase is a monorepo managed by [lerna](https://github.com/lerna/lerna). Lerna
 
 - **packages/client** - A module that runs in the browser responsible for reading JSON definition and creating living, breathing web apps from it.
 
-- **packages/cli** - The budibase CLI. This is the main module that gets downloaded from NPM and is responsible for creating and managing apps, as well as running the budibase server. 
-
 - **packages/server** - The budibase server. This [Koa](https://koajs.com/) app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system.
 
 
@@ -95,14 +93,9 @@ then `cd ` into your local copy.
 
 ### 4. Initialising Budibase and Creating a Budibase App
 
-`yarn initialise` will initialise your budibase installation. A Budibase apps folder will have been created in `~/.budibase`. You can also just start up the budibase electron app and it should initialise budibase for you.
+Starting up the budibase electron app should initialise budibase for you. A Budibase apps folder will have been created in `~/.budibase`.
 
-This is a blank apps folder, so you will need to create yourself an app.
-
-```
-cd packages/server
-yarn run budi new your-app-name
-```
+This is a blank apps folder, so you will need to create yourself an app, you can do this by clicking "Create New App" from the budibase builder.
 
 This will create a new budibase application in the `~/.budibase/<your-app-uuid>` directory, and NPM install the component libraries for that application. Let's start building your app with the budibase builder!
 
@@ -116,16 +109,6 @@ To run the budibase server and builder in dev mode (i.e. with live reloading):
 
 This will enable watch mode for both the builder app, server, client library and any component libraries.
 
-### Running Commands from /server Directory
-
-Notice that when inside `packages/server`, you can use any Budibase CLI command via yarn:
-
-e.g. `yarn budi new mikes_app` == `budi new mikes_app`
-
-This will use the CLI directly from `packages/cli`, rather than your globally installed `budi`
-
-
-
 ## Data Storage
 
 When you are running locally, budibase stores data on disk using [PouchDB](https://pouchdb.com/), as well as some JSON on local files. After setting up budibase, you can find all of this data in the `~/.budibase` directory.
diff --git a/lerna.json b/lerna.json
index 9d0f9c2a80..c3c28d7881 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.6",
+  "version": "0.3.1",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index c2a22c4f9b..92d1f907bd 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -14,35 +14,26 @@ context("Create a automation", () => {
     cy.createTestTableWithData()
 
     cy.contains("automate").click()
-    cy.contains("Create New Automation").click()
+    cy.get("[data-cy=new-automation]").click()
     cy.get(".modal").within(() => {
       cy.get("input").type("Add Row")
-      cy.get(".buttons")
-        .contains("Create")
-        .click()
+      cy.get(".buttons").contains("Create").click()
     })
 
     // Add trigger
-    cy.get("[data-cy=add-automation-component]").click()
-    cy.get("[data-cy=ROW_SAVED]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
+    cy.contains("Trigger").click()
+    cy.contains("Row Saved").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
     })
 
     // Create action
-    cy.get("[data-cy=CREATE_ROW]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
-      cy.get("input")
-        .first()
-        .type("goodboy")
-      cy.get("input")
-        .eq(1)
-        .type("11")
+    cy.contains("Action").click()
+    cy.contains("Create Row").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
+      cy.get("input").first().type("goodboy")
+      cy.get("input").eq(1).type("11")
     })
 
     // Save
@@ -50,7 +41,7 @@ context("Create a automation", () => {
 
     // Activate Automation
     cy.get("[data-cy=activate-automation]").click()
-    cy.get(".stop-button.highlighted").should("be.visible")
+    cy.get(".ri-stop-circle-fill.highlighted").should("be.visible")
   })
 
   it("should add row when a new row is added", () => {
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index bf978d3e3a..6931fdb86b 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,54 +1,60 @@
-xcontext('Create Components', () => {
+xcontext("Create Components", () => {
+  before(() => {
+    cy.server()
+    cy.visit("localhost:4001/_builder")
+    // https://on.cypress.io/type
+    cy.createApp("Table App", "Table App Description")
+    cy.createTable("dog", "name", "age")
+    cy.addRow("bob", "15")
+  })
 
-    before(() => {
-        cy.server()
-        cy.visit('localhost:4001/_builder')
-        // https://on.cypress.io/type
-        cy.createApp('Table App', 'Table App Description')
-        cy.createTable('dog', 'name', 'age')
-        cy.addRow('bob', '15')
-    })
+  // https://on.cypress.io/interacting-with-elements
+  it("should add a container", () => {
+    cy.navigateToFrontend()
+    cy.get(".switcher > :nth-child(2)").click()
+    cy.contains("Container").click()
+  })
+  it("should add a headline", () => {
+    cy.addHeadlineComponent("An Amazing headline!")
 
-    // https://on.cypress.io/interacting-with-elements
-    it('should add a container', () => {
-        cy.contains('frontend').click()
-        cy.get('.switcher > :nth-child(2)').click()
+    getIframeBody().contains("An Amazing headline!")
+  })
+  it("change the font size of the headline", () => {
+    cy.contains("Typography").click()
+    cy.get("[data-cy=font-size-prop-control]").click()
+    cy.contains("60px").click()
+    cy.contains("Design").click()
 
-        cy.contains('Container').click()
-    })
-    it('should add a headline', () => {
-        cy.addHeadlineComponent('An Amazing headline!')
-
-        getIframeBody().contains('An Amazing headline!')
-    })
-    it('change the font size of the headline', () => {
-        cy.contains('Typography').click()
-        cy.get('[data-cy=font-size-prop-control]').click()
-        cy.contains("60px").click()
-        cy.contains('Design').click()
-
-        getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')
-    })
+    getIframeBody()
+      .contains("An Amazing headline!")
+      .should("have.css", "font-size", "60px")
+  })
 })
 
 const getIframeDocument = () => {
-    return cy
-        .get('iframe')
-        // Cypress yields jQuery element, which has the real
-        // DOM element under property "0".
-        // From the real DOM iframe element we can get
-        // the "document" element, it is stored in "contentDocument" property
-        // Cypress "its" command can access deep properties using dot notation
-        // https://on.cypress.io/its
-        .its('0.contentDocument').should('exist')
+  return (
+    cy
+      .get("iframe")
+      // Cypress yields jQuery element, which has the real
+      // DOM element under property "0".
+      // From the real DOM iframe element we can get
+      // the "document" element, it is stored in "contentDocument" property
+      // Cypress "its" command can access deep properties using dot notation
+      // https://on.cypress.io/its
+      .its("0.contentDocument")
+      .should("exist")
+  )
 }
 
 const getIframeBody = () => {
-    // get the document
-    return getIframeDocument()
-        // automatically retries until body is loaded
-        .its('body').should('not.be.undefined')
-        // wraps "body" DOM element to allow
-        // chaining more Cypress commands, like ".find(...)"
-        .then(cy.wrap)
-}
\ No newline at end of file
+  // get the document
+  return (
+    getIframeDocument()
+      // automatically retries until body is loaded
+      .its("body")
+      .should("not.be.undefined")
+      // wraps "body" DOM element to allow
+      // chaining more Cypress commands, like ".find(...)"
+      .then(cy.wrap)
+  )
+}
diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 0715d61c0b..fdad39b956 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -8,7 +8,7 @@ context("Create a Table", () => {
     cy.createTable("dog")
 
     // Check if Table exists
-    cy.get(".title span").should("have.text", "dog")
+    cy.get(".table-title h1").should("have.text", "dog")
   })
 
   it("adds a new column to the table", () => {
@@ -26,9 +26,7 @@ context("Create a Table", () => {
       .trigger("mouseover")
       .find(".ri-pencil-line")
       .click({ force: true })
-    cy.get(".actions input")
-      .first()
-      .type("updated")
+    cy.get(".actions input").first().type("updated")
     // Unset table display column
     cy.contains("display column").click()
     cy.contains("Save Column").click()
@@ -36,7 +34,8 @@ context("Create a Table", () => {
   })
 
   it("edits a row", () => {
-    cy.get("button").contains("Edit").click()
+    cy.contains("button", "Edit").click({ force: true })
+    cy.wait(1000)
     cy.get(".modal input").type("Updated")
     cy.contains("Save").click()
     cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
@@ -50,10 +49,10 @@ context("Create a Table", () => {
   })
 
   it("deletes a column", () => {
-    cy
-    .contains("header", "name")
-    .trigger("mouseover")
-    .find(".ri-pencil-line").click({ force: true })
+    cy.contains("header", "name")
+      .trigger("mouseover")
+      .find(".ri-pencil-line")
+      .click({ force: true })
     cy.contains("Delete").click()
     cy.wait(50)
     cy.get(".buttons").contains("Delete").click()
@@ -61,9 +60,7 @@ context("Create a Table", () => {
   })
 
   it("deletes a table", () => {
-    cy.contains("div", "dog")
-      .get(".ri-more-line")
-      .click()
+    cy.contains(".nav-item", "dog").get(".actions").invoke("show").click()
     cy.get("[data-cy=delete-table]").click()
     cy.contains("Delete Table").click()
     cy.contains("dog").should("not.exist")
diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index ca0dd60f8b..60bd8c15d1 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -22,10 +22,12 @@ context("Create a View", () => {
       cy.get("input").type("Test View")
       cy.contains("Save View").click()
     })
-    cy.get(".title").contains("Test View")
+    cy.get(".table-title h1").contains("Test View")
     cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(3)
-      const headers = Array.from($headers).map(header => header.textContent.trim())
+      const headers = Array.from($headers).map(header =>
+        header.textContent.trim()
+      )
       expect(headers).to.deep.eq(["group", "age", "rating"])
     })
   })
@@ -33,14 +35,8 @@ context("Create a View", () => {
   it("filters the view by age over 10", () => {
     cy.contains("Filter").click()
     cy.contains("Add Filter").click()
-    cy.get(".menu-container")
-      .find("select")
-      .first()
-      .select("age")
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("More Than")
+    cy.get(".menu-container").find("select").first().select("age")
+    cy.get(".menu-container").find("select").eq(1).select("More Than")
     cy.get(".menu-container").find("input").type(18)
     cy.contains("Save").click()
     cy.get("[role=rowgroup] .ag-row").get($values => {
@@ -53,20 +49,16 @@ context("Create a View", () => {
     cy.viewport("macbook-15")
 
     cy.contains("Calculate").click()
-    cy.get(".menu-container")
-      .find("select")
-      .eq(0)
-      .select("Statistics")
+    cy.get(".menu-container").find("select").eq(0).select("Statistics")
     cy.wait(50)
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("age")
+    cy.get(".menu-container").find("select").eq(1).select("age")
     cy.contains("Save").click()
     cy.get(".ag-center-cols-viewport").scrollTo("100%")
     cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(7)
-      const headers = Array.from($headers).map(header => header.textContent.trim())
+      const headers = Array.from($headers).map(header =>
+        header.textContent.trim()
+      )
       expect(headers).to.deep.eq([
         "field",
         "sum",
@@ -78,16 +70,10 @@ context("Create a View", () => {
       ])
     })
     cy.get(".ag-cell").then($values => {
-      const values = Array.from($values).map(header => header.textContent.trim())
-      expect(values).to.deep.eq([
-        "age",
-        "155",
-        "20",
-        "49",
-        "5",
-        "5347",
-        "31",
-      ])
+      const values = Array.from($values).map(header =>
+        header.textContent.trim()
+      )
+      expect(values).to.deep.eq(["age", "155", "20", "49", "5", "5347", "31"])
     })
   })
 
@@ -102,8 +88,7 @@ context("Create a View", () => {
     cy.contains("Students").should("be.visible")
     cy.contains("Teachers").should("be.visible")
 
-    cy
-      .get(".ag-row[row-index=0]")
+    cy.get(".ag-row[row-index=0]")
       .find(".ag-cell")
       .then($values => {
         const values = Array.from($values).map(value => value.textContent)
@@ -120,10 +105,11 @@ context("Create a View", () => {
   })
 
   it("renames a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Edit").click()
+    cy.get("[data-cy=edit-view]").click()
     cy.get(".menu-container").within(() => {
       cy.get("input").type(" Updated")
       cy.contains("Save").click()
@@ -132,11 +118,11 @@ context("Create a View", () => {
   })
 
   it("deletes a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated").click()
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View Updated")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Delete").click()
+    cy.get("[data-cy=delete-view]").click()
     cy.contains("Delete View").click()
     cy.contains("TestView Updated").should("not.be.visible")
   })
diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js
index a6dab69583..f56374ea35 100644
--- a/packages/builder/cypress/setup.js
+++ b/packages/builder/cypress/setup.js
@@ -4,8 +4,8 @@
 // 3. Runs the server using said folder
 
 const rimraf = require("rimraf")
-const { join } = require("path")
-const run = require("../../cli/src/commands/run/runHandler")
+const { join, resolve } = require("path")
+// const run = require("../../cli/src/commands/run/runHandler")
 const initialiseBudibase = require("../../server/src/utilities/initialiseBudibase")
 
 const homedir = join(require("os").homedir(), ".budibase")
@@ -16,9 +16,22 @@ process.env.BUDIBASE_API_KEY = "6BE826CB-6B30-4AEC-8777-2E90464633DE"
 process.env.NODE_ENV = "cypress"
 process.env.ENABLE_ANALYTICS = "false"
 
+async function run(dir) {
+  process.env.BUDIBASE_DIR = resolve(dir)
+  require("dotenv").config({ path: resolve(dir, ".env") })
+
+  // dont make this a variable or top level require
+  // it will cause environment module to be loaded prematurely
+  const server = require("../../server/src/app")
+  server.on("close", () => console.log("Server Closed"))
+}
+
 initialiseBudibase({ dir: homedir, clientId: "cypress-test" })
   .then(() => {
     delete require.cache[require.resolve("../../server/src/environment")]
-    run({ dir: homedir })
+    const xPlatHomeDir = homedir.startsWith("~")
+      ? join(homedir(), homedir.substring(1))
+      : homedir
+    run(xPlatHomeDir)
   })
   .catch(e => console.error(e))
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index b2a41d9d41..f82ff30827 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -51,7 +51,7 @@ Cypress.Commands.add("createApp", name => {
         .click()
         .type("test")
       cy.contains("Submit").click()
-      cy.contains("Create New Table", {
+      cy.get("[data-cy=new-table]", {
         timeout: 20000,
       }).should("be.visible")
     })
@@ -65,7 +65,7 @@ Cypress.Commands.add("createTestTableWithData", () => {
 
 Cypress.Commands.add("createTable", tableName => {
   // Enter table name
-  cy.contains("Create New Table").click()
+  cy.get("[data-cy=new-table]").click()
   cy.get(".modal").within(() => {
     cy.get("input")
       .first()
@@ -79,9 +79,7 @@ Cypress.Commands.add("createTable", tableName => {
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
-  cy.get(".root")
-    .contains(tableName)
-    .click()
+  cy.contains(".nav-item", tableName).click()
   cy.contains("Create New Column").click()
 
   // Configure column
@@ -155,7 +153,7 @@ Cypress.Commands.add("navigateToFrontend", () => {
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
-  cy.contains("Create New Screen").click()
+  cy.get("[data-cy=new-screen]").click()
   cy.get(".modal").within(() => {
     cy.get("input")
       .eq(0)
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 671aaaa5c8..3aae8af2d6 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@budibase/bbui": "^1.47.0",
-    "@budibase/client": "^0.2.6",
+    "@budibase/client": "^0.3.1",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 6dc786f522..1426a7beed 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -85,14 +85,6 @@
      box-sizing: border-box; 
 }
 
-.preview-pane {
-    grid-column: 2;
-    margin: 80px 60px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-}
-
 .budibase__table {
     border: 1px solid var(--grey-4);
     background: #fff;
diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 64755606c3..9a193112fb 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -106,11 +106,15 @@ const contextToBindables = (tables, walkResult) => context => {
     }
   }
 
+  const stringType = { type: "string" }
   return (
     Object.entries(schema)
       .map(newBindable)
       // add _id and _rev fields - not part of schema, but always valid
-      .concat([newBindable(["_id", "string"]), newBindable(["_rev", "string"])])
+      .concat([
+        newBindable(["_id", stringType]),
+        newBindable(["_rev", stringType]),
+      ])
   )
 }
 
diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js
index 9ab8ef16dc..a4565c2296 100644
--- a/packages/builder/src/builderStore/getNewComponentName.js
+++ b/packages/builder/src/builderStore/getNewComponentName.js
@@ -2,7 +2,9 @@ import { walkProps } from "./storeUtils"
 import { get_capitalised_name } from "../helpers"
 
 export default function(component, state) {
-  const capitalised = get_capitalised_name(component)
+  const capitalised = get_capitalised_name(
+    component.name || component._component
+  )
 
   const matchingComponents = []
 
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index ead1721896..897dbd96d5 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -132,10 +132,10 @@ const setPackage = (store, initial) => async pkg => {
     ...Object.values(unauth_screens),
   ]
   initial.builtins = [getBuiltin("##builtin/screenslot")]
-  initial.appInstances = pkg.application.instances
+  initial.appInstance = pkg.application.instance
   initial.appId = pkg.application._id
   store.set(initial)
-  await backendUiStore.actions.database.select(initial.appInstances[0])
+  await backendUiStore.actions.database.select(initial.appInstance)
   return initial
 }
 
@@ -346,7 +346,7 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
     const component = getComponentDefinition(state, componentToAdd)
 
     const instanceId = get(backendUiStore).selectedDatabase._id
-    const instanceName = getNewComponentName(componentToAdd, state)
+    const instanceName = getNewComponentName(component, state)
 
     const newComponent = createProps(
       component,
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index c832ddd8bc..f8a3699f4d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -1,12 +1,12 @@
 <script>
-  import { afterUpdate } from "svelte"
   import { automationStore, backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import Flowchart from "./flowchart/FlowChart.svelte"
+  import Flowchart from "./FlowChart/FlowChart.svelte"
+  import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
   $: automationLive = automation?.live
   $: instanceId = $backendUiStore.selectedDatabase._id
+  $: automationCount = $automationStore.automations?.length ?? 0
 
   function onSelect(block) {
     automationStore.update(state => {
@@ -14,80 +14,19 @@
       return state
     })
   }
-
-  function setAutomationLive(live) {
-    automation.live = live
-    automationStore.actions.save({ instanceId, automation })
-    if (live) {
-      notifier.info(`Automation ${automation.name} enabled.`)
-    } else {
-      notifier.danger(`Automation ${automation.name} disabled.`)
-    }
-  }
 </script>
 
-<section>
+{#if automation}
+  <BlockList />
   <Flowchart {automation} {onSelect} />
-</section>
-<footer>
-  {#if automation}
-    <button
-      class:highlighted={automationLive}
-      class:hoverable={automationLive}
-      class="stop-button hoverable">
-      <i class="ri-stop-fill" on:click={() => setAutomationLive(false)} />
-    </button>
-    <button
-      class:highlighted={!automationLive}
-      class:hoverable={!automationLive}
-      class="play-button hoverable"
-      data-cy="activate-automation"
-      on:click={() => setAutomationLive(true)}>
-      <i class="ri-play-fill" />
-    </button>
-  {/if}
-</footer>
+{:else if automationCount === 0}
+  <i>Create your first automation to get started</i>
+{:else}<i>Select an automation to edit</i>{/if}
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow: auto;
-    height: 100%;
-    position: relative;
-  }
-
-  footer {
-    position: absolute;
-    bottom: var(--spacing-xl);
-    right: 30px;
-    display: flex;
-    align-items: flex-end;
-  }
-
-  footer > button {
-    border-radius: 100%;
-    color: var(--white);
-    width: 76px;
-    height: 76px;
-    border: none;
-    background: #adaec4;
-    font-size: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  footer > button:first-child {
-    margin-right: var(--spacing-m);
-  }
-
-  .play-button.highlighted {
-    background: var(--purple);
-  }
-
-  .stop-button.highlighted {
-    background: var(--red);
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
new file mode 100644
index 0000000000..de3e9660ad
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -0,0 +1,136 @@
+<script>
+  import { sortBy } from "lodash/fp"
+  import { automationStore } from "builderStore"
+  import { DropdownMenu, Modal } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import analytics from "analytics"
+  import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
+
+  $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
+  $: tabs = [
+    {
+      label: "Trigger",
+      value: "TRIGGER",
+      icon: "ri-organization-chart",
+      disabled: hasTrigger,
+    },
+    {
+      label: "Action",
+      value: "ACTION",
+      icon: "ri-flow-chart",
+      disabled: !hasTrigger,
+    },
+    {
+      label: "Logic",
+      value: "LOGIC",
+      icon: "ri-filter-line",
+      disabled: !hasTrigger,
+    },
+  ]
+
+  let selectedIndex
+  let anchors = []
+  let popover
+  let webhookModal
+  $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
+  $: blocks = sortBy(entry => entry[1].name)(
+    Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
+  )
+
+  function onChangeTab(idx) {
+    selectedIndex = idx
+    popover.show()
+  }
+
+  function closePopover() {
+    selectedIndex = null
+    popover.hide()
+  }
+
+  function addBlockToAutomation(stepId, blockDefinition) {
+    const newBlock = {
+      ...blockDefinition,
+      inputs: blockDefinition.inputs || {},
+      stepId,
+      type: selectedTab,
+    }
+    automationStore.actions.addBlockToAutomation(newBlock)
+    analytics.captureEvent("Added Automation Block", {
+      name: blockDefinition.name,
+    })
+    closePopover()
+    if (stepId === "WEBHOOK") {
+      webhookModal.show()
+    }
+  }
+</script>
+
+<div class="tab-container">
+  {#each tabs as tab, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="tab"
+      class:disabled={tab.disabled}
+      on:click={tab.disabled ? null : () => onChangeTab(idx)}
+      class:active={idx === selectedIndex}>
+      {#if tab.icon}<i class={tab.icon} />{/if}
+      <span>{tab.label}</span>
+      <i class="ri-arrow-down-s-line arrow" />
+    </div>
+  {/each}
+</div>
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
+  <DropdownContainer>
+    {#each blocks as [stepId, blockDefinition]}
+      <DropdownItem
+        icon={blockDefinition.icon}
+        title={blockDefinition.name}
+        subtitle={blockDefinition.description}
+        on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
+    {/each}
+  </DropdownContainer>
+</DropdownMenu>
+<Modal bind:this={webhookModal} width="30%">
+  <CreateWebhookModal />
+</Modal>
+
+<style>
+  .tab-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+    min-height: 24px;
+  }
+
+  .tab {
+    color: var(--grey-7);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .tab span {
+    font-weight: 500;
+    user-select: none;
+  }
+  .tab.active,
+  .tab:not(.disabled):hover {
+    color: var(--ink);
+    cursor: pointer;
+  }
+  .tab.disabled {
+    color: var(--grey-5);
+  }
+  .tab i:not(:last-child) {
+    font-size: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
similarity index 66%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 09a0d097de..48bafb8cd3 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -3,7 +3,6 @@
   import Arrow from "./Arrow.svelte"
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
-  import { automationStore } from "builderStore"
 
   export let automation
   export let onSelect
@@ -18,16 +17,9 @@
       blocks = blocks.concat(automation.definition.steps || [])
     }
   }
-  $: automationCount = $automationStore.automations?.length ?? 0
 </script>
 
-{#if automationCount === 0}
-  <i>Create your first automation to get started</i>
-{:else if automation == null}
-  <i>Select an automation to edit</i>
-{:else if !blocks.length}
-  <i>Add some steps to your automation to get started</i>
-{/if}
+{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
 <section class="canvas">
   {#each blocks as block, idx (block.id)}
     <div
@@ -44,19 +36,18 @@
 </section>
 
 <style>
-  i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
-    padding: var(--spacing-xl) 40px;
-    align-self: flex-start;
-  }
-
   section {
-    position: absolute;
-    padding: 40px;
+    margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
+    padding: var(--spacing-l) 40px 0 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+  /* Fix for firefox not respecting bottom padding in scrolling containers */
+  section > *:last-child {
+    padding-bottom: 40px;
   }
 
   .block {
@@ -65,4 +56,9 @@
     justify-content: flex-start;
     align-items: center;
   }
+
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
similarity index 84%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 2c78875eb1..a96e85d582 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -10,6 +10,11 @@
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
   $: blockIdx = steps.findIndex(step => step.id === block.id)
+  $: allowDeleteTrigger = !steps.length
+
+  function deleteStep() {
+    automationStore.actions.deleteAutomationBlock(block)
+  }
 </script>
 
 <div
@@ -30,6 +35,9 @@
     <div class="label">
       {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
     </div>
+    {#if block.type !== 'TRIGGER' || allowDeleteTrigger}
+      <i on:click|stopPropagation={deleteStep} class="delete ri-close-line" />
+    {/if}
   </header>
   <hr />
   <p>
@@ -61,6 +69,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: var(--spacing-xs);
   }
   header span {
     flex: 1 1 auto;
@@ -74,7 +83,13 @@
   }
   header i {
     font-size: 20px;
-    margin-right: 5px;
+  }
+  header i.delete {
+    opacity: 0.5;
+  }
+  header i.delete:hover {
+    cursor: pointer;
+    opacity: 1;
   }
 
   .ACTION {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
new file mode 100644
index 0000000000..c4a39d69b9
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { onMount } from "svelte"
+  import { automationStore } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import EditAutomationPopover from "./EditAutomationPopover.svelte"
+
+  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
+
+  onMount(() => {
+    automationStore.actions.fetch()
+  })
+</script>
+
+<div class="automations-list">
+  {#each $automationStore.automations as automation, idx}
+    <NavItem
+      border={idx > 0}
+      icon="ri-stackshare-line"
+      text={automation.name}
+      selected={automation._id === selectedAutomationId}
+      on:click={() => automationStore.actions.select(automation)}>
+      <EditAutomationPopover {automation} />
+    </NavItem>
+  {/each}
+</div>
+
+<style>
+  .automations-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
deleted file mode 100644
index 328c0d6122..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { automationStore } from "builderStore"
-  import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Button, Modal } from "@budibase/bbui"
-
-  let modal
-
-  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
-
-  onMount(() => {
-    automationStore.actions.fetch()
-  })
-</script>
-
-<section>
-  <Button primary wide on:click={modal.show}>Create New Automation</Button>
-  <ul>
-    {#each $automationStore.automations as automation}
-      <li
-        class="automation-item"
-        class:selected={automation._id === selectedAutomationId}
-        on:click={() => automationStore.actions.select(automation)}>
-        <i class="ri-stackshare-line" class:live={automation.live} />
-        {automation.name}
-      </li>
-    {/each}
-  </ul>
-</section>
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
-
-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: var(--spacing-xl) 0 0 0;
-    flex: 1;
-  }
-
-  i {
-    color: var(--grey-6);
-  }
-  i.live {
-    color: var(--ink);
-  }
-
-  li {
-    font-size: 14px;
-  }
-
-  .automation-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    border-radius: var(--border-radius-m);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin-bottom: var(--spacing-xs);
-    color: var(--ink);
-  }
-  .automation-item i {
-    font-size: 24px;
-    margin-right: var(--spacing-m);
-  }
-  .automation-item:hover {
-    cursor: pointer;
-    background: var(--grey-1);
-  }
-  .automation-item.selected {
-    background: var(--grey-2);
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 9a29025d56..e09803e130 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,50 +1,44 @@
 <script>
-  import { automationStore } from "builderStore"
-  import AutomationList from "./AutomationList/AutomationList.svelte"
-  import BlockList from "./BlockList/BlockList.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import AutomationList from "./AutomationList.svelte"
+  import CreateAutomationModal from "./CreateAutomationModal.svelte"
+  import { Modal } from "@budibase/bbui"
+  import { automationStore, backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
 
   let selectedTab = "AUTOMATIONS"
+  let modal
 </script>
 
-<Heading black small>
-  <span
-    data-cy="automation-list"
-    class="hoverable automation-header"
-    class:selected={selectedTab === 'AUTOMATIONS'}
-    on:click={() => (selectedTab = 'AUTOMATIONS')}>
-    Automations
-  </span>
-  {#if $automationStore.selectedAutomation}
-    <span
-      data-cy="add-automation-component"
-      class="hoverable"
-      class:selected={selectedTab === 'ADD'}
-      on:click={() => (selectedTab = 'ADD')}>
-      Steps
-    </span>
-  {/if}
-</Heading>
-<Spacer medium />
-{#if selectedTab === 'AUTOMATIONS'}
-  <AutomationList />
-{:else if selectedTab === 'ADD'}
-  <BlockList />
-{/if}
+<div class="title">
+  <h1>Automations</h1>
+  <i
+    on:click={modal.show}
+    data-cy="new-automation"
+    class="ri-add-circle-fill" />
+</div>
+<AutomationList />
+<Modal bind:this={modal}>
+  <CreateAutomationModal />
+</Modal>
 
 <style>
-  header {
-    font-size: 18px;
-    font-weight: 600;
-    background: none;
+  .title {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
   }
-
-  .automation-header {
-    margin-right: var(--spacing-xl);
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 
   span:not(.selected) {
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
deleted file mode 100644
index 9d48acb6e7..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { backendUiStore, automationStore } from "builderStore"
-  import CreateWebookModal from "../../Shared/CreateWebhookModal.svelte"
-  import analytics from "analytics"
-  import { Modal } from "@budibase/bbui"
-
-  export let blockDefinition
-  export let stepId
-  export let blockType
-
-  let modal
-
-  $: instanceId = $backendUiStore.selectedDatabase._id
-  $: automation = $automationStore.selectedAutomation?.automation
-
-  function addBlockToAutomation() {
-    automationStore.actions.addBlockToAutomation({
-      ...blockDefinition,
-      inputs: blockDefinition.inputs || {},
-      stepId,
-      type: blockType,
-    })
-    if (stepId === "WEBHOOK") {
-      modal.show()
-    }
-    analytics.captureEvent("Added Automation Block", {
-      name: blockDefinition.name,
-    })
-  }
-</script>
-
-<div
-  class="automation-block hoverable"
-  on:click={addBlockToAutomation}
-  data-cy={stepId}>
-  <div><i class={blockDefinition.icon} /></div>
-  <div class="automation-text">
-    <h4>{blockDefinition.name}</h4>
-    <p>{blockDefinition.description}</p>
-  </div>
-</div>
-<Modal bind:this={modal} width="30%">
-  <CreateWebookModal />
-</Modal>
-
-<style>
-  .automation-block {
-    display: grid;
-    grid-template-columns: 20px auto;
-    align-items: center;
-    margin-top: var(--spacing-s);
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-m);
-  }
-  .automation-block:hover {
-    background-color: var(--grey-1);
-  }
-  .automation-block:first-child {
-    margin-top: 0;
-  }
-
-  i {
-    color: var(--grey-7);
-    font-size: 20px;
-  }
-
-  .automation-text {
-    margin-left: 16px;
-  }
-  .automation-text h4 {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 5px;
-    margin-top: 0;
-  }
-  .automation-text p {
-    font-size: 12px;
-    line-height: 1.4;
-    color: var(--grey-7);
-    margin: 0;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
deleted file mode 100644
index 1455f60ef1..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { sortBy } from "lodash/fp"
-  import { automationStore } from "builderStore"
-  import AutomationBlock from "./AutomationBlock.svelte"
-  import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
-
-  let selectedTab = "TRIGGER"
-  let buttonProps = []
-  $: blocks = sortBy(entry => entry[1].name)(
-    Object.entries($automationStore.blockDefinitions[selectedTab])
-  )
-
-  $: {
-    if ($automationStore.selectedAutomation.hasTrigger()) {
-      buttonProps = [
-        { value: "ACTION", text: "Action" },
-        { value: "LOGIC", text: "Logic" },
-      ]
-      if (selectedTab === "TRIGGER") {
-        selectedTab = "ACTION"
-      }
-    } else {
-      buttonProps = [{ value: "TRIGGER", text: "Trigger" }]
-      if (selectedTab !== "TRIGGER") {
-        selectedTab = "TRIGGER"
-      }
-    }
-  }
-
-  function onChangeTab(tab) {
-    selectedTab = tab
-  }
-</script>
-
-<section>
-  <FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
-  <div id="blocklist">
-    {#each blocks as [stepId, blockDefinition]}
-      <AutomationBlock {blockDefinition} {stepId} blockType={selectedTab} />
-    {/each}
-  </div>
-</section>
-
-<style>
-  #blocklist {
-    margin-top: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
rename to packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
new file mode 100644
index 0000000000..a3ec5b2ae5
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -0,0 +1,88 @@
+<script>
+  import { automationStore, backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let automation
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+  $: instanceId = $backendUiStore.selectedDatabase._id
+
+  function showModal() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteAutomation() {
+    await automationStore.actions.delete({
+      instanceId,
+      automation,
+    })
+    notifier.success("Automation deleted.")
+  }
+</script>
+
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={showModal} />
+    </DropdownContainer>
+  </DropdownMenu>
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete Automation"
+  onOk={deleteAutomation}
+  title="Confirm Deletion">
+  Are you sure you wish to delete the automation
+  <i>{automation.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<style>
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.icon i {
+    font-size: 16px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: var(--spacing-s) 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/index.js b/packages/builder/src/components/automation/AutomationPanel/index.js
deleted file mode 100644
index 3ba95ab3b6..0000000000
--- a/packages/builder/src/components/automation/AutomationPanel/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AutomationPanel } from "./AutomationPanel.svelte"
-export { default as BlockList } from "./BlockList/BlockList.svelte"
-export { default as AutomationList } from "./AutomationList/AutomationList.svelte"
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 3d7150eb7a..8bb4dc36dd 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -1,10 +1,10 @@
 <script>
-  import TableSelector from "./ParamInputs/TableSelector.svelte"
-  import RowSelector from "./ParamInputs/RowSelector.svelte"
-  import { Button, Input, TextArea, Select, Label } from "@budibase/bbui"
+  import TableSelector from "./TableSelector.svelte"
+  import RowSelector from "./RowSelector.svelte"
+  import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "../../userInterface/BindableInput.svelte"
+  import BindableInput from "components/userInterface/BindableInput.svelte"
 
   export let block
   export let webhookModal
@@ -47,43 +47,41 @@
   }
 </script>
 
-<div class="container" data-cy="automation-block-setup">
-  <div class="block-label">{block.name}</div>
-  {#each inputs as [key, value]}
-    <div class="bb-margin-xl block-field">
-      <Label extraSmall grey>{value.title}</Label>
-      {#if value.type === 'string' && value.enum}
-        <Select bind:value={block.inputs[key]} thin secondary>
-          <option value="">Choose an option</option>
-          {#each value.enum as option, idx}
-            <option value={option}>
-              {value.pretty ? value.pretty[idx] : option}
-            </option>
-          {/each}
-        </Select>
-      {:else if value.customType === 'password'}
-        <Input type="password" thin bind:value={block.inputs[key]} />
-      {:else if value.customType === 'table'}
-        <TableSelector bind:value={block.inputs[key]} />
-      {:else if value.customType === 'row'}
-        <RowSelector bind:value={block.inputs[key]} {bindings} />
-      {:else if value.customType === 'webhookUrl'}
-        <WebhookDisplay value={block.inputs[key]} />
-      {:else if value.type === 'string' || value.type === 'number'}
-        <BindableInput
-          type="string"
-          thin
-          bind:value={block.inputs[key]}
-          {bindings} />
-      {/if}
-    </div>
-  {/each}
-  {#if stepId === 'WEBHOOK'}
-    <Button wide secondary on:click={() => webhookModal.show()}>
-      Setup webhook
-    </Button>
-  {/if}
-</div>
+<div class="block-label">{block.name}</div>
+{#each inputs as [key, value]}
+  <div class="block-field">
+    <Label extraSmall grey>{value.title}</Label>
+    {#if value.type === 'string' && value.enum}
+      <Select bind:value={block.inputs[key]} extraThin secondary>
+        <option value="">Choose an option</option>
+        {#each value.enum as option, idx}
+          <option value={option}>
+            {value.pretty ? value.pretty[idx] : option}
+          </option>
+        {/each}
+      </Select>
+    {:else if value.customType === 'password'}
+      <Input type="password" extraThin bind:value={block.inputs[key]} />
+    {:else if value.customType === 'table'}
+      <TableSelector bind:value={block.inputs[key]} />
+    {:else if value.customType === 'row'}
+      <RowSelector bind:value={block.inputs[key]} {bindings} />
+    {:else if value.customType === 'webhookUrl'}
+      <WebhookDisplay value={block.inputs[key]} />
+    {:else if value.type === 'string' || value.type === 'number'}
+      <BindableInput
+        type="string"
+        extraThin
+        bind:value={block.inputs[key]}
+        {bindings} />
+    {/if}
+  </div>
+{/each}
+{#if stepId === 'WEBHOOK'}
+  <Button wide secondary on:click={() => webhookModal.show()}>
+    Set Up Webhook
+  </Button>
+{/if}
 
 <style>
   .block-field {
@@ -92,7 +90,7 @@
 
   .block-label {
     font-weight: 500;
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
 
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
similarity index 87%
rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte
rename to packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index a54f54b043..117f00d1a3 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,7 +1,7 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Input, Select, Label } from "@budibase/bbui"
-  import BindableInput from "../../../userInterface/BindableInput.svelte"
+  import BindableInput from "../../userInterface/BindableInput.svelte"
 
   export let value
   export let bindings
@@ -19,7 +19,7 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value={value.tableId} thin secondary>
+  <Select bind:value={value.tableId} extraThin secondary>
     <option value="">Choose an option</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
@@ -31,7 +31,7 @@
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if schemaHasOptions(schema)}
-        <Select label={field} thin secondary bind:value={value[field]}>
+        <Select label={field} extraThin secondary bind:value={value[field]}>
           <option value="">Choose an option</option>
           {#each schema.constraints.inclusion as option}
             <option value={option}>{option}</option>
@@ -39,7 +39,7 @@
         </Select>
       {:else if schema.type === 'string' || schema.type === 'number'}
         <BindableInput
-          thin
+          extraThin
           bind:value={value[field]}
           label={field}
           type="string"
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 3f21799762..97e536e2ed 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -2,25 +2,27 @@
   import { backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import { Button, Input, Label, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
-  let selectedTab = "SETUP"
-  let confirmDeleteDialog
   let webhookModal
 
   $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
-  $: allowDeleteBlock =
-    $automationStore.selectedBlock?.type !== "TRIGGER" ||
-    !automation?.definition?.steps?.length
   $: name = automation?.name ?? ""
+  $: automationLive = automation?.live
 
-  function deleteAutomationBlock() {
-    automationStore.actions.deleteAutomationBlock(
-      $automationStore.selectedBlock
-    )
+  function setAutomationLive(live) {
+    if (automation.live === live) {
+      return
+    }
+    automation.live = live
+    automationStore.actions.save({ instanceId, automation })
+    if (live) {
+      notifier.info(`Automation ${automation.name} enabled.`)
+    } else {
+      notifier.danger(`Automation ${automation.name} disabled.`)
+    }
   }
 
   async function testAutomation() {
@@ -41,115 +43,78 @@
     })
     notifier.success(`Automation ${automation.name} saved.`)
   }
-
-  async function deleteAutomation() {
-    await automationStore.actions.delete({
-      instanceId,
-      automation,
-    })
-    notifier.success("Automation deleted.")
-  }
 </script>
 
-<section>
-  <header>
-    <span
-      class="hoverable"
-      class:selected={selectedTab === 'SETUP'}
-      on:click={() => (selectedTab = 'SETUP')}>
-      Setup
-    </span>
-  </header>
-  <div class="content">
-    {#if $automationStore.selectedBlock}
-      <AutomationBlockSetup
-        bind:block={$automationStore.selectedBlock}
-        {webhookModal} />
-    {:else if $automationStore.selectedAutomation}
-      <div class="block-label">Automation <b>{automation.name}</b></div>
-      <Button secondary wide on:click={testAutomation}>Test Automation</Button>
-    {/if}
-  </div>
-  <div class="buttons">
-    {#if $automationStore.selectedBlock}
-      <Button
-        green
-        wide
-        data-cy="save-automation-setup"
-        on:click={saveAutomation}>
-        Save Automation
-      </Button>
-      <Button
-        disabled={!allowDeleteBlock}
-        red
-        wide
-        on:click={deleteAutomationBlock}>
-        Delete Step
-      </Button>
-    {:else if $automationStore.selectedAutomation}
-      <Button
-        green
-        wide
-        data-cy="save-automation-setup"
-        on:click={saveAutomation}>
-        Save Automation
-      </Button>
-      <Button red wide on:click={() => confirmDeleteDialog.show()}>
-        Delete Automation
-      </Button>
-    {/if}
-  </div>
-</section>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete the automation '${name}'?`}
-  okText="Delete Automation"
-  onOk={deleteAutomation} />
+<div class="title">
+  <h1>Setup</h1>
+  <i
+    class:highlighted={automationLive}
+    class:hoverable={automationLive}
+    on:click={() => setAutomationLive(false)}
+    class="ri-stop-circle-fill" />
+  <i
+    class:highlighted={!automationLive}
+    class:hoverable={!automationLive}
+    data-cy="activate-automation"
+    on:click={() => setAutomationLive(true)}
+    class="ri-play-circle-fill" />
+</div>
+{#if $automationStore.selectedBlock}
+  <AutomationBlockSetup
+    bind:block={$automationStore.selectedBlock}
+    {webhookModal} />
+{:else if $automationStore.selectedAutomation}
+  <div class="block-label">{automation.name}</div>
+  <Button secondary wide on:click={testAutomation}>Test Automation</Button>
+{/if}
+<Button
+  secondary
+  wide
+  data-cy="save-automation-setup"
+  on:click={saveAutomation}>
+  Save Automation
+</Button>
 <Modal bind:this={webhookModal} width="30%">
   <CreateWebookModal />
 </Modal>
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-
-  header {
-    font-size: 18px;
-    font-weight: 600;
-    font-family: inter, sans-serif;
+  .title {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
-    color: var(--ink);
+    gap: var(--spacing-xs);
   }
-  header > span {
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+    flex: 1 1 auto;
+  }
+  .title i {
+    font-size: 20px;
     color: var(--grey-5);
-    margin-right: var(--spacing-xl);
-    cursor: pointer;
   }
-  .selected {
+  .title i.highlighted {
     color: var(--ink);
   }
+  .title i.hoverable:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
 
   .block-label {
+    font-size: var(--font-size-xs);
     font-weight: 500;
-    font-size: 14px;
     color: var(--grey-7);
-    margin-bottom: var(--spacing-xl);
   }
 
-  .content {
-    flex: 1 0 auto;
-  }
-
-  .buttons {
-    display: grid;
-    gap: var(--spacing-m);
+  .footer {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: stretch;
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
similarity index 88%
rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte
rename to packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index ba0b55cc85..9727fa1d51 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value secondary thin>
+  <Select bind:value secondary extraThin>
     <option value="">Choose an option</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
diff --git a/packages/builder/src/components/automation/SetupPanel/index.js b/packages/builder/src/components/automation/SetupPanel/index.js
deleted file mode 100644
index ccfbddaf1c..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SetupPanel } from "./SetupPanel.svelte"
diff --git a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
index 246c313819..8be9400caf 100644
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
@@ -3,12 +3,8 @@
   import WebhookDisplay from "./WebhookDisplay.svelte"
   import { ModalContent } from "@budibase/bbui"
   import { onMount, onDestroy } from "svelte"
-  import { cloneDeep } from "lodash/fp"
-  import analytics from "analytics"
 
   const POLL_RATE_MS = 2500
-  const DEFAULT_SCHEMA_OUTPUT = "Any input allowed"
-  let name
   let interval
   let finished = false
   let schemaURL
@@ -88,8 +84,7 @@
     text-decoration: none;
   }
   p {
-    margin-top: 0;
-    padding-top: 0;
+    margin: 0;
     text-align: justify;
   }
   .finished-text {
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index cac9a58397..5b9293bc8c 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -1,7 +1,7 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
   import { Input } from "@budibase/bbui"
-  import { store } from "../../../builderStore"
+  import { store } from "builderStore"
 
   export let value
   export let production = false
diff --git a/packages/builder/src/components/automation/index.js b/packages/builder/src/components/automation/index.js
deleted file mode 100644
index cb5a603eae..0000000000
--- a/packages/builder/src/components/automation/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AutomationBuilder } from "./AutomationBuilder/AutomationBuilder.svelte"
-export { default as SetupPanel } from "./SetupPanel/SetupPanel.svelte"
-export { default as AutomationPanel } from "./AutomationPanel/AutomationPanel.svelte"
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 8d72c12576..9a5eaef83a 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -12,7 +12,6 @@
 
   $: title = $backendUiStore.selectedTable.name
   $: schema = $backendUiStore.selectedTable.schema
-  $: tableId = $backendUiStore.selectedTable._id
   $: tableView = {
     schema,
     name: $backendUiStore.selectedView.name,
diff --git a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
index d9bae810cb..ede4d54022 100644
--- a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
@@ -1,7 +1,6 @@
 <script>
   import api from "builderStore/api"
   import Table from "./Table.svelte"
-  import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
 
   export let tableId
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 8dd25da3cd..35986785de 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,6 +1,5 @@
 <script>
   import { fade } from "svelte/transition"
-  import { Button } from "@budibase/bbui"
   import { goto, params } from "@sveltech/routify"
   import AgGrid from "@budibase/svelte-ag-grid"
 
@@ -8,11 +7,7 @@
   import { notifier } from "builderStore/store/notifications"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
-  import {
-    getRenderer,
-    editRowRenderer,
-    deleteRowRenderer,
-  } from "./cells/cellRenderers"
+  import { getRenderer, editRowRenderer } from "./cells/cellRenderers"
   import TableLoadingOverlay from "./TableLoadingOverlay"
   import TableHeader from "./TableHeader"
   import "@budibase/svelte-ag-grid/dist/index.css"
@@ -58,8 +53,8 @@
           resizable: false,
           suppressMovable: true,
           suppressMenu: true,
-          minWidth: 100,
-          width: 100,
+          minWidth: 84,
+          width: 84,
           cellRenderer: editRowRenderer,
         },
       ]
@@ -100,7 +95,7 @@
   }
 
   const deleteRows = async () => {
-    const response = await api.post(`/api/${tableId}/rows`, {
+    await api.post(`/api/${tableId}/rows`, {
       rows: selectedRows,
       type: "delete",
     })
@@ -110,16 +105,23 @@
   }
 </script>
 
-<section>
-  <div class="table-controls">
-    <h2 class="title"><span>{title}</span></h2>
-    <div class="popovers">
-      <slot />
-      {#if selectedRows.length > 0}
-        <DeleteRowsButton {selectedRows} {deleteRows} />
-      {/if}
-    </div>
+<div>
+  <div class="table-title">
+    <h1>{title}</h1>
+    {#if loading}
+      <div transition:fade>
+        <Spinner size="10" />
+      </div>
+    {/if}
   </div>
+  <div class="popovers">
+    <slot />
+    {#if selectedRows.length > 0}
+      <DeleteRowsButton {selectedRows} {deleteRows} />
+    {/if}
+  </div>
+</div>
+<div class="grid-wrapper">
   <AgGrid
     {theme}
     {options}
@@ -127,35 +129,57 @@
     {columnDefs}
     {loading}
     on:select={({ detail }) => (selectedRows = detail)} />
-</section>
+</div>
 
 <style>
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    margin-top: 0;
+  .table-title {
+    height: 24px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-
-  .title > span {
-    margin-right: var(--spacing-xs);
+  .table-title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
   }
-
-  .table-controls {
-    width: 100%;
+  .table-title > div {
+    margin-left: var(--spacing-xs);
   }
 
   .popovers {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .popovers :global(button) {
+    font-weight: 500;
+    margin-top: var(--spacing-l);
+  }
+  .popovers :global(button svg) {
+    margin-right: var(--spacing-xs);
   }
 
-  :global(.popovers > div) {
-    margin-right: var(--spacing-m);
-    margin-bottom: var(--spacing-xl);
+  .grid-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .grid-wrapper :global(> *) {
+    height: auto;
+    flex: 1 1 auto;
+  }
+
+  :global(.ag-theme-alpine) {
+    --ag-border-color: var(--grey-4);
+    --ag-header-background-color: var(--grey-1);
+    --ag-odd-row-background-color: var(--grey-1);
+    --ag-row-border-color: var(--grey-3);
   }
 
   :global(.ag-menu) {
@@ -168,11 +192,15 @@
   }
 
   :global(.ag-header-cell-text) {
-    font-family: Inter;
+    font-family: var(--font-sans);
     font-weight: 600;
     color: var(--ink);
   }
 
+  tbody tr:hover {
+    background: var(--grey-1);
+  }
+
   :global(.ag-filter) {
     padding: var(--spacing-s);
     outline: none;
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index fc933e374c..f55969087f 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { TextButton, Icon, Modal, ModalContent } from "@budibase/bbui"
-  import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
+  import { TextButton, Icon } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
   export let deleteRows
@@ -21,14 +21,12 @@
     row(s)
   </TextButton>
 </div>
-<Modal bind:this={modal}>
-  <ModalContent
-    red
-    confirmText="Delete"
-    onConfirm={confirmDeletion}
-    title="Confirm Row Deletion">
-    Are you sure you want to delete
-    {selectedRows.length}
-    row{selectedRows.length > 1 ? 's' : ''}?
-  </ModalContent>
-</Modal>
+<ConfirmDialog
+  bind:this={modal}
+  okText="Delete"
+  onOk={confirmDeletion}
+  title="Confirm Deletion">
+  Are you sure you want to delete
+  {selectedRows.length}
+  row{selectedRows.length > 1 ? 's' : ''}?
+</ConfirmDialog>
diff --git a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte b/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
index ed97fd366c..b8169f1398 100644
--- a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
@@ -12,8 +12,8 @@
       {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
         <img {width} {height} src={file.url} />
       {:else}
-        <i class="ri-file-line" />
         <span class="extension">.{file.extension}</span>
+        <i class="ri-file-line" />
         <span>{file.name}</span>
       {/if}
     </div>
@@ -33,12 +33,12 @@
   }
 
   i {
-    font-size: 36px;
-    margin-bottom: var(--spacing-m);
+    font-size: 24px;
+    position: relative;
+    top: 5px;
   }
 
   .file {
-    position: relative;
     height: 75px;
     width: 75px;
     border: 2px dashed var(--grey-7);
@@ -46,18 +46,23 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
     justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .extension {
     position: absolute;
-    top: var(--spacing-s);
-    left: var(--spacing-s);
+    top: -5px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
   }
 
   span {
+    font-size: var(--font-size-xs);
     width: 75px;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
index 17165f9437..209f23119f 100644
--- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
+++ b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
@@ -31,6 +31,9 @@ export function deleteRowRenderer(params) {
 
 export function editRowRenderer(params) {
   const container = document.createElement("div")
+  container.style.height = "100%"
+  container.style.display = "flex"
+  container.style.alignItems = "center"
 
   new EditRow({
     target: container,
@@ -46,6 +49,9 @@ export function editRowRenderer(params) {
 function attachmentRenderer(options, constraints, editable) {
   return params => {
     const container = document.createElement("div")
+    container.style.height = "100%"
+    container.style.display = "flex"
+    container.style.alignItems = "center"
 
     const attachmentInstance = new AttachmentList({
       target: container,
@@ -64,6 +70,7 @@ function linkedRowRenderer() {
     let container = document.createElement("div")
     container.style.display = "grid"
     container.style.height = "100%"
+    container.style.alignItems = "center"
 
     new RelationshipDisplay({
       target: container,
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index c831ef8193..866e574bca 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -170,7 +170,7 @@
   okText="Delete Column"
   onOk={deleteColumn}
   onCancel={hideDeleteDialog}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   .actions {
diff --git a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
index 51b830b484..b9f9cf32e1 100644
--- a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
@@ -1,14 +1,11 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
   import * as api from "../api"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let row
 
-  let anchor
-  let dropdown
   let confirmDeleteDialog
 
   function showDelete() {
@@ -28,7 +25,7 @@
   body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
   okText="Delete Row"
   onOk={deleteRow}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   .ri-delete-bin-line:hover {
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
index d3c2ab03df..d5b3b63e0f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
@@ -1,13 +1,9 @@
 <script>
-  import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal, Button } from "@budibase/bbui"
+  import { Modal, Button } from "@budibase/bbui"
   import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
 
   export let row
 
-  let anchor
-  let dropdown
-  let confirmDeleteDialog
   let modal
 
   function showModal(e) {
@@ -16,7 +12,7 @@
   }
 </script>
 
-<Button translucent small on:click={showModal}>Edit</Button>
+<Button data-cy="edit-row" translucent small on:click={showModal}>Edit</Button>
 <Modal bind:this={modal}>
   <CreateEditRowModal {row} />
 </Modal>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 1e766072f2..d328df4b40 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -1,10 +1,9 @@
 <script>
-  import { Heading, Body, Button, Select, Label } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { notifier } from "builderStore/store/notifications"
   import { FIELDS } from "constants/backend"
   import api from "builderStore/api"
 
-  const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 1
 
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index b8683d3dba..5a57fe6a4a 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -5,9 +5,10 @@
   import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
+  import NavItem from "components/common/NavItem.svelte"
 
+  let modal
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -20,67 +21,68 @@
     backendUiStore.actions.views.select(view)
     $goto(`./view/${view.name}`)
   }
+
+  function onClickView(table, viewName) {
+    if (selectedView === viewName) {
+      return
+    }
+    selectView({
+      name: viewName,
+      ...table.views[viewName],
+    })
+  }
 </script>
 
-<div class="items-root">
-  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-    <div class="hierarchy">
-      <div class="components-list-container">
-        <Heading small>Tables</Heading>
-        <Spacer medium />
-        <CreateTableModal />
-        <div class="hierarchy-items-container">
-          {#each $backendUiStore.tables as table}
-            <ListItem
-              selected={selectedView === `all_${table._id}`}
-              title={table.name}
-              icon="ri-table-fill"
-              on:click={() => selectTable(table)}>
-              <EditTablePopover {table} />
-            </ListItem>
-            {#each Object.keys(table.views || {}) as viewName}
-              <ListItem
-                indented
-                selected={selectedView === viewName}
-                title={viewName}
-                icon="ri-eye-line"
-                on:click={() => (selectedView === viewName ? {} : selectView({
-                        name: viewName,
-                        ...table.views[viewName],
-                      }))}>
-                <EditViewPopover
-                  view={{ name: viewName, ...table.views[viewName] }} />
-              </ListItem>
-            {/each}
-          {/each}
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
+{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+  <div class="title">
+    <h1>Tables</h1>
+    <i data-cy="new-table" on:click={modal.show} class="ri-add-circle-fill" />
+  </div>
+  <div class="hierarchy-items-container">
+    {#each $backendUiStore.tables as table, idx}
+      <NavItem
+        border={idx > 0}
+        icon="ri-table-line"
+        text={table.name}
+        selected={selectedView === `all_${table._id}`}
+        on:click={() => selectTable(table)}>
+        <EditTablePopover {table} />
+      </NavItem>
+      {#each Object.keys(table.views || {}) as viewName}
+        <NavItem
+          indentLevel={1}
+          icon="ri-eye-line"
+          text={viewName}
+          selected={selectedView === viewName}
+          on:click={() => onClickView(table, viewName)}>
+          <EditViewPopover
+            view={{ name: viewName, ...table.views[viewName] }} />
+        </NavItem>
+      {/each}
+    {/each}
+  </div>
+{/if}
+<Modal bind:this={modal}>
+  <CreateTableModal />
+</Modal>
 
 <style>
-  h5 {
-    font-size: 18px;
-    font-weight: 600;
-    margin-top: 0;
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .items-root {
+  .title {
     display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
-
-  .hierarchy {
-    display: flex;
-    flex-direction: column;
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
   }
-
-  .hierarchy-items-container {
-    margin-top: var(--spacing-xl);
-    flex: 1 1 auto;
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index dd691e9e80..146f881b2b 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -2,8 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
+  import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -22,12 +21,6 @@
   let dataImport
   let error = ""
 
-  function resetState() {
-    name = ""
-    dataImport = undefined
-    error = ""
-  }
-
   function checkValid(evt) {
     const tableName = evt.target.value
     if ($backendUiStore.models?.some(model => model.name === tableName)) {
@@ -84,23 +77,20 @@
   }
 </script>
 
-<Button primary wide on:click={modal.show}>Create New Table</Button>
-<Modal bind:this={modal} on:hide={resetState}>
-  <ModalContent
-    title="Create Table"
-    confirmText="Create"
-    onConfirm={saveTable}
-    disabled={error || !name || (dataImport && !dataImport.valid)}>
-    <Input
-      data-cy="table-name-input"
-      thin
-      label="Table Name"
-      on:input={checkValid}
-      bind:value={name}
-      {error} />
-    <div>
-      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-      <TableDataImport bind:dataImport />
-    </div>
-  </ModalContent>
-</Modal>
+<ModalContent
+  title="Create Table"
+  confirmText="Create"
+  onConfirm={saveTable}
+  disabled={error || !name || (dataImport && !dataImport.valid)}>
+  <Input
+    data-cy="table-name-input"
+    thin
+    label="Table Name"
+    on:input={checkValid}
+    bind:value={name}
+    {error} />
+  <div>
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <TableDataImport bind:dataImport />
+  </div>
+</ModalContent>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 25f74671fd..c794999ac7 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -1,11 +1,9 @@
 <script>
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import screenTemplates from "builderStore/store/screenTemplates"
-  import api from "builderStore/api"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let table
 
@@ -66,42 +64,46 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit Table</h5>
+        <Input
+          label="Table Name"
+          thin
+          bind:value={table.name}
+          on:input={checkValid}
+          {error} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary disabled={error} on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-table"
+          title="Edit"
+          on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showModal}
+          data-cy="delete-table" />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit Table</h5>
-      <Input
-        label="Table Name"
-        thin
-        bind:value={table.name}
-        on:input={checkValid}
-        {error} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary disabled={error} on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-table" on:click={showModal}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Delete">
+  title="Confirm Deletion">
   Are you sure you wish to delete the table
   <i>{table.name}?</i>
   The following will also be deleted:
@@ -155,29 +157,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 9c165355d2..331f336d4e 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -2,9 +2,9 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let view
 
@@ -46,38 +46,42 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit View</h5>
+        <Input label="View Name" thin bind:value={view.name} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-view"
+          title="Edit"
+          on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          data-cy="delete-view"
+          on:click={showDelete} />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit View</h5>
-      <Input label="View Name" thin bind:value={view.name} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-view" on:click={showDelete}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   div.icon {
@@ -108,29 +112,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
deleted file mode 100644
index 3af21e4398..0000000000
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-  export let disabled = false
-  export let hidden = false
-  export let secondary = false
-  export let primary = true
-  export let cancel = false
-  export let alert = false
-  export let warning = false
-</script>
-
-<button
-  on:click
-  class="button"
-  class:hidden
-  class:secondary
-  class:primary
-  class:alert
-  class:cancel
-  class:warning
-  {disabled}>
-  <slot />
-</button>
-
-<style>
-  .primary {
-    color: #ffffff;
-    background: var(--blue);
-    border: solid 1px var(--blue);
-  }
-
-  .alert {
-    color: white;
-    background: #e26d69;
-    border: solid 1px #e26d69;
-  }
-
-  .cancel {
-    color: var(--secondary40);
-    background: none;
-  }
-
-  .secondary {
-    color: var(--ink);
-    border: solid 1px var(--grey-4);
-    background: white;
-  }
-
-  .button {
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: 3px;
-    padding: 10px 20px;
-    height: 40px;
-  }
-
-  .button:hover {
-    cursor: pointer;
-    filter: saturate(90%);
-  }
-
-  .button:disabled {
-    color: rgba(22, 48, 87, 0.2);
-    cursor: default;
-    background: transparent;
-  }
-
-  .hidden {
-    visibility: hidden;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Button.svelte b/packages/builder/src/components/common/Button.svelte
deleted file mode 100644
index a5fe3752a2..0000000000
--- a/packages/builder/src/components/common/Button.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script>
-  export let color = "primary"
-  export let className = ""
-  export let style = ""
-  export let groupPosition = ""
-  export let grouped = false
-
-  $: borderClass = grouped ? "" : "border-normal"
-</script>
-
-<button
-  class="{color}
-  {className}
-  {borderClass}
-  {grouped ? 'grouped' : ''}"
-  {style}
-  on:click>
-  <slot />
-</button>
-
-<style>
-  .border-normal {
-    border-radius: var(--borderradiusall);
-  }
-  .border-left {
-    border-radius: var(--borderradius) 0 0 var(--borderradius);
-  }
-  .border-right {
-    border-radius: 0 var(--borderradius) var(--borderradius) 0;
-  }
-  .border-middle {
-    border-radius: 0;
-  }
-
-  button {
-    border-style: solid;
-    padding: 7.5px 15px;
-    cursor: pointer;
-    margin: 5px;
-    border-radius: 5px;
-  }
-
-  /* ---- PRIMARY ----*/
-  .primary {
-    background-color: var(--blue);
-    border-color: var(--blue);
-    color: var(--white);
-  }
-
-  .primary:hover {
-    background-color: var(--blue);
-    border-color: var(--blue);
-  }
-
-  .primary:active {
-    background-color: var(--primarydark);
-    border-color: var(--primarydark);
-  }
-
-  .primary-outline {
-    background-color: var(--white);
-    border-color: var(--blue);
-    color: var(--blue);
-  }
-
-  .primary-outline:hover {
-    background-color: var(--primary10);
-  }
-
-  .primary-outline:pressed {
-    background-color: var(--primary25);
-  }
-
-  /* ---- secondary ----*/
-
-  .secondary {
-    background-color: var(--ink);
-    border-color: var(--ink);
-    color: var(--white);
-  }
-
-  .secondary:hover {
-    background-color: var(--secondary75);
-    border-color: var(--secondary75);
-  }
-
-  .secondary:pressed {
-    background-color: var(--secondarydark);
-    border-color: var(--secondarydark);
-  }
-
-  .secondary-outline {
-    background-color: var(--white);
-    border-color: var(--ink);
-    color: var(--ink);
-  }
-
-  .secondary-outline:hover {
-    background-color: var(--secondary10);
-  }
-
-  .secondary-outline:pressed {
-    background-color: var(--secondary25);
-  }
-
-  /* ---- success ----*/
-  .success {
-    background-color: var(--success100);
-    border-color: var(--success100);
-    color: var(--white);
-  }
-
-  .success:hover {
-    background-color: var(--success75);
-    border-color: var(--success75);
-  }
-
-  .success:pressed {
-    background-color: var(--successdark);
-    border-color: var(--successdark);
-  }
-
-  .success-outline {
-    background-color: var(--white);
-    border-color: var(--success100);
-    color: var(--success100);
-  }
-
-  .success-outline:hover {
-    background-color: var(--success10);
-  }
-
-  .success-outline:pressed {
-    background-color: var(--success25);
-  }
-
-  /* ---- deletion ----*/
-  .deletion {
-    background-color: var(--red);
-    border-color: var(--red);
-    color: var(--white);
-  }
-
-  .deletion:hover {
-    background-color: var(--red-light);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion:pressed {
-    background-color: var(--red-dark);
-    border-color: var(--red-dark);
-    color: var(--white);
-  }
-
-  .deletion-outline {
-    background-color: var(--white);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion-outline:hover {
-    background-color: var(--red-light);
-    color: var(--red);
-  }
-
-  .deletion-outline:pressed {
-    background-color: var(--red-dark);
-    color: var(--white);
-  }
-</style>
diff --git a/packages/builder/src/components/common/ButtonGroup.svelte b/packages/builder/src/components/common/ButtonGroup.svelte
deleted file mode 100644
index 7b57ea34cc..0000000000
--- a/packages/builder/src/components/common/ButtonGroup.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  export let style = ""
-</script>
-
-<div class="root" {style}>
-  <slot />
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
new file mode 100644
index 0000000000..0e881a4795
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
@@ -0,0 +1,13 @@
+<div class="dropdown-container" on:click>
+  <slot />
+</div>
+
+<style>
+  .dropdown-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: var(--spacing-s) 0;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
new file mode 100644
index 0000000000..66a384fc90
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -0,0 +1,70 @@
+<script>
+  export let icon
+  export let title
+  export let subtitle
+  export let disabled
+</script>
+
+<div
+  class="dropdown-item"
+  class:disabled
+  on:click
+  class:big={subtitle != null}
+  {...$$restProps}>
+  {#if icon}<i class={icon} />{/if}
+  <div class="content">
+    <div class="title">{title}</div>
+    {#if subtitle != null}
+      <div class="subtitle">{subtitle}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .dropdown-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding: var(--spacing-xs) var(--spacing-l);
+    color: var(--ink);
+  }
+  .dropdown-item.disabled,
+  .dropdown-item.disabled .subtitle {
+    pointer-events: none;
+    color: var(--grey-5);
+  }
+  .dropdown-item.big {
+    padding: var(--spacing-s) var(--spacing-l);
+  }
+  .dropdown-item:not(.disabled):hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .title,
+  .subtitle {
+    font-size: var(--font-size-xs);
+  }
+
+  .title {
+    font-weight: 400;
+  }
+
+  .subtitle {
+    color: var(--grey-7);
+    font-weight: 400;
+  }
+
+  i {
+    font-size: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/index.js b/packages/builder/src/components/common/Dropdowns/index.js
new file mode 100644
index 0000000000..a95e303ec7
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/index.js
@@ -0,0 +1,2 @@
+export { default as DropdownContainer } from "./DropdownContainer.svelte"
+export { default as DropdownItem } from "./DropdownItem.svelte"
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 53cd606143..be93829084 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,11 +1,13 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
-  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
+  import { Dropzone } from "@budibase/bbui"
   import api from "builderStore/api"
 
   export let files = []
 
-  function handleFileTooLarge() {
+  const BYTES_IN_MB = 1000000
+
+  function handleFileTooLarge(fileSizeLimit) {
     notifier.danger(
       `Files cannot exceed ${fileSizeLimit /
         BYTES_IN_MB}MB. Please try again with smaller files.`
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
new file mode 100644
index 0000000000..b0f90a10a9
--- /dev/null
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -0,0 +1,109 @@
+<script>
+  export let icon
+  export let withArrow = false
+  export let withActions = true
+  export let indentLevel = 0
+  export let text
+  export let border = true
+  export let selected = false
+  export let opened = false
+  export let draggable = false
+</script>
+
+<div
+  class="nav-item"
+  class:border
+  class:selected
+  style={`padding-left: ${indentLevel * 18}px`}
+  {draggable}
+  on:dragend
+  on:dragstart
+  on:dragover
+  on:drop
+  on:click
+  ondragover="return false"
+  ondragenter="return false">
+  <div class="content">
+    {#if withArrow}
+      <div class:opened class="icon arrow">
+        <i class="ri-arrow-right-s-line" />
+      </div>
+    {/if}
+    {#if icon}
+      <div class="icon"><i class={icon} /></div>
+    {/if}
+    <div class="text">{text}</div>
+    {#if withActions}
+      <div class="actions">
+        <slot />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .nav-item {
+    border-radius: var(--border-radius-m);
+    cursor: pointer;
+    color: var(--grey-7);
+  }
+  .nav-item.border {
+    border-top: 1px solid var(--grey-1);
+  }
+  .nav-item.selected {
+    background-color: var(--grey-2);
+    color: var(--ink);
+  }
+  .nav-item:hover {
+    background-color: var(--grey-1);
+  }
+  .nav-item:hover .actions {
+    display: flex;
+  }
+
+  .content {
+    padding: 0 var(--spacing-m);
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .icon {
+    font-size: 16px;
+    flex: 0 0 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon.arrow {
+    margin: 0 -2px 0 -6px;
+    font-size: 12px;
+  }
+  .icon.arrow.opened {
+    transform: rotate(90deg);
+  }
+  .icon + .icon {
+    margin-left: -4px;
+  }
+
+  .text {
+    flex: 1 1 auto;
+    font-weight: 500;
+    font-size: var(--font-size-xs);
+  }
+
+  .actions {
+    display: none;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/common/NumberBox.svelte b/packages/builder/src/components/common/NumberBox.svelte
deleted file mode 100644
index 106b9e67d2..0000000000
--- a/packages/builder/src/components/common/NumberBox.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  export let value
-  export let label
-
-  const inputChanged = ev => {
-    try {
-      value = Number(ev.target.value)
-    } catch (_) {
-      value = null
-    }
-  }
-
-  let numberText = value === null || value === undefined ? "" : value.toString()
-</script>
-
-<div class="numberbox">
-  <label>{label}</label>
-  <input
-    class="budibase__input"
-    type="number"
-    {value}
-    on:change={inputChanged} />
-</div>
-
-<style>
-  .numberbox {
-    display: grid;
-    align-items: center;
-  }
-
-  label {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
deleted file mode 100644
index 707bbfcc64..0000000000
--- a/packages/builder/src/components/common/Switcher.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-  export let tabs = []
-  export const selectTab = tabName => {
-    selected = tabName
-    selectedIndex = tabs.indexOf(selected)
-  }
-
-  let selected = tabs.length > 0 && tabs[0]
-  let selectedIndex = 0
-
-  const isSelected = tab => selected === tab
-</script>
-
-<div class="root">
-  <div class="switcher">
-    {#each tabs as tab}
-      <button class:selected={selected === tab} on:click={() => selectTab(tab)}>
-        {tab}
-      </button>
-    {/each}
-  </div>
-
-  <div class="panel">
-    {#if selectedIndex === 0}
-      <slot name="0" />
-    {:else if selectedIndex === 1}
-      <slot name="1" />
-    {:else if selectedIndex === 2}
-      <slot name="2" />
-    {:else if selectedIndex === 3}
-      <slot name="3" />
-    {/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px;
-    border-left: solid 1px var(--grey-2);
-    box-sizing: border-box;
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-    box-sizing: border-box;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-    background: none;
-    outline: none;
-    font-family: Inter;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    min-height: 0;
-    height: 100%;
-    overflow-y: auto;
-  }
-</style>
diff --git a/packages/builder/src/components/common/core.js b/packages/builder/src/components/common/core.js
deleted file mode 100644
index 19a3c9afed..0000000000
--- a/packages/builder/src/components/common/core.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { flow } from "lodash/fp"
-
-export const pipe = (arg, funcs) => flow(funcs)(arg)
diff --git a/packages/builder/src/components/common/eventHandlers.js b/packages/builder/src/components/common/eventHandlers.js
deleted file mode 100644
index 2e7a62ac3e..0000000000
--- a/packages/builder/src/components/common/eventHandlers.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { eventHandlers } from "../../../../client/src/state/eventHandlers"
-export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers"
-
-export const allHandlers = () => {
-  const handlersObj = eventHandlers()
-
-  const handlers = Object.keys(handlersObj).map(name => ({
-    name,
-    ...handlersObj[name],
-  }))
-
-  return handlers
-}
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 3bb6d6e40d..f28dbae038 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -1,32 +1,36 @@
 <script>
   import SettingsModal from "./SettingsModal.svelte"
-  import { SettingsIcon } from "components/common/Icons/"
   import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
-<span class="topnavitemright settings" on:click={modal.show}>
-  <SettingsIcon />
-</span>
+<div class="topnavitemright settings" on:click={modal.show}>
+  <i class="ri-settings-3-line" />
+</div>
 <Modal bind:this={modal} width="600px">
   <SettingsModal />
 </Modal>
 
 <style>
-  span:first-letter {
-    text-transform: capitalize;
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
   }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
+  }
+  .topnavitemright:hover i {
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/settings/TabTitle.svelte b/packages/builder/src/components/settings/TabTitle.svelte
deleted file mode 100644
index 8e2a2d6c13..0000000000
--- a/packages/builder/src/components/settings/TabTitle.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<h3>
-  <slot />
-</h3>
-
-<style>
-  h3 {
-    font-size: 18px;
-    font-weight: bold;
-    color: var(--ink);
-    margin-top: 40px;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 7ee707d490..4118c2b9e7 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -7,9 +7,8 @@
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
-  import { Input, TextArea, Button } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
-  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 85c50711ae..fd7270cdfa 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -2,7 +2,7 @@
   import { store, backendUiStore } from "builderStore"
   import { map, join } from "lodash/fp"
   import iframeTemplate from "./iframeTemplate"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../../helpers"
 
   let iframe
   let styles = ""
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 5ba0798718..bb73dfd80d 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -43,7 +43,7 @@
     width: 24px;
     background: var(--grey-4);
     right: var(--spacing-s);
-    bottom: 9px;
+    bottom: 5px;
   }
   button:hover {
     background: var(--grey-5);
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 15335cbb87..ba3f4e920d 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -18,9 +18,13 @@
 <style>
   .tabs {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
     list-style: none;
-    font-size: 18px;
-    font-weight: 600;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    height: 24px;
   }
 
   li {
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 59a8e4e1ed..62eb49145d 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -3,10 +3,10 @@
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last, cloneDeep } from "lodash/fp"
+  import { last } from "lodash/fp"
   import { getParent, saveCurrentPreviewItem } from "builderStore/storeUtils"
-  import { uuid } from "builderStore/uuid"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let component
 
@@ -98,110 +98,65 @@
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
+  <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
+    <DropdownContainer on:click={hideDropdown}>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+      <DropdownItem
+        icon="ri-arrow-up-line"
+        title="Move up"
+        on:click={moveUpComponent} />
+      <DropdownItem
+        icon="ri-arrow-down-line"
+        title="Move down"
+        on:click={moveDownComponent} />
+      <DropdownItem
+        icon="ri-repeat-one-line"
+        title="Duplicate"
+        on:click={copyComponent} />
+      <DropdownItem
+        icon="ri-scissors-cut-line"
+        title="Cut"
+        on:click={() => storeComponentForCopy(true)} />
+      <DropdownItem
+        icon="ri-file-copy-line"
+        title="Copy"
+        on:click={() => storeComponentForCopy(false)} />
+      <hr class="hr-style" />
+      <DropdownItem
+        icon="ri-insert-row-top"
+        title="Paste above"
+        disabled={noPaste}
+        on:click={() => pasteComponent('above')} />
+      <DropdownItem
+        icon="ri-insert-row-bottom"
+        title="Paste below"
+        disabled={noPaste}
+        on:click={() => pasteComponent('below')} />
+      <DropdownItem
+        icon="ri-insert-column-right"
+        title="Paste inside"
+        disabled={noPaste || noChildrenAllowed}
+        on:click={() => pasteComponent('inside')} />
+    </DropdownContainer>
+  </DropdownMenu>
 </div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:click={hideDropdown}
-  width="170px"
-  {anchor}
-  align="left">
-  <ul>
-    <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      <i class="ri-delete-bin-2-line" />
-      Delete
-    </li>
-    <li class="item" on:click={moveUpComponent}>
-      <i class="ri-arrow-up-line" />
-      Move up
-    </li>
-    <li class="item" on:click={moveDownComponent}>
-      <i class="ri-arrow-down-line" />
-      Move down
-    </li>
-    <li class="item" on:click={copyComponent}>
-      <i class="ri-repeat-one-line" />
-      Duplicate
-    </li>
-    <li class="item" on:click={() => storeComponentForCopy(true)}>
-      <i class="ri-scissors-cut-line" />
-      Cut
-    </li>
-    <li class="item" on:click={() => storeComponentForCopy(false)}>
-      <i class="ri-file-copy-line" />
-      Copy
-    </li>
-    <hr class="hr-style" />
-    <li
-      class="item"
-      class:disabled={noPaste}
-      on:click={() => pasteComponent('above')}>
-      <i class="ri-insert-row-top" />
-      Paste above
-    </li>
-    <li
-      class="item"
-      class:disabled={noPaste}
-      on:click={() => pasteComponent('below')}>
-      <i class="ri-insert-row-bottom" />
-      Paste below
-    </li>
-    <li
-      class="item"
-      class:disabled={noPaste || noChildrenAllowed}
-      on:click={() => pasteComponent('inside')}>
-      <i class="ri-insert-column-right" />
-      Paste inside
-    </li>
-  </ul>
-</DropdownMenu>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
+  title="Confirm Deletion"
   body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
   okText="Delete Component"
   onOk={deleteComponent} />
 
 <style>
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
-  .icon i {
-    font-size: 16px;
-  }
-
-  .hr-style {
+  hr {
     margin: 8px 0;
-    color: var(--grey-4);
+    background-color: var(--grey-4);
+    height: 1px;
+    border: none;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 1331ce0bdb..475b864542 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -63,41 +63,31 @@
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {categories}
-    {selectedCategory} />
+<CategoryTab
+  onClick={category => (selectedCategory = category)}
+  {categories}
+  {selectedCategory} />
 
-  {#if displayName}
-    <div class="instance-name">{componentInstance._instanceName}</div>
+{#if displayName}
+  <div class="instance-name">{componentInstance._instanceName}</div>
+{/if}
+
+<div class="component-props-container">
+  {#if selectedCategory.value === 'design'}
+    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+  {:else if selectedCategory.value === 'settings'}
+    <SettingsView
+      {componentInstance}
+      {componentDefinition}
+      {panelDefinition}
+      displayNameField={displayName}
+      onChange={store.setComponentProp}
+      onScreenPropChange={store.setPageOrScreenProp}
+      screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
   {/if}
-
-  <div class="component-props-container">
-    {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
-    {:else if selectedCategory.value === 'settings'}
-      <SettingsView
-        {componentInstance}
-        {componentDefinition}
-        {panelDefinition}
-        displayNameField={displayName}
-        onChange={store.setComponentProp}
-        onScreenPropChange={store.setPageOrScreenProp}
-        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {/if}
-  </div>
 </div>
 
 <style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-
   .title > div:nth-child(1) {
     grid-column-start: name;
     color: var(--ink);
@@ -108,7 +98,6 @@
   }
 
   .component-props-container {
-    margin-top: 16px;
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
@@ -118,8 +107,7 @@
   }
 
   .instance-name {
-    margin-top: 20px;
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 00ce42cf61..f43faf033d 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -2,47 +2,97 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
-  import CategoryTab from "./CategoryTab.svelte"
-
-  import Tab from "./ItemTab/Tab.svelte"
-
-  export let toggleTab
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   const categories = components.categories
-  let selectedCategory = categories[0]
+  let selectedIndex
+  let anchors = []
+  let popover
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
+
+  const close = () => {
+    popover.hide()
+  }
+
+  const onCategoryChosen = (category, idx) => {
+    if (category.isCategory) {
+      selectedIndex = idx
+      popover.show()
+    } else {
+      onComponentChosen(category)
+    }
+  }
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component, component.presetProps)
-
-    toggleTab("Navigate")
-
-    // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
-
-    // Go to correct URL
     $goto(`./:page/:screen/${path}`)
+    close()
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {selectedCategory}
-    {categories} />
-
-  <div class="panel">
-    <Tab
-      list={selectedCategory}
-      on:selectItem={e => onComponentChosen(e.detail)}
-      {toggleTab} />
-  </div>
+<div class="container">
+  {#each categories as category, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="category"
+      on:click={() => onCategoryChosen(category, idx)}
+      class:active={idx === selectedIndex}>
+      {#if category.icon}<i class={category.icon} />{/if}
+      <span>{category.name}</span>
+      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+    </div>
+  {/each}
 </div>
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
+  <DropdownContainer>
+    {#each categories[selectedIndex].children as item}
+      {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
+        <DropdownItem
+          icon={item.icon}
+          title={item.name}
+          on:click={() => onComponentChosen(item)} />
+      {/if}
+    {/each}
+  </DropdownContainer>
+</DropdownMenu>
 
 <style>
-  .panel {
-    margin-top: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 20px;
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    z-index: 1;
+    min-height: 24px;
+    flex-wrap: wrap;
+    gap: var(--spacing-l);
+  }
+
+  .category {
+    color: var(--grey-7);
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .category span {
+    font-weight: 500;
+    user-select: none;
+  }
+  .category.active,
+  .category:hover {
+    color: var(--ink);
+  }
+  .category i:not(:last-child) {
+    font-size: 16px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index add2a99d6a..48fe72f8d6 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -1,13 +1,12 @@
 <script>
-  import { params, goto } from "@sveltech/routify"
+  import { goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { pipe } from "components/common/core"
+  import { trimCharsStart, trimChars } from "lodash/fp"
+  import { pipe } from "../../helpers"
   import { store } from "builderStore"
-  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import { writable } from "svelte/store"
+  import NavItem from "components/common/NavItem.svelte"
 
   export let screens = []
 
@@ -24,8 +23,6 @@
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const joinPath = join("/")
-
   const normalizedName = name =>
     pipe(name, [
       trimCharsStart("./"),
@@ -42,26 +39,15 @@
 
 <div class="root">
   {#each sortedScreens as screen}
-    <div
-      class="budibase__nav-item screen-header-row"
-      class:selected={$store.currentComponentInfo._id === screen.props._id}
-      on:click|stopPropagation={() => changeScreen(screen)}>
-      <span
-        class="icon"
-        class:rotate={$store.currentPreviewItem.name !== screen.props._instanceName}>
-        {#if screen.props._children.length}
-          <ArrowDownIcon />
-        {/if}
-      </span>
-
-      <i class="ri-artboard-2-fill icon" />
-
-      <span class="title">{screen.props._instanceName}</span>
-
-      <div class="dropdown-menu">
-        <ScreenDropdownMenu {screen} />
-      </div>
-    </div>
+    <NavItem
+      icon="ri-artboard-2-line"
+      text={screen.props._instanceName}
+      withArrow={screen.props._children.length}
+      selected={$store.currentComponentInfo._id === screen.props._id}
+      opened={$store.currentPreviewItem.name === screen.props._id}
+      on:click={() => changeScreen(screen)}>
+      <ScreenDropdownMenu {screen} />
+    </NavItem>
 
     {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
       <ComponentsHierarchyChildren
@@ -71,55 +57,3 @@
     {/if}
   {/each}
 </div>
-
-<style>
-  .root {
-    font-weight: 400;
-    color: var(--ink);
-  }
-
-  .screen-header-row {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .title {
-    margin-left: 14px;
-    font-size: 14px;
-    font-weight: 400;
-    flex: 1;
-  }
-
-  .icon {
-    display: inline-block;
-    transition: 0.2s;
-    font-size: 24px;
-    width: 18px;
-    color: var(--grey-7);
-  }
-
-  .icon:nth-of-type(2) {
-    width: 14px;
-    margin: 0 0 0 5px;
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(-90deg);
-  }
-
-  .dropdown-menu {
-    display: none;
-    color: var(--ink);
-    padding: 0 5px;
-    width: 24px;
-    height: 24px;
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .budibase__nav-item:hover .dropdown-menu {
-    display: block;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 5f3a29d515..d854c9b906 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -2,14 +2,9 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../helpers"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
-  import {
-    XCircleIcon,
-    ChevronUpIcon,
-    ChevronDownIcon,
-    CopyIcon,
-  } from "../common/Icons"
+  import NavItem from "components/common/NavItem.svelte"
   import { getComponentDefinition } from "builderStore/storeUtils"
 
   export let components = []
@@ -40,7 +35,6 @@
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
-
   const get_capitalised_name = name => pipe(name, [get_name, capitalise])
   const isScreenslot = name => name === "##builtin/screenslot"
 
@@ -134,29 +128,22 @@
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {level * 20 + 40}px" />
+          class="drop-item"
+          style="margin-left: {(level + 1) * 18}px" />
       {/if}
 
-      <div
-        class="budibase__nav-item item"
-        class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 40}px"
-        draggable={true}
+      <NavItem
+        draggable
         on:dragend={dragend}
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={drop}
-        ondragover="return false"
-        ondragenter="return false">
-        <div class="nav-item">
-          <i class="icon ri-arrow-right-circle-line" />
-          {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-        </div>
-        <div class="actions">
-          <ComponentDropdownMenu {component} />
-        </div>
-      </div>
+        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+        withArrow
+        indentLevel={level + 1}
+        selected={currentComponent === component}>
+        <ComponentDropdownMenu {component} />
+      </NavItem>
 
       {#if component._children}
         <svelte:self
@@ -172,8 +159,8 @@
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 2 : 0)) * 20 + 40}px" />
+          class="drop-item"
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 18}px" />
       {/if}
     </li>
   {/each}
@@ -186,47 +173,9 @@
     margin: 0;
   }
 
-  .item {
-    display: grid;
-    grid-template-columns: 1fr auto auto auto;
-    padding: 0 var(--spacing-m);
-    margin: 0;
-    border-radius: var(--border-radius-m);
-    height: 36px;
-    align-items: center;
-  }
-
   .drop-item {
+    border-radius: var(--border-radius-m);
+    height: 32px;
     background: var(--blue-light);
-    height: 36px;
-  }
-
-  .actions {
-    display: none;
-    color: var(--ink);
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .item:hover {
-    background: var(--grey-1);
-    cursor: pointer;
-  }
-  .item:hover .actions {
-    display: block;
-  }
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: var(--ink);
-  }
-
-  .icon {
-    color: var(--grey-7);
-    margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index b783b38481..cbb532fcae 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -48,7 +48,7 @@
         {/each}
       {:else}
         <div class="no-design">
-          This component does not have any design properties.
+          This component doesn't have any design properties.
         </div>
       {/if}
     </div>
@@ -61,10 +61,10 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    gap: var(--spacing-l);
   }
 
   .design-view-state-categories {
-    flex: 0 0 50px;
   }
 
   .positioned-wrapper {
@@ -79,10 +79,15 @@
     min-height: 0;
     margin: 0 -20px;
     padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
 
   .no-design {
-    font-size: var(--font-size-s);
-    color: var(--grey-6);
+    font-size: var(--font-size-xs);
+    color: var(--grey-5);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
index 1e2908ab54..224ba3e386 100644
--- a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
@@ -29,7 +29,13 @@
 </script>
 
 <div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
     <option value="" />
     {#each urls as url}
       <option value={url.url}>{url.name}</option>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 0e45f2fcac..2fc19bd6b8 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,14 +1,7 @@
 <script>
-  import { store } from "builderStore"
-  import {
-    TextButton,
-    Button,
-    Body,
-    DropdownMenu,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
-  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index cb1d1dd1dd..483780a2c5 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -1,11 +1,6 @@
 <script>
   import { Input, DataList, Select } from "@budibase/bbui"
-  import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
   import { store, automationStore } from "builderStore"
-  import { ArrowDownIcon } from "components/common/Icons/"
-  import { createEventDispatcher } from "svelte"
 
   export let parameter
 
diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
index 5299e7d5c0..62429bf554 100644
--- a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { FeedbackIcon } from "components/common/Icons/"
   import { Popover } from "@budibase/bbui"
   import { store } from "builderStore"
 
@@ -16,41 +15,37 @@
   }, FIVE_MINUTES)
 </script>
 
-<span
-  class="container"
-  bind:this={iconContainer}
-  on:click={popover.show}
-  class:highlight={$store.highlightFeedbackIcon}>
-  <FeedbackIcon />
-</span>
+<div class="container" bind:this={iconContainer} on:click={popover.show}>
+  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
+</div>
 <Popover bind:this={popover} anchor={iconContainer} align="right">
   <FeedbackIframe on:finished={popover.hide} />
 </Popover>
 
 <style>
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  i.highlight {
+    color: var(--blue);
+    filter: drop-shadow(0 0 20px var(--blue));
+  }
+
   .container {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
-
-  .container:hover {
+  .container:hover i {
     color: var(--ink);
-    font-weight: 500;
-  }
-
-  .highlight {
-    color: var(--blue);
-  }
-
-  .highlight > :global(svg) {
-    filter: drop-shadow(0 0 20px var(--blue));
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index f27a2902ee..0d7cd280d7 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -22,23 +22,22 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    max-height: 36px;
-    padding: 8px 2px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: #ffffff;
+    background: white;
     color: var(--grey-7);
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 400;
+    border-radius: var(--border-radius-m);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 64c3ee45f4..94621a40e9 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -4,22 +4,41 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button, Spacer, Modal } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
+<div class="title">
+  <h1>Screens</h1>
+  <i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
+</div>
 <PagesList />
-
-<Spacer medium />
-<Button primary wide on:click={modal.show}>Create New Screen</Button>
-<Spacer medium />
-<PageLayout layout={$store.pages[$store.currentPageName]} />
-
 <div class="nav-items-container">
+  <PageLayout layout={$store.pages[$store.currentPageName]} />
   <ComponentsHierarchy screens={$store.screens} />
 </div>
-
 <Modal bind:this={modal}>
   <NewScreenModal />
 </Modal>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
index 6141702439..fe3a029716 100644
--- a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@@ -1,291 +1,291 @@
-<script>
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
-  import { createEventDispatcher, tick } from "svelte"
-
-  import icons from "./icons.js"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-  export let maxIconsPerPage = 30
-
-  let searchTerm = ""
-  let selectedLetter = "A"
-
-  let currentPage = 1
-  let filteredIcons = findIconByTerm(selectedLetter)
-
-  $: dispatch("change", value)
-
-  const alphabet = [
-    "A",
-    "B",
-    "C",
-    "D",
-    "E",
-    "F",
-    "G",
-    "H",
-    "I",
-    "J",
-    "K",
-    "L",
-    "M",
-    "N",
-    "O",
-    "P",
-    "Q",
-    "R",
-    "S",
-    "T",
-    "U",
-    "V",
-    "W",
-    "X",
-    "Y",
-    "Z",
-  ]
-  let buttonAnchor, dropdown
-  let loading = false
-
-  function findIconByTerm(term) {
-    const r = new RegExp(`\^${term}`, "i")
-    return icons.filter(i => r.test(i.label))
-  }
-
-  async function switchLetter(letter) {
-    currentPage = 1
-    searchTerm = ""
-    loading = true
-    selectedLetter = letter
-    filteredIcons = findIconByTerm(letter)
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function findIconOnPage() {
-    loading = true
-    const iconIdx = filteredIcons.findIndex(i => i.value === value)
-    if (iconIdx !== -1) {
-      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
-    }
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function setSelectedUI() {
-    if (value) {
-      const letter = displayValue.substring(0, 1)
-      await switchLetter(letter)
-      await findIconOnPage()
-    }
-  }
-
-  async function pageClick(next) {
-    loading = true
-    if (next && currentPage < totalPages) {
-      currentPage++
-    } else if (!next && currentPage > 1) {
-      currentPage--
-    }
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function searchForIcon(e) {
-    currentPage = 1
-    loading = true
-    filteredIcons = findIconByTerm(searchTerm)
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  $: displayValue = value ? value.substring(7) : "Pick Icon"
-
-  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
-  $: pageEndIdx = maxIconsPerPage * currentPage
-  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
-
-  $: pagerText = `Page ${currentPage} of ${totalPages}`
-</script>
-
-<div bind:this={buttonAnchor}>
-  <Button secondary on:click={dropdown.show}>{displayValue}</Button>
-</div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:open={setSelectedUI}
-  anchor={buttonAnchor}>
-  <div class="container">
-    <div class="search-area">
-      <div class="alphabet-area">
-        {#each alphabet as letter, idx}
-          <span
-            class="letter"
-            class:letter-selected={letter === selectedLetter}
-            on:click={() => switchLetter(letter)}>
-            {letter}
-          </span>
-          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
-        {/each}
-      </div>
-      <div class="search-input">
-        <div class="input-wrapper">
-          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
-        </div>
-        <Button secondary on:click={searchForIcon}>Search</Button>
-      </div>
-      <div class="page-area">
-        <div class="pager">
-          <span on:click={() => pageClick(false)}>
-            <i class="page-btn fas fa-chevron-left" />
-          </span>
-          <span>{pagerText}</span>
-          <span on:click={() => pageClick(true)}>
-            <i class="page-btn fas fa-chevron-right" />
-          </span>
-        </div>
-      </div>
-    </div>
-    {#if pagedIcons.length > 0}
-      <div class="icon-area">
-        {#if !loading}
-          {#each pagedIcons as icon}
-            <div
-              class="icon-container"
-              class:selected={value === icon.value}
-              on:click={() => (value = icon.value)}>
-              <div class="icon-preview">
-                <i class={`${icon.value} fa-3x`} />
-              </div>
-              <div class="icon-label">{icon.label}</div>
-            </div>
-          {/each}
-        {/if}
-      </div>
-    {:else}
-      <div class="no-icons">
-        <h5>
-          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
-        </h5>
-      </div>
-    {/if}
-  </div>
-</DropdownMenu>
-
-<style>
-  .container {
-    width: 610px;
-    height: 350px;
-    display: flex;
-    flex-direction: column;
-    padding: 10px 0px 10px 15px;
-    overflow-x: hidden;
-  }
-
-  .search-area {
-    flex: 0 0 80px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .icon-area {
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-gap: 5px;
-    justify-content: flex-start;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
-  }
-
-  .no-icons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .alphabet-area {
-    display: flex;
-    flex-flow: row wrap;
-    padding-bottom: 10px;
-    padding-right: 15px;
-    justify-content: space-around;
-  }
-
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .search-input {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    padding-right: 15px;
-  }
-
-  .input-wrapper {
-    width: 510px;
-    margin-right: 5px;
-  }
-
-  .page-area {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .letter {
-    color: var(--blue);
-  }
-
-  .letter:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  .letter-selected {
-    text-decoration: underline;
-  }
-
-  .icon-container {
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    border: var(--border-dark);
-  }
-
-  .icon-container:hover {
-    cursor: pointer;
-    background: var(--grey-2);
-  }
-
-  .selected {
-    background: var(--grey-3);
-  }
-
-  .icon-preview {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .icon-label {
-    flex: 0 0 20px;
-    text-align: center;
-    font-size: 12px;
-  }
-
-  .page-btn {
-    color: var(--blue);
-  }
-
-  .page-btn:hover {
-    cursor: pointer;
-  }
-</style>
+<script>
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { createEventDispatcher, tick } from "svelte"
+
+  import icons from "./icons.js"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let maxIconsPerPage = 30
+
+  let searchTerm = ""
+  let selectedLetter = "A"
+
+  let currentPage = 1
+  let filteredIcons = findIconByTerm(selectedLetter)
+
+  $: dispatch("change", value)
+
+  const alphabet = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ]
+  let buttonAnchor, dropdown
+  let loading = false
+
+  function findIconByTerm(term) {
+    const r = new RegExp(`\^${term}`, "i")
+    return icons.filter(i => r.test(i.label))
+  }
+
+  async function switchLetter(letter) {
+    currentPage = 1
+    searchTerm = ""
+    loading = true
+    selectedLetter = letter
+    filteredIcons = findIconByTerm(letter)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function findIconOnPage() {
+    loading = true
+    const iconIdx = filteredIcons.findIndex(i => i.value === value)
+    if (iconIdx !== -1) {
+      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function setSelectedUI() {
+    if (value) {
+      const letter = displayValue.substring(0, 1)
+      await switchLetter(letter)
+      await findIconOnPage()
+    }
+  }
+
+  async function pageClick(next) {
+    loading = true
+    if (next && currentPage < totalPages) {
+      currentPage++
+    } else if (!next && currentPage > 1) {
+      currentPage--
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function searchForIcon(e) {
+    currentPage = 1
+    loading = true
+    filteredIcons = findIconByTerm(searchTerm)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  $: displayValue = value ? value.substring(7) : "Pick Icon"
+
+  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
+  $: pageEndIdx = maxIconsPerPage * currentPage
+  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
+
+  $: pagerText = `Page ${currentPage} of ${totalPages}`
+</script>
+
+<div bind:this={buttonAnchor}>
+  <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}>
+  <div class="container">
+    <div class="search-area">
+      <div class="alphabet-area">
+        {#each alphabet as letter, idx}
+          <span
+            class="letter"
+            class:letter-selected={letter === selectedLetter}
+            on:click={() => switchLetter(letter)}>
+            {letter}
+          </span>
+          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
+        {/each}
+      </div>
+      <div class="search-input">
+        <div class="input-wrapper">
+          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
+        </div>
+        <Button secondary on:click={searchForIcon}>Search</Button>
+      </div>
+      <div class="page-area">
+        <div class="pager">
+          <span on:click={() => pageClick(false)}>
+            <i class="page-btn fas fa-chevron-left" />
+          </span>
+          <span>{pagerText}</span>
+          <span on:click={() => pageClick(true)}>
+            <i class="page-btn fas fa-chevron-right" />
+          </span>
+        </div>
+      </div>
+    </div>
+    {#if pagedIcons.length > 0}
+      <div class="icon-area">
+        {#if !loading}
+          {#each pagedIcons as icon}
+            <div
+              class="icon-container"
+              class:selected={value === icon.value}
+              on:click={() => (value = icon.value)}>
+              <div class="icon-preview">
+                <i class={`${icon.value} fa-3x`} />
+              </div>
+              <div class="icon-label">{icon.label}</div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <div class="no-icons">
+        <h5>
+          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+        </h5>
+      </div>
+    {/if}
+  </div>
+</DropdownMenu>
+
+<style>
+  .container {
+    width: 610px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0px 10px 15px;
+    overflow-x: hidden;
+  }
+
+  .search-area {
+    flex: 0 0 80px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .icon-area {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 5px;
+    justify-content: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px;
+  }
+
+  .no-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .alphabet-area {
+    display: flex;
+    flex-flow: row wrap;
+    padding-bottom: 10px;
+    padding-right: 15px;
+    justify-content: space-around;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-input {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    padding-right: 15px;
+  }
+
+  .input-wrapper {
+    width: 510px;
+    margin-right: 5px;
+  }
+
+  .page-area {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .letter {
+    color: var(--blue);
+  }
+
+  .letter:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .letter-selected {
+    text-decoration: underline;
+  }
+
+  .icon-container {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: var(--border-dark);
+  }
+
+  .icon-container:hover {
+    cursor: pointer;
+    background: var(--grey-2);
+  }
+
+  .selected {
+    background: var(--grey-3);
+  }
+
+  .icon-preview {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-label {
+    flex: 0 0 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .page-btn {
+    color: var(--blue);
+  }
+
+  .page-btn:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
deleted file mode 100644
index 7d118afe61..0000000000
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-  export let item
-</script>
-
-<div data-cy={item.name} class="item-item" on:click>
-  <div class="item-icon"><i class={item.icon} /></div>
-  <div class="item-text">
-    <div class="item-name">{item.name}</div>
-  </div>
-</div>
-
-<style>
-  .item-item {
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    padding: 12px 16px 16px 16px;
-    height: 80px;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--grey-1);
-    border-radius: 5px;
-  }
-
-  .item-item:hover {
-    background: var(--grey-2);
-    transition: all 0.3s;
-  }
-
-  .item-icon {
-    border-radius: 3px;
-    display: flex;
-  }
-
-  .item-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .item-name {
-    font-size: 14px;
-    font-weight: 400;
-    text-align: center;
-  }
-
-  i {
-    font-size: 24px;
-    color: var(--grey-7);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
deleted file mode 100644
index 090fad1dc1..0000000000
--- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
-  import Item from "./Item.svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let list
-
-  let category = list
-
-  const handleClick = item => {
-    if (item.children && item.children.length > 0) {
-      list = item
-    } else {
-      dispatch("selectItem", item)
-    }
-  }
-
-  const goBack = () => {
-    list = category
-  }
-</script>
-
-{#if !list.isCategory}
-  <button class="back-button" on:click={goBack}>Back</button>
-{/if}
-{#each list.children as item}
-  {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
-    <Item {item} on:click={() => handleClick(item)} />
-  {/if}
-{/each}
-
-<style>
-  .back-button {
-    grid-column: 1 / span 2;
-    font-size: 14px;
-    text-align: center;
-    height: 36px;
-    border-radius: 5px;
-    border: solid 1px var(--grey-3);
-    background: white;
-    cursor: pointer;
-    font-weight: 500;
-    font-family: Inter;
-    transition: all 0.3ms;
-  }
-
-  .back-button:hover {
-    background: var(--grey-1);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index aac5c44c07..d9f5964b30 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -13,6 +13,7 @@
   let select
   let selectMenu
   let icon
+  let width = 0
 
   let selectAnchor = null
   let dimensions = { top: 0, bottom: 0, left: 0 }
@@ -91,6 +92,7 @@
     "transform-origin": `center ${positionSide}`,
     [positionSide]: `${dimensions[positionSide]}px`,
     left: `${dimensions.left.toFixed(0)}px`,
+    width: `${width}px`,
   })
 
   $: isOptionsObject = options.every(o => typeof o === "object")
@@ -108,6 +110,7 @@
 </script>
 
 <div
+  bind:clientWidth={width}
   tabindex="0"
   bind:this={select}
   class="bb-select-container"
@@ -164,19 +167,17 @@
 
   .bb-select-container {
     outline: none;
-    height: 36px;
     cursor: pointer;
-    font-size: 14px;
     overflow: hidden;
+    flex: 1 1 auto;
   }
 
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: 0px 12px;
-    height: 36px;
+    padding: var(--spacing-s) var(--spacing-m);
     background-color: var(--grey-2);
-    border-radius: 5px;
+    border-radius: var(--border-radius-m);
     align-items: center;
     white-space: nowrap;
   }
@@ -184,8 +185,11 @@
   .bb-select-anchor > span {
     color: var(--ink);
     font-weight: 400;
-    width: 140px;
     overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--font-size-xs);
+    flex: 1 1 auto;
   }
 
   .bb-select-anchor > i {
@@ -208,7 +212,6 @@
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;
-    width: 160px;
     z-index: 2;
     color: var(--ink);
     font-weight: 400;
@@ -237,7 +240,7 @@
     padding: 5px 0px;
     cursor: pointer;
     padding-left: 10px;
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
   }
 
   li:hover {
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index cebd445ce7..c6ac3b5290 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -1,21 +1,9 @@
 <script>
   import { goto } from "@sveltech/routify"
-  // import { tick } from "svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-
-  import {
-    last,
-    sortBy,
-    map,
-    trimCharsStart,
-    trimChars,
-    join,
-    compose,
-  } from "lodash/fp"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { pipe } from "components/common/core"
+  import NavItem from "components/common/NavItem.svelte"
+  import { last } from "lodash/fp"
   import { store } from "builderStore"
-  import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
   import { writable } from "svelte/store"
 
   export let layout
@@ -24,13 +12,10 @@
   let componentToDelete = ""
 
   const dragDropStore = writable({})
-  const joinPath = join("/")
 
   const lastPartOfName = c =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
 
-  const isComponentSelected = (current, comp) => current === comp
-
   $: _layout = {
     component: layout,
     title: lastPartOfName(layout),
@@ -42,18 +27,14 @@
   }
 </script>
 
-<div
-  class="budibase__nav-item root"
-  class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-  on:click|stopPropagation={setCurrentScreenToLayout}>
-  <span
-    class="icon"
-    class:rotate={$store.currentPreviewItem.name !== _layout.title}>
-    <ArrowDownIcon />
-  </span>
-  <i class="ri-layout-3-fill icon-big" />
-  <span class="title">Master Screen</span>
-</div>
+<NavItem
+  border={false}
+  icon="ri-layout-3-line"
+  text="Master Screen"
+  withArrow
+  selected={$store.currentComponentInfo._id === _layout.component.props._id}
+  opened={$store.currentPreviewItem.name === _layout.title}
+  on:click={setCurrentScreenToLayout} />
 
 {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
   <ComponentsHierarchyChildren
@@ -62,29 +43,3 @@
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />
 {/if}
-
-<style>
-  .title {
-    margin-left: 10px;
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--ink);
-  }
-
-  .icon {
-    width: 24px;
-    display: inline-block;
-    transition: 0.2s;
-    width: 20px;
-    color: var(--grey-7);
-  }
-
-  .icon-big {
-    font-size: 20px;
-    color: var(--grey-7);
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(-90deg);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index df8bdf7d99..51fcce3889 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -43,24 +43,23 @@
 
   button {
     cursor: pointer;
-    padding: 0px 16px;
-    height: 36px;
+    padding: 0 var(--spacing-m);
+    height: 32px;
     text-align: center;
     background: #ffffff;
     color: var(--grey-7);
     border-radius: 5px;
-    font-family: inter;
-    font-size: 14px;
-    font-weight: 400;
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
     border: none !important;
-    transition: 0.2s;
     outline: none;
+    font-family: var(--font-sans);
   }
 
   .active {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 8d21e6fc82..823dcf6183 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -119,16 +119,14 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    margin: 8px 0;
     align-items: center;
   }
-
   .label {
     display: flex;
     align-items: center;
     font-size: 12px;
     font-weight: 400;
-    flex: 0 0 100px;
+    flex: 0 0 80px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;
@@ -149,7 +147,7 @@
     height: 90%;
     width: 2rem;
     background: var(--grey-2);
-    right: 10px;
+    right: 4px;
     --spacing-s: 0;
     border-left: 0.5px solid var(--grey-3);
     outline-color: var(--blue);
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 0da68c51d0..2fb304f5c8 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -13,14 +13,26 @@
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name} on:open show={open}>
-  {#each properties as props}
-    <PropertyControl
-      label={props.label}
-      control={props.control}
-      key={props.key}
-      value={style[props.key]}
-      onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-      props={{ ...excludeProps(props, ['control', 'label']) }} />
-  {/each}
+<DetailSummary {name} on:open show={open} thin>
+  <div>
+    {#each properties as props}
+      <PropertyControl
+        label={props.label}
+        control={props.control}
+        key={props.key}
+        value={style[props.key]}
+        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
+    {/each}
+  </div>
 </DetailSummary>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
index 1721c1bbb2..3abdb3ecd3 100644
--- a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
+++ b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
@@ -8,4 +8,4 @@
   export let name, value, placeholder, type
 </script>
 
-<Input {name} {value} {placeholder} {type} thin on:change />
+<Input {name} {value} {placeholder} {type} extraThin on:change />
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 7ae8bbf432..75e2483f31 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -2,9 +2,8 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import api from "builderStore/api"
-  import Portal from "svelte-portal"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let screen
 
@@ -12,10 +11,6 @@
   let dropdown
   let anchor
 
-  const hideDropdown = () => {
-    dropdown.hide()
-  }
-
   const deleteScreen = () => {
     store.deleteScreens(screen, $store.currentPageName)
     // update the page if required
@@ -29,79 +24,27 @@
   }
 </script>
 
-<div
-  bind:this={anchor}
-  class="root boundary"
-  on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>
   <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <ul on:click={hideDropdown}>
-      <li on:click={() => confirmDeleteDialog.show()}>
-        <i class="ri-delete-bin-2-line" />
-        Delete
-      </li>
-    </ul>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+    </DropdownContainer>
   </DropdownMenu>
 </div>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
+  title="Confirm Deletion"
   body={`Are you sure you wish to delete the screen '${screen.props._instanceName}' ?`}
   okText="Delete Screen"
   onOk={deleteScreen} />
 
 <style>
-  .root {
-    overflow: hidden;
-    z-index: 9;
-  }
-
-  .root button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  ul {
-    z-index: 100000;
-    overflow: visible;
-    margin: var(--spacing-s) 0;
-    border-radius: var(--border-radius-s);
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
   .icon i {
     font-size: 16px;
   }
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 33174355bb..748570595a 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -1,88 +1,94 @@
-<script>
-  import { DataList } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-
-  $: urls = getUrls()
-
-  const handleBlur = () => dispatch("change", value)
-
-  // this will get urls of all screens, but only
-  // choose detail screens that are usable in the current context
-  // and substitute the :id param for the actual {{ ._id }} binding
-  const getUrls = () => {
-    const urls = [
-      ...$store.screens
-        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
-        .map(screen => ({
-          name: screen.props._instanceName,
-          url: screen.route,
-          sort: screen.props._component,
-        })),
-    ]
-
-    const bindableProperties = fetchBindableProperties({
-      componentInstanceId: $store.currentComponentInfo._id,
-      components: $store.components,
-      screen: $store.currentPreviewItem,
-      tables: $backendUiStore.tables,
-    })
-
-    const detailScreens = $store.screens.filter(screen =>
-      screen.props._component.endsWith("/rowdetail")
-    )
-
-    for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find(p => {
-        if (
-          p.type === "context" &&
-          p.runtimeBinding.endsWith("._id") &&
-          p.table
-        ) {
-          const tableId =
-            typeof p.table === "string" ? p.table : p.table.tableId
-          return tableId === detailScreen.props.table
-        }
-        return false
-      })
-
-      if (idBinding) {
-        urls.push({
-          name: detailScreen.props._instanceName,
-          url: detailScreen.route.replace(
-            ":id",
-            `{{ ${idBinding.runtimeBinding} }}`
-          ),
-          sort: detailScreen.props._component,
-        })
-      }
-    }
-
-    return urls
-  }
-</script>
-
-<div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
-    <option value="" />
-    {#each urls as url}
-      <option value={url.url}>{url.name}</option>
-    {/each}
-  </DataList>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-  }
-  div :global(> div) {
-    flex: 1 1 auto;
-  }
-</style>
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  // this will get urls of all screens, but only
+  // choose detail screens that are usable in the current context
+  // and substitute the :id param for the actual {{ ._id }} binding
+  const getUrls = () => {
+    const urls = [
+      ...$store.screens
+        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+
+    const bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      tables: $backendUiStore.tables,
+    })
+
+    const detailScreens = $store.screens.filter(screen =>
+      screen.props._component.endsWith("/rowdetail")
+    )
+
+    for (let detailScreen of detailScreens) {
+      const idBinding = bindableProperties.find(p => {
+        if (
+          p.type === "context" &&
+          p.runtimeBinding.endsWith("._id") &&
+          p.table
+        ) {
+          const tableId =
+            typeof p.table === "string" ? p.table : p.table.tableId
+          return tableId === detailScreen.props.table
+        }
+        return false
+      })
+
+      if (idBinding) {
+        urls.push({
+          name: detailScreen.props._instanceName,
+          url: detailScreen.route.replace(
+            ":id",
+            `{{ ${idBinding.runtimeBinding} }}`
+          ),
+          sort: detailScreen.props._component,
+        })
+      }
+    }
+
+    return urls
+  }
+</script>
+
+<div>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index d821f1f2e2..2aacbd261b 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -85,53 +85,65 @@
   }
 </script>
 
-{#if screenOrPageInstance}
-  {#each screenOrPageDefinition as def}
-    <PropertyControl
-      bindable={false}
-      control={def.control}
-      label={def.label}
-      key={def.key}
-      value={screenOrPageInstance[def.key]}
-      onChange={onScreenPropChange}
-      props={{ ...excludeProps(def, ['control', 'label']) }} />
-  {/each}
-{/if}
-
-{#if displayNameField}
-  <PropertyControl
-    control={Input}
-    label="Name"
-    key="_instanceName"
-    value={componentInstance._instanceName}
-    onChange={onInstanceNameChange} />
-  {#if duplicateName}
-    <span class="duplicate-name">Name must be unique</span>
-  {/if}
-{/if}
-
-{#if panelDefinition && panelDefinition.length > 0}
-  {#each panelDefinition as definition}
-    {#if canRenderControl(definition.key, definition.dependsOn)}
+<div class="settings-view-container">
+  {#if screenOrPageInstance}
+    {#each screenOrPageDefinition as def}
       <PropertyControl
-        control={definition.control}
-        label={definition.label}
-        key={definition.key}
-        value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
-        {componentInstance}
-        {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={onScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+    {/each}
+  {/if}
+
+  {#if displayNameField}
+    <PropertyControl
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={onInstanceNameChange} />
+    {#if duplicateName}
+      <span class="duplicate-name">Name must be unique</span>
     {/if}
-  {/each}
-{:else}
-  <div>This component does not have any settings.</div>
-{/if}
+  {/if}
+
+  {#if panelDefinition && panelDefinition.length > 0}
+    {#each panelDefinition as definition}
+      {#if canRenderControl(definition.key, definition.dependsOn)}
+        <PropertyControl
+          control={definition.control}
+          label={definition.label}
+          key={definition.key}
+          value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
+          {componentInstance}
+          {onChange}
+          props={{ ...excludeProps(definition, ['control', 'label']) }} />
+      {/if}
+    {/each}
+  {:else}
+    <div class="empty">
+      This component doesn't have any additional settings.
+    </div>
+  {/if}
+</div>
 
 <style>
-  div {
-    font-size: var(--font-size-s);
+  .settings-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--spacing-s);
+  }
+
+  .empty {
+    font-size: var(--font-size-xs);
     margin-top: var(--spacing-m);
-    color: var(--grey-6);
+    color: var(--grey-5);
   }
 
   .duplicate-name {
diff --git a/packages/builder/src/components/userInterface/TableSelect.svelte b/packages/builder/src/components/userInterface/TableSelect.svelte
index 6300aa2d61..d72b6031f1 100644
--- a/packages/builder/src/components/userInterface/TableSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableSelect.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Select thin secondary wide on:change {value}>
+  <Select extraThin secondary wide on:change {value}>
     <option value="">Choose a table</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index f38fcc0a72..4fdb477cbf 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -1,163 +1,163 @@
-<script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-  let anchorRight, dropdownRight
-
-  export let value = {}
-
-  function handleSelected(selected) {
-    dispatch("change", selected)
-    dropdownRight.hide()
-  }
-
-  $: tables = $backendUiStore.tables.map(m => ({
-    label: m.name,
-    name: `all_${m._id}`,
-    tableId: m._id,
-    type: "table",
-  }))
-
-  $: views = $backendUiStore.tables.reduce((acc, cur) => {
-    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
-      label: key,
-      name: key,
-      ...value,
-      type: "view",
-    }))
-    return [...acc, ...viewsArr]
-  }, [])
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.currentComponentInfo._id,
-    components: $store.components,
-    screen: $store.currentPreviewItem,
-    tables: $backendUiStore.tables,
-  })
-
-  $: links = bindableProperties
-    .filter(x => x.fieldSchema.type === "link")
-    .map(property => ({
-      label: property.readableBinding,
-      fieldName: property.fieldSchema.name,
-      name: `all_${property.fieldSchema.tableId}`,
-      tableId: property.fieldSchema.tableId,
-      type: "link",
-    }))
-</script>
-
-<div
-  class="dropdownbutton"
-  bind:this={anchorRight}
-  on:click={dropdownRight.show}>
-  <span>{value.label ? value.label : 'Table / View'}</span>
-  <Icon name="arrowdown" />
-</div>
-<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-  <div class="dropdown">
-    <div class="title">
-      <Heading extraSmall>Tables</Heading>
-    </div>
-    <ul>
-      {#each tables as table}
-        <li
-          class:selected={value === table}
-          on:click={() => handleSelected(table)}>
-          {table.label}
-        </li>
-      {/each}
-    </ul>
-    <hr />
-    <div class="title">
-      <Heading extraSmall>Views</Heading>
-    </div>
-    <ul>
-      {#each views as view}
-        <li
-          class:selected={value === view}
-          on:click={() => handleSelected(view)}>
-          {view.label}
-        </li>
-      {/each}
-    </ul>
-    <hr />
-    <div class="title">
-      <Heading extraSmall>Relationships</Heading>
-    </div>
-    <ul>
-      {#each links as link}
-        <li
-          class:selected={value === link}
-          on:click={() => handleSelected(link)}>
-          {link.label}
-        </li>
-      {/each}
-    </ul>
-  </div>
-</DropdownMenu>
-
-<style>
-  .dropdownbutton {
-    background-color: var(--grey-2);
-    border: var(--border-transparent);
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-m);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-    flex: 1 1 auto;
-  }
-  .dropdownbutton:hover {
-    cursor: pointer;
-    background-color: var(--grey-3);
-  }
-  .dropdownbutton span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    text-align: left;
-    font-size: var(--font-size-xs);
-  }
-  .dropdownbutton :global(svg) {
-    margin: -4px 0;
-  }
-
-  .dropdown {
-    padding: var(--spacing-m) 0;
-    z-index: 99999999;
-  }
-  .title {
-    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-  }
-
-  hr {
-    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0px;
-    margin: 0px;
-  }
-
-  li {
-    cursor: pointer;
-    margin: 0px;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-
-  .selected {
-    background-color: var(--grey-4);
-  }
-
-  li:hover {
-    background-color: var(--grey-4);
-  }
-</style>
+<script>
+  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
+
+  const dispatch = createEventDispatcher()
+  let anchorRight, dropdownRight
+
+  export let value = {}
+
+  function handleSelected(selected) {
+    dispatch("change", selected)
+    dropdownRight.hide()
+  }
+
+  $: tables = $backendUiStore.tables.map(m => ({
+    label: m.name,
+    name: `all_${m._id}`,
+    tableId: m._id,
+    type: "table",
+  }))
+
+  $: views = $backendUiStore.tables.reduce((acc, cur) => {
+    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
+      label: key,
+      name: key,
+      ...value,
+      type: "view",
+    }))
+    return [...acc, ...viewsArr]
+  }, [])
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    tables: $backendUiStore.tables,
+  })
+
+  $: links = bindableProperties
+    .filter(x => x.fieldSchema?.type === "link")
+    .map(property => ({
+      label: property.readableBinding,
+      fieldName: property.fieldSchema.name,
+      name: `all_${property.fieldSchema.tableId}`,
+      tableId: property.fieldSchema.tableId,
+      type: "link",
+    }))
+</script>
+
+<div
+  class="dropdownbutton"
+  bind:this={anchorRight}
+  on:click={dropdownRight.show}>
+  <span>{value.label ? value.label : 'Table / View'}</span>
+  <Icon name="arrowdown" />
+</div>
+<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+  <div class="dropdown">
+    <div class="title">
+      <Heading extraSmall>Tables</Heading>
+    </div>
+    <ul>
+      {#each tables as table}
+        <li
+          class:selected={value === table}
+          on:click={() => handleSelected(table)}>
+          {table.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Views</Heading>
+    </div>
+    <ul>
+      {#each views as view}
+        <li
+          class:selected={value === view}
+          on:click={() => handleSelected(view)}>
+          {view.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Relationships</Heading>
+    </div>
+    <ul>
+      {#each links as link}
+        <li
+          class:selected={value === link}
+          on:click={() => handleSelected(link)}>
+          {link.label}
+        </li>
+      {/each}
+    </ul>
+  </div>
+</DropdownMenu>
+
+<style>
+  .dropdownbutton {
+    background-color: var(--grey-2);
+    border: var(--border-transparent);
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: var(--border-radius-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+  .dropdownbutton:hover {
+    cursor: pointer;
+    background-color: var(--grey-3);
+  }
+  .dropdownbutton span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-align: left;
+    font-size: var(--font-size-xs);
+  }
+  .dropdownbutton :global(svg) {
+    margin: -4px 0;
+  }
+
+  .dropdown {
+    padding: var(--spacing-m) 0;
+    z-index: 99999999;
+  }
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
+  }
+
+  hr {
+    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+  }
+
+  li {
+    cursor: pointer;
+    margin: 0px;
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
+  }
+
+  .selected {
+    background-color: var(--grey-4);
+  }
+
+  li:hover {
+    background-color: var(--grey-4);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
deleted file mode 100644
index 0bf8095e41..0000000000
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ /dev/null
@@ -1,193 +0,0 @@
-<script>
-  import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import PageLayout from "./PageLayout.svelte"
-  import PagesList from "./PagesList.svelte"
-  import { store } from "builderStore"
-  import NewScreenModal from "./NewScreenModal.svelte"
-  import CurrentItemPreview from "./AppPreview/CurrentItemPreview.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
-  import { Modal } from "@budibase/bbui"
-
-  let newScreenPicker
-  let confirmDeleteDialog
-  let componentToDelete = ""
-  let settingsView
-  let modal
-
-  const settings = () => {
-    settingsView.show()
-  }
-
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
-</script>
-
-<div class="root">
-  <div class="ui-nav">
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <span class="components-nav-page">Pages</span>
-      </div>
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={modal.show}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
-  </div>
-  <div class="preview-pane">
-    <CurrentItemPreview />
-  </div>
-  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
-    <div class="components-pane">
-      <ComponentsPaneSwitcher />
-    </div>
-  {/if}
-</div>
-
-<Modal bind:this={modal}>
-  <NewScreenModal />
-</Modal>
-
-<SettingsView bind:this={settingsView} />
-
-<style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .root {
-    display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    height: 100%;
-    width: 100%;
-    background: var(--grey-1);
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .preview-pane {
-    grid-column: 2;
-    margin: 40px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-  }
-
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--blue);
-  }
-
-  .navigator-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 600;
-    text-transform: uppercase;
-    padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-  }
-
-  .components-list-container {
-    padding: 10px 0px 0 0;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index 7ac0dd20ba..9979d4dcc6 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -1,5 +1,5 @@
 import { isUndefined, filter, some, includes } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
 const normalString = s => (s || "").trim().toLowerCase()
 
diff --git a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
index dffec1c652..1776ddf230 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
@@ -1,5 +1,5 @@
 import { split, last } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
 export const splitName = fullname => {
   const componentName = pipe(fullname, [split("/"), last])
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index db1079b8ee..1c4bc632a6 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -20,118 +20,154 @@ import { all } from "./propertyCategories.js"
 export default {
   categories: [
     {
-      name: "Basic",
+      _component: "@budibase/standard-components/container",
+      name: "Container",
+      description: "This component contains things within itself",
+      icon: "ri-layout-column-line",
+      commonProps: {},
+      children: [],
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            key: "type",
+            label: "Type",
+            control: OptionSelect,
+            options: [
+              "article",
+              "aside",
+              "details",
+              "div",
+              "figure",
+              "figcaption",
+              "footer",
+              "header",
+              "main",
+              "mark",
+              "nav",
+              "paragraph",
+              "summary",
+            ],
+          },
+        ],
+      },
+    },
+    {
+      name: "Grid",
+      _component: "@budibase/standard-components/datagrid",
+      description:
+        "a datagrid component with functionality to add, remove and edit rows.",
+      icon: "ri-grid-line",
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            label: "Source",
+            key: "datasource",
+            control: TableViewSelect,
+          },
+          {
+            label: "Detail URL",
+            key: "detailUrl",
+            control: DetailScreenSelect,
+          },
+          {
+            label: "Editable",
+            key: "editable",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+          {
+            label: "Theme",
+            key: "theme",
+            control: OptionSelect,
+            options: [
+              "alpine",
+              "alpine-dark",
+              "balham",
+              "balham-dark",
+              "material",
+            ],
+            placeholder: "alpine",
+          },
+          {
+            label: "Height",
+            key: "height",
+            defaultValue: "500",
+            control: Input,
+          },
+          {
+            label: "Pagination",
+            key: "pagination",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+        ],
+      },
+      children: [],
+    },
+    {
+      name: "Repeater",
+      _component: "@budibase/standard-components/list",
+      description: "Renders all children once per row, of a given table",
+      icon: "ri-list-check-2",
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            label: "Data",
+            key: "datasource",
+            control: TableViewSelect,
+          },
+        ],
+      },
+      children: [],
+    },
+    {
+      _component: "@budibase/standard-components/button",
+      name: "Button",
+      description: "A basic html button that is ready for styling",
+      icon: "ri-share-box-line",
+      children: [],
+      properties: {
+        design: {
+          ...all,
+        },
+        settings: [
+          { label: "Text", key: "text", control: Input },
+          {
+            label: "Disabled",
+            key: "disabled",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+          { label: "On Click", key: "onClick", control: Event },
+        ],
+      },
+    },
+    {
+      name: "Form",
+      icon: "ri-file-edit-line",
       isCategory: true,
       children: [
         {
-          _component: "@budibase/standard-components/container",
-          name: "Container",
-          description: "This component contains things within itself",
-          icon: "ri-layout-row-line",
-          commonProps: {},
-          children: [],
+          _component: "@budibase/standard-components/dataform",
+          name: "Form Basic",
+          icon: "ri-file-edit-line",
           properties: {
             design: { ...all },
-            settings: [
-              {
-                key: "type",
-                label: "Type",
-                control: OptionSelect,
-                options: [
-                  "article",
-                  "aside",
-                  "details",
-                  "div",
-                  "figure",
-                  "figcaption",
-                  "footer",
-                  "header",
-                  "main",
-                  "mark",
-                  "nav",
-                  "paragraph",
-                  "summary",
-                ],
-              },
-            ],
+            settings: [],
           },
         },
         {
-          _component: "@budibase/standard-components/embed",
-          icon: "ri-code-line",
-          name: "Embed",
-          description: "Embed content from 3rd party sources",
+          _component: "@budibase/standard-components/dataformwide",
+          name: "Form Wide",
+          icon: "ri-file-edit-line",
           properties: {
-            design: {
-              ...all,
-            },
-            settings: [{ label: "Embed", key: "embed", control: Input }],
+            design: { ...all },
+            settings: [],
           },
         },
-        {
-          name: "Text",
-          description: "This is a simple text component",
-          icon: "ri-t-box-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/heading",
-              name: "Headline",
-              description: "A component for displaying heading text",
-              icon: "ri-heading",
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    key: "text",
-                    label: "Text",
-                    control: Input,
-                  },
-                  {
-                    key: "type",
-                    label: "Type",
-                    control: OptionSelect,
-                    options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-                  },
-                ],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/text",
-              name: "Paragraph",
-              description: "A component for displaying paragraph text.",
-              icon: "ri-paragraph",
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Text",
-                    key: "text",
-                    control: Input,
-                  },
-                  {
-                    label: "Type",
-                    key: "type",
-                    control: OptionSelect,
-                    options: [
-                      "none",
-                      "bold",
-                      "strong",
-                      "italic",
-                      "emphasis",
-                      "mark",
-                      "small",
-                      "del",
-                      "ins",
-                      "sub",
-                      "sup",
-                    ],
-                  },
-                ],
-              },
-            },
-          ],
-        },
         {
           _component: "@budibase/standard-components/input",
           name: "Textfield",
@@ -152,24 +188,777 @@ export default {
           },
         },
         {
-          _component: "@budibase/standard-components/button",
-          name: "Button",
-          description: "A basic html button that is ready for styling",
-          icon: "ri-share-box-line",
+          _component: "@budibase/standard-components/datepicker",
+          name: "Date Picker",
+          description: "A basic date picker component",
+          icon: "ri-calendar-line",
           children: [],
           properties: {
-            design: {
-              ...all,
-            },
+            design: { ...all },
+            settings: [
+              { label: "Placeholder", key: "placeholder", control: Input },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Card",
+      icon: "ri-archive-drawer-line",
+      isCategory: true,
+      children: [
+        {
+          _component: "@budibase/standard-components/stackedlist",
+          name: "Stacked List",
+          icon: "ri-archive-drawer-line",
+          description:
+            "A basic card component that can contain content and actions.",
+          children: [],
+          properties: {
+            design: { ...all },
             settings: [
-              { label: "Text", key: "text", control: Input },
               {
-                label: "Disabled",
-                key: "disabled",
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "{{{context.Image}}}",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "{{context.Heading}}",
+              },
+              {
+                label: "Text 1",
+                key: "text1",
+                control: Input,
+                placeholder: "{{context.Text 1}}",
+              },
+              {
+                label: "Text 2",
+                key: "text2",
+                control: Input,
+                placeholder: "{{context.Text 2}}",
+              },
+              {
+                label: "Text 3",
+                key: "text3",
+                control: Input,
+                placeholder: "{{context.Text 3}}",
+              },
+              {
+                label: "Link URL",
+                key: "destinationUrl",
+                control: ScreenSelect,
+                placeholder: "/table/_id",
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/card",
+          name: "Vertical",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-column-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "Image",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "Heading",
+              },
+              {
+                label: "Description",
+                key: "description",
+                control: Input,
+                placeholder: "Description",
+              },
+              {
+                label: "Link Text",
+                key: "linkText",
+                control: Input,
+                placeholder: "Link Text",
+              },
+              {
+                label: "Link Url",
+                key: "linkUrl",
+                control: ScreenSelect,
+                placeholder: "Link URL",
+              },
+              {
+                label: "Link Color",
+                key: "color",
+                control: Input,
+                placeholder: "Link Color",
+              },
+              {
+                label: "Hover Color",
+                key: "linkHoverColor",
+                control: Input,
+                placeholder: "Hover Color",
+              },
+              {
+                label: "Image Height",
+                key: "imageHeight",
+                control: OptionSelect,
+                options: ["12rem", "16rem", "20rem", "24rem"],
+                placeholder: "Image Height",
+              },
+              {
+                label: "Card Width",
+                key: "cardWidth",
+                control: OptionSelect,
+                options: ["16rem", "20rem", "24rem"],
+                placeholder: "Card Width",
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/cardhorizontal",
+          name: "Horizontal",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-row-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "Image",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "Heading",
+              },
+              {
+                label: "Description",
+                key: "description",
+                control: Input,
+                placeholder: "Description",
+              },
+              {
+                label: "Subtext",
+                key: "subtext",
+                control: Input,
+                placeholder: "Subtext",
+              },
+              {
+                label: "Link Text",
+                key: "linkText",
+                control: Input,
+                placeholder: "Link Text",
+              },
+              {
+                label: "Link Url",
+                key: "linkUrl",
+                control: ScreenSelect,
+                placeholder: "Link URL",
+              },
+              {
+                label: "Link Color",
+                key: "color",
+                control: Input,
+                placeholder: "Link Color",
+              },
+              {
+                label: "Hover Color",
+                key: "linkHoverColor",
+                control: Input,
+                placeholder: "Hover Color",
+              },
+              {
+                label: "Card Width",
+                key: "cardWidth",
+                control: OptionSelect,
+                options: [
+                  "24rem",
+                  "28rem",
+                  "32rem",
+                  "40rem",
+                  "48rem",
+                  "60rem",
+                  "100%",
+                ],
+                placeholder: "Card Height",
+              },
+              {
+                label: "Image Width",
+                key: "imageWidth",
+                control: OptionSelect,
+                options: ["8rem", "12rem", "16rem"],
+                placeholder: "Image Width",
+              },
+              {
+                label: "Image Height",
+                key: "imageHeight",
+                control: OptionSelect,
+                options: ["8rem", "12rem", "16rem", "auto"],
+                placeholder: "Image Height",
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Chart",
+      icon: "ri-bar-chart-2-line",
+      isCategory: true,
+      children: [
+        {
+          name: "Donut",
+          _component: "@budibase/standard-components/donut",
+          description: "Donut chart",
+          icon: "ri-pie-chart-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Field",
+                key: "nameKey",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Field",
+                key: "valueKey",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Animate Chart",
+                key: "isAnimated",
                 valueKey: "checked",
                 control: Checkbox,
               },
-              { label: "onClick", key: "onClick", control: Event },
+              {
+                label: "Hover Highlight",
+                key: "hasHoverAnimation",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Keep Last Hover",
+                key: "hasLastHoverSliceHighlighted",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "External Radius",
+                key: "externalRadius",
+                control: Input,
+              },
+              {
+                label: "Internal Radius",
+                key: "internalRadius",
+                control: Input,
+              },
+              {
+                label: "Radius Offset",
+                key: "radiusHoverOffset ",
+                control: Input,
+              },
+              {
+                label: "Show Legend",
+                key: "useLegend ",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Horizontal Legend",
+                key: "horizontalLegend",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Legend Width",
+                key: "legendWidth",
+                control: Input,
+              },
+            ],
+          },
+        },
+        {
+          name: "Bar",
+          _component: "@budibase/standard-components/bar",
+          description: "Bar chart",
+          icon: "ri-bar-chart-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Label",
+                key: "nameLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label Offset",
+                key: "xAxisLabelOffset",
+                control: Input,
+              },
+              {
+                label: "Y Axis Label Offset",
+                key: "yAxisLabelOffset",
+                control: Input,
+              },
+              {
+                label: "Enable Labels",
+                key: "enableLabels",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  { label: "Normal", value: "britecharts" },
+                  { label: "Blue Green", value: "blueGreen" },
+                  { label: "Green", value: "green" },
+                  { label: "Grey", value: "grey" },
+                  { label: "Orange", value: "orange" },
+                  { label: "Pink", value: "pink" },
+                  { label: "Purple", value: "purple" },
+                  { label: "Red", value: "red" },
+                  { label: "Teal", value: "teal" },
+                  { label: "Yellow", value: "yellow" },
+                ],
+              },
+              {
+                label: "Gradients",
+                key: "gradient",
+                control: OptionSelect,
+                options: [
+                  { value: "", label: "None" },
+                  { value: "bluePurple", label: "Blue Purple" },
+                  { value: "greenBlue", label: "Green Blue" },
+                  { value: "orangePink", label: "Orange Pink" },
+                ],
+              },
+              {
+                label: "Highlight Single Bar",
+                key: "hasSingleBarHighlight",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Animate",
+                key: "isAnimate",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Horizontal",
+                key: "isHorizontal",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Label Number Format",
+                key: "labelsNumberFormat",
+                control: Input,
+              },
+            ],
+          },
+        },
+        {
+          name: "Grouped Bar",
+          _component: "@budibase/standard-components/groupedbar",
+          description: "Groupedbar chart",
+          icon: "ri-bar-chart-grouped-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Label",
+                key: "nameLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Group Label",
+                key: "groupLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Color",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Aspect Ratio",
+                key: "aspectRatio",
+                control: Input,
+              },
+              {
+                label: "Grid",
+                key: "grid",
+                control: OptionSelect,
+                options: ["vertical", "horizontal", "full"],
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                control: Input,
+              },
+              {
+                label: "Y Ticks",
+                key: "yTicks",
+                control: Input,
+              },
+              {
+                label: "Y Tick Text Offset",
+                key: "yTickTextOffset",
+                control: Input,
+              },
+              {
+                label: "Is Animated",
+                key: "isAnimated",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Is Horizontal",
+                key: "isHorizontal",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Tooltip Title",
+                key: "tooltipTitle",
+                control: Input,
+              },
+            ],
+          },
+        },
+        {
+          name: "Line",
+          _component: "@budibase/standard-components/line",
+          description: "Line chart",
+          icon: "ri-line-chart-line",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Topic Label",
+                key: "topicLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Date Label",
+                key: "dateLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "Gradients",
+                key: "lineGradient",
+                control: OptionSelect,
+                options: [
+                  { value: "", label: "None" },
+                  { value: "bluePurple", label: "Blue Purple" },
+                  { value: "greenBlue", label: "Green Blue" },
+                  { value: "orangePink", label: "Orange Pink" },
+                ],
+              },
+              {
+                label: "Line Curve",
+                key: "lineCurve",
+                control: OptionSelect,
+                options: [
+                  "linear",
+                  "basis",
+                  "natural",
+                  "monotoneX",
+                  "monotoneY",
+                  "step",
+                  "stepAfter",
+                  "stepBefore",
+                  "cardinal",
+                  "catmullRom",
+                ],
+              },
+              {
+                label: "X Axis Value Type",
+                key: "xAxisValueType",
+                control: OptionSelect,
+                options: ["date", "number"],
+              },
+              {
+                label: "Grid",
+                key: "grid",
+                control: OptionSelect,
+                options: ["vertical", "horizontal", "full"],
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              {
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "Show All Datapoints",
+                key: "shouldShowAllDataPoints",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Is Animated",
+                key: "isAnimated",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Locale",
+                key: "locale",
+                control: OptionSelect,
+                options: ["en-GB", "en-US"],
+              },
+              {
+                label: "X Axis Value Type",
+                key: "xAxisValueType",
+                control: OptionSelect,
+                options: ["date", "numeric"],
+              },
+              {
+                label: "X Axis Format",
+                key: "xAxisFormat",
+                control: OptionSelect,
+                options: [
+                  "day-month",
+                  "minute-hour",
+                  "hour-daymonth",
+                  "month-year",
+                  "custom",
+                ],
+              },
+              {
+                label: "X Axis Custom Format",
+                key: "xAxisCustomFormat",
+                control: Input,
+              },
+              {
+                label: "Tooltip Title",
+                key: "tooltipTitle",
+                control: Input,
+              },
+              {
+                label: "X Ticks",
+                key: "xTicks",
+                control: Input,
+              },
+              {
+                label: "Y Ticks",
+                key: "yTicks",
+                control: Input,
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Elements",
+      icon: "ri-paragraph",
+      isCategory: true,
+      children: [
+        {
+          _component: "@budibase/standard-components/heading",
+          name: "Headline",
+          icon: "ri-heading",
+          description: "A component for displaying heading text",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                key: "text",
+                label: "Text",
+                control: Input,
+              },
+              {
+                key: "type",
+                label: "Type",
+                control: OptionSelect,
+                options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/text",
+          name: "Paragraph",
+          description: "A component for displaying paragraph text.",
+          icon: "ri-paragraph",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Text",
+                key: "text",
+                control: Input,
+              },
+              {
+                label: "Type",
+                key: "type",
+                control: OptionSelect,
+                options: [
+                  "none",
+                  "bold",
+                  "strong",
+                  "italic",
+                  "emphasis",
+                  "mark",
+                  "small",
+                  "del",
+                  "ins",
+                  "sub",
+                  "sup",
+                ],
+              },
             ],
           },
         },
@@ -184,6 +973,26 @@ export default {
             settings: [{ label: "URL", key: "url", control: Input }],
           },
         },
+        {
+          _component: "@budibase/standard-components/link",
+          name: "Link",
+          description: "A basic link component for internal and external links",
+          icon: "ri-link",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Text", key: "text", control: Input },
+              { label: "Url", key: "url", control: ScreenSelect },
+              {
+                label: "New Tab",
+                key: "openInNewTab",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+            ],
+          },
+        },
         {
           _component: "@budibase/standard-components/icon",
           name: "Icon",
@@ -220,880 +1029,22 @@ export default {
           },
         },
         {
-          _component: "@budibase/standard-components/link",
-          name: "Link",
-          description: "A basic link component for internal and external links",
-          icon: "ri-link",
-          children: [],
+          _component: "@budibase/standard-components/embed",
+          icon: "ri-code-line",
+          name: "Embed",
+          description: "Embed content from 3rd party sources",
           properties: {
-            design: { ...all },
-            settings: [
-              { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: ScreenSelect },
-              {
-                label: "Open New Tab",
-                key: "openInNewTab",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/datepicker",
-          name: "Date Picker",
-          description: "A basic date picker component",
-          icon: "ri-calendar-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Placeholder", key: "placeholder", control: Input },
-            ],
+            design: {
+              ...all,
+            },
+            settings: [{ label: "Embed", key: "embed", control: Input }],
           },
         },
       ],
     },
     {
-      name: "Blocks",
-      isCategory: true,
-      children: [
-        {
-          name: "List",
-          _component: "@budibase/standard-components/list",
-          description: "Renders all children once per row, of a given table",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-            ],
-          },
-          children: [],
-        },
-        {
-          name: "Grid",
-          _component: "@budibase/standard-components/datagrid",
-          description:
-            "a datagrid component with functionality to add, remove and edit rows.",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Source",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Detail URL",
-                key: "detailUrl",
-                control: DetailScreenSelect,
-              },
-              {
-                label: "Editable",
-                key: "editable",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Theme",
-                key: "theme",
-                control: OptionSelect,
-                options: [
-                  "alpine",
-                  "alpine-dark",
-                  "balham",
-                  "balham-dark",
-                  "material",
-                ],
-                placeholder: "alpine",
-              },
-              {
-                label: "Height",
-                key: "height",
-                defaultValue: "500",
-                control: Input,
-              },
-              {
-                label: "Pagination",
-                key: "pagination",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-            ],
-          },
-          children: [],
-        },
-        {
-          _component: "@budibase/standard-components/stackedlist",
-          name: "Stacked List",
-          description:
-            "A basic card component that can contain content and actions.",
-          icon: "ri-archive-drawer-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Image",
-                key: "imageUrl",
-                control: Input,
-                placeholder: "{{{context.Image}}}",
-              },
-              {
-                label: "Heading",
-                key: "heading",
-                control: Input,
-                placeholder: "{{context.Heading}}",
-              },
-              {
-                label: "Text 1",
-                key: "text1",
-                control: Input,
-                placeholder: "{{context.Text 1}}",
-              },
-              {
-                label: "Text 2",
-                key: "text2",
-                control: Input,
-                placeholder: "{{context.Text 2}}",
-              },
-              {
-                label: "Text 3",
-                key: "text3",
-                control: Input,
-                placeholder: "{{context.Text 3}}",
-              },
-              {
-                label: "destinationUrl",
-                key: "destinationUrl",
-                control: ScreenSelect,
-                placeholder: "/table/_id",
-              },
-            ],
-          },
-        },
-        {
-          name: "Card",
-          description: "Card components",
-          icon: "ri-layout-bottom-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/card",
-              name: "Vertical",
-              description:
-                "A basic card component that can contain content and actions.",
-              icon: "ri-layout-column-line",
-              children: [],
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Image",
-                    key: "imageUrl",
-                    control: Input,
-                    placeholder: "Image",
-                  },
-                  {
-                    label: "Heading",
-                    key: "heading",
-                    control: Input,
-                    placeholder: "Heading",
-                  },
-                  {
-                    label: "Description",
-                    key: "description",
-                    control: Input,
-                    placeholder: "Description",
-                  },
-                  {
-                    label: "Link Text",
-                    key: "linkText",
-                    control: Input,
-                    placeholder: "Link Text",
-                  },
-                  {
-                    label: "Link Url",
-                    key: "linkUrl",
-                    control: ScreenSelect,
-                    placeholder: "Link URL",
-                  },
-                  {
-                    label: "Link Color",
-                    key: "color",
-                    control: Input,
-                    placeholder: "Link Color",
-                  },
-                  {
-                    label: "Hover Color",
-                    key: "linkHoverColor",
-                    control: Input,
-                    placeholder: "Hover Color",
-                  },
-                  {
-                    label: "Image Height",
-                    key: "imageHeight",
-                    control: OptionSelect,
-                    options: ["12rem", "16rem", "20rem", "24rem"],
-                    placeholder: "Image Height",
-                  },
-                  {
-                    label: "Card Width",
-                    key: "cardWidth",
-                    control: OptionSelect,
-                    options: ["16rem", "20rem", "24rem"],
-                    placeholder: "Card Width",
-                  },
-                ],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/cardhorizontal",
-              name: "Horizontal",
-              description:
-                "A basic card component that can contain content and actions.",
-              icon: "ri-layout-row-line",
-              children: [],
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Image",
-                    key: "imageUrl",
-                    control: Input,
-                    placeholder: "Image",
-                  },
-                  {
-                    label: "Heading",
-                    key: "heading",
-                    control: Input,
-                    placeholder: "Heading",
-                  },
-                  {
-                    label: "Description",
-                    key: "description",
-                    control: Input,
-                    placeholder: "Description",
-                  },
-                  {
-                    label: "Subtext",
-                    key: "subtext",
-                    control: Input,
-                    placeholder: "Subtext",
-                  },
-                  {
-                    label: "Link Text",
-                    key: "linkText",
-                    control: Input,
-                    placeholder: "Link Text",
-                  },
-                  {
-                    label: "Link Url",
-                    key: "linkUrl",
-                    control: ScreenSelect,
-                    placeholder: "Link URL",
-                  },
-                  {
-                    label: "Link Color",
-                    key: "color",
-                    control: Input,
-                    placeholder: "Link Color",
-                  },
-                  {
-                    label: "Hover Color",
-                    key: "linkHoverColor",
-                    control: Input,
-                    placeholder: "Hover Color",
-                  },
-                  {
-                    label: "Card Width",
-                    key: "cardWidth",
-                    control: OptionSelect,
-                    options: [
-                      "24rem",
-                      "28rem",
-                      "32rem",
-                      "40rem",
-                      "48rem",
-                      "60rem",
-                      "100%",
-                    ],
-                    placeholder: "Card Height",
-                  },
-                  {
-                    label: "Image Width",
-                    key: "imageWidth",
-                    control: OptionSelect,
-                    options: ["8rem", "12rem", "16rem"],
-                    placeholder: "Image Width",
-                  },
-                  {
-                    label: "Image Height",
-                    key: "imageHeight",
-                    control: OptionSelect,
-                    options: ["8rem", "12rem", "16rem", "auto"],
-                    placeholder: "Image Height",
-                  },
-                ],
-              },
-            },
-          ],
-        },
-        {
-          name: "Form",
-          description: "A component that generates a form from your data.",
-          icon: "ri-file-edit-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/dataform",
-              name: "Form Basic",
-              icon: "ri-file-edit-line",
-              properties: {
-                design: { ...all },
-                settings: [],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/dataformwide",
-              name: "Form Wide",
-              icon: "ri-file-edit-line",
-              properties: {
-                design: { ...all },
-                settings: [],
-              },
-            },
-          ],
-        },
-        {
-          name: "Chart",
-          description: "Shiny chart",
-          icon: "ri-bar-chart-fill",
-          children: [
-            {
-              name: "Donut",
-              _component: "@budibase/standard-components/donut",
-              description: "Donut chart",
-              icon: "ri-pie-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Animate Chart",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Hover Highlight",
-                    key: "hasHoverAnimation",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Keep Last Hover",
-                    key: "hasLastHoverSliceHighlighted",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "External Radius",
-                    key: "externalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Internal Radius",
-                    key: "internalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Radius Offset",
-                    key: "radiusHoverOffset ",
-                    control: Input,
-                  },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend ",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Horizontal Legend",
-                    key: "horizontalLegend",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Legend Width",
-                    key: "legendWidth",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Bar",
-              _component: "@budibase/standard-components/bar",
-              description: "Bar chart",
-              icon: "ri-bar-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Enable Labels",
-                    key: "enableLabels",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      { label: "Normal", value: "britecharts" },
-                      { label: "Blue Green", value: "blueGreen" },
-                      { label: "Green", value: "green" },
-                      { label: "Grey", value: "grey" },
-                      { label: "Orange", value: "orange" },
-                      { label: "Pink", value: "pink" },
-                      { label: "Purple", value: "purple" },
-                      { label: "Red", value: "red" },
-                      { label: "Teal", value: "teal" },
-                      { label: "Yellow", value: "yellow" },
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "gradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Highlight Single Bar",
-                    key: "hasSingleBarHighlight",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Animate",
-                    key: "isAnimate",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Horizontal",
-                    key: "isHorizontal",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Label Number Format",
-                    key: "labelsNumberFormat",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Groupedbar",
-              _component: "@budibase/standard-components/groupedbar",
-              description: "Groupedbar chart",
-              icon: "ri-bar-chart-grouped-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Group Label",
-                    key: "groupLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Tick Text Offset",
-                    key: "yTickTextOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Is Horizontal",
-                    key: "isHorizontal",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Tooltip Title",
-                    key: "tooltipTitle",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Line",
-              _component: "@budibase/standard-components/line",
-              description: "Line chart",
-              icon: "ri-line-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "lineGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Line Curve",
-                    key: "lineCurve",
-                    control: OptionSelect,
-                    options: [
-                      "linear",
-                      "basis",
-                      "natural",
-                      "monotoneX",
-                      "monotoneY",
-                      "step",
-                      "stepAfter",
-                      "stepBefore",
-                      "cardinal",
-                      "catmullRom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Show All Datapoints",
-                    key: "shouldShowAllDataPoints",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: OptionSelect,
-                    options: ["en-GB", "en-US"],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "numeric"],
-                  },
-                  {
-                    label: "X Axis Format",
-                    key: "xAxisFormat",
-                    control: OptionSelect,
-                    options: [
-                      "day-month",
-                      "minute-hour",
-                      "hour-daymonth",
-                      "month-year",
-                      "custom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Custom Format",
-                    key: "xAxisCustomFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Tooltip Title",
-                    key: "tooltipTitle",
-                    control: Input,
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-          ],
-        },
-        // {
-        //  name: "Data List",
-        //  _component: "@budibase/standard-components/datalist",
-        //  description: "Shiny list",
-        //  icon: "ri-file-list-line",
-        //  properties: {
-        //   design: { ...all },
-        //   settings: [{ label: "Table", key: "table", control: TableSelect }],
-        //  },
-        //  children: [],
-        // },
-        {
-          name: "Row Detail",
-          _component: "@budibase/standard-components/rowdetail",
-          description:
-            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
-        {
-          name: "New Row",
-          _component: "@budibase/standard-components/newrow",
-          description:
-            "Sets up a new row for creation, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
-      ],
-    },
-    {
-      name: "Layouts",
+      name: "Other",
+      icon: "ri-more-2-line",
       isCategory: true,
       children: [
         {
@@ -1152,6 +1103,30 @@ export default {
             ],
           },
         },
+        {
+          name: "Row Detail",
+          _component: "@budibase/standard-components/rowdetail",
+          description:
+            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "table", control: TableSelect }],
+          },
+          children: [],
+        },
+        {
+          name: "New Row",
+          _component: "@budibase/standard-components/newrow",
+          description:
+            "Sets up a new row for creation, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "table", control: TableSelect }],
+          },
+          children: [],
+        },
       ],
     },
   ],
diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js
index 9bfd48a3cd..89c7a0a6aa 100644
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@@ -1,5 +1,5 @@
-import { last } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { last, flow } from "lodash/fp"
+
 export const buildStyle = styles => {
   let str = ""
   for (let s in styles) {
@@ -15,6 +15,8 @@ export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
 
+export const pipe = (arg, funcs) => flow(funcs)(arg)
+
 export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
 
 export const get_name = s => (!s ? "" : last(s.split("/")))
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 69deda72ff..7f4339b974 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -15,7 +15,7 @@
 </head>
 
 <body id="app">
-	
+
 	<script src='/_builder/bundle.js'></script>
 
 </body>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index fb2b233e2c..7d0724facd 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -67,23 +67,27 @@
     </div>
     <div class="toprightnav">
       <FeedbackNavLink />
+      <div class="topnavitemright">
+        <a target="_blank" href="https://docs.budibase.com">
+          <i class="ri-question-line" />
+        </a>
+      </div>
+      <div class="topnavitemright">
+        <a
+          target="_blank"
+          href="https://github.com/Budibase/budibase/discussions">
+          <i class="ri-discuss-line" />
+        </a>
+      </div>
       <SettingsLink />
-      <span
-        class:active={false}
-        class="topnavitemright"
+      <Button
+        secondary
         on:click={() => {
           document.cookie = 'budibase:token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
           window.open(`/${application}`)
         }}>
-        <PreviewIcon />
-      </span>
-      <span class="topnavitemright">
-        <a
-          target="_blank"
-          href="https://github.com/Budibase/budibase/discussions">
-          <i class="ri-question-fill help" />
-        </a>
-      </span>
+        Preview
+      </Button>
     </div>
   </div>
   <div class="beta">
@@ -122,7 +126,7 @@
     flex: 0 0 auto;
     height: 60px;
     background: #fff;
-    padding: 0px 20px 0 20px;
+    padding: 0 20px;
     display: flex;
     box-sizing: border-box;
     justify-content: space-between;
@@ -168,20 +172,19 @@
     font-weight: 500;
   }
 
-  .topnavitemright {
+  .topnavitemright a {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
-    font-weight: 500;
-    font-size: 1rem;
-    height: 100%;
+    margin: 0 12px 0 0;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
 
-  .topnavitemright:hover {
+  .topnavitemright a:hover {
     color: var(--ink);
     font-weight: 500;
   }
@@ -207,10 +210,13 @@
     text-transform: capitalize;
   }
 
-  .help {
-    font-size: 24px;
+  i {
+    font-size: 18px;
     color: var(--grey-7);
   }
+  i:hover {
+    color: var(--ink);
+  }
 
   .beta {
     position: absolute;
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 95cf31e2c8..08d64474f4 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import { automationStore } from "builderStore"
-  import { AutomationPanel, SetupPanel } from "components/automation"
+  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
+  import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
 </script>
 
 <!-- routify:options index=3 -->
@@ -12,28 +13,39 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav">
+    <div class="nav setup">
       <SetupPanel />
     </div>
   {/if}
 </div>
 
 <style>
-  .content {
-    position: relative;
-  }
-
   .root {
     height: calc(100% - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(510px, 1fr) 300px;
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(510px, 1fr) 260px;
+    background: var(--grey-2);
   }
 
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl) var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
+  .content {
+    position: relative;
+    padding: var(--spacing-l) 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/automate/index.svelte b/packages/builder/src/pages/[application]/automate/index.svelte
index 36d04677cd..1a15ed48c6 100644
--- a/packages/builder/src/pages/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/[application]/automate/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { AutomationBuilder } from "components/automation"
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
 </script>
 
 <AutomationBuilder />
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 1ac92b84c9..4bfb984c3b 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
-  import * as api from "components/backend/DataTable/api"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
 </script>
 
@@ -18,18 +16,27 @@
   .root {
     height: calc(100vh - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(0, 1fr);
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(0, 1fr);
+    background: var(--grey-2);
   }
   .content {
     flex: 1 1 auto;
-    padding: var(--spacing-xl) 40px;
+    padding: var(--spacing-l) 40px;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
   }
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index b7ee09a4f3..c71edee2df 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -11,7 +11,8 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/_layout.svelte b/packages/builder/src/pages/[application]/data/table/_layout.svelte
index 3f8b33a095..2eea0be4c2 100644
--- a/packages/builder/src/pages/[application]/data/table/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/table/_layout.svelte
@@ -3,10 +3,6 @@
   import { goto, leftover } from "@sveltech/routify"
   import { onMount } from "svelte"
 
-  async function selectTable(table) {
-    backendUiStore.actions.tables.select(table)
-  }
-
   onMount(async () => {
     // navigate to first table in list, if not already selected
     // and this is the final url (i.e. no selectedTable)
@@ -20,13 +16,4 @@
   })
 </script>
 
-<div class="root">
-  <slot />
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-</style>
+<slot />
diff --git a/packages/builder/src/pages/[application]/data/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte
index 15ed1e299b..6c661bca59 100644
--- a/packages/builder/src/pages/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/index.svelte
@@ -27,7 +27,8 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
index 3f592e6148..312e799005 100644
--- a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
@@ -11,7 +11,8 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-m);
     color: var(--grey-4);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 0aae313ccd..c4c67c796e 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -1,26 +1,21 @@
 <script>
   import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
-  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import Switcher from "components/common/Switcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
 
-  $: instances = $store.appInstances
+  $: instance = $store.appInstance
 
   async function selectDatabase(database) {
     backendUiStore.actions.database.select(database)
   }
 
   onMount(async () => {
-    if ($store.appInstances.length > 0 && !$backendUiStore.database) {
-      await selectDatabase($store.appInstances[0])
+    if ($store.appInstance && !$backendUiStore.database) {
+      await selectDatabase($store.appInstance)
     }
   })
 
@@ -32,30 +27,21 @@
     settingsView.show()
   }
 
-  let leftNavSwitcher
-
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
 <!-- routify:options index=1 -->
 <div class="root">
-
   <div class="ui-nav">
-
-    <Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
-      <div slot="0">
-        <FrontendNavigatePane />
-      </div>
-      <div slot="1">
-        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />
-      </div>
-    </Switcher>
-
+    <FrontendNavigatePane />
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-      <CurrentItemPreview />
+      <ComponentSelectionList />
+      <div class="preview-content">
+        <CurrentItemPreview />
+      </div>
     {/if}
   </div>
 
@@ -64,7 +50,6 @@
       <ComponentPropertiesPanel />
     </div>
   {/if}
-
 </div>
 
 <slot />
@@ -72,35 +57,48 @@
 <style>
   .root {
     display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    width: 100%;
-    background: var(--grey-1);
-    flex: 1;
-    min-height: 0;
+    grid-template-columns: 260px 1fr 260px;
+    background: var(--grey-2);
     align-items: stretch;
+    height: calc(100vh - 60px);
   }
 
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);
-    height: calc(100vh - 69px);
-    padding: 0;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) var(--spacing-xl);
+    overflow-y: auto;
   }
 
   .preview-pane {
     grid-column: 2;
-    margin: 40px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
+  }
+  .preview-content {
     background: #fff;
-    border-radius: 5px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+    flex: 1 1 auto;
   }
 
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    min-height: 0px;
-    height: calc(100vh - 69px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 
   .nav-group-header > div:nth-child(1) {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 43f3fd02d7..a29bf5f44d 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,11 +1,7 @@
 <script>
-  import { store } from "builderStore"
   import api from "builderStore/api"
   import AppList from "components/start/AppList.svelte"
-  import { onMount } from "svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import { get } from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button, Heading, Modal } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 6a195f4a21..0eb481c9be 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -3406,6 +3406,7 @@ is-data-descriptor@^1.0.0:
 is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
 is-descriptor@^0.1.0:
   version "0.1.6"
@@ -4654,8 +4655,9 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
 
 node-fetch@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
 node-gyp-build@~3.7.0:
   version "3.7.0"
diff --git a/packages/cli/.gitignore b/packages/cli/.gitignore
deleted file mode 100644
index d0c97ab594..0000000000
--- a/packages/cli/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-sandbox/
-node_modules/
\ No newline at end of file
diff --git a/packages/cli/.npmignore b/packages/cli/.npmignore
deleted file mode 100644
index 6e870a6399..0000000000
--- a/packages/cli/.npmignore
+++ /dev/null
@@ -1,3 +0,0 @@
-*
-!bin/*
-!src/**/*
diff --git a/packages/cli/.vscode/launch.json b/packages/cli/.vscode/launch.json
deleted file mode 100644
index d84036ad8f..0000000000
--- a/packages/cli/.vscode/launch.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "init",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["init", "-b", "remote"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "new",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["new", "my-app"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "run",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["run"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "instance",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "args": ["instance", "my-app"],
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "budi",
-            "program": "${workspaceFolder}\\bin\\budi",
-            "console": "integratedTerminal",
-            "cwd": "${workspaceFolder}/sandbox"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/cli/LICENSE b/packages/cli/LICENSE
deleted file mode 100644
index cba6f6a15a..0000000000
--- a/packages/cli/LICENSE
+++ /dev/null
@@ -1,660 +0,0 @@
-### GNU AFFERO GENERAL PUBLIC LICENSE
-
-Version 3, 19 November 2007
-
-Copyright (C) 2007 Free Software Foundation, Inc.
-<https://fsf.org/>
-
-Everyone is permitted to copy and distribute verbatim copies of this
-license document, but changing it is not allowed.
-
-### Preamble
-
-The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works. By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains
-free software for all its users.
-
-When we speak of free software, we are referring to freedom, not
-price. Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate. Many developers of free software are heartened and
-encouraged by the resulting cooperation. However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community. It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server. Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals. This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing
-under this license.
-
-The precise terms and conditions for copying, distribution and
-modification follow.
-
-### TERMS AND CONDITIONS
-
-#### 0. Definitions.
-
-"This License" refers to version 3 of the GNU Affero General Public
-License.
-
-"Copyright" also means copyright-like laws that apply to other kinds
-of works, such as semiconductor masks.
-
-"The Program" refers to any copyrightable work licensed under this
-License. Each licensee is addressed as "you". "Licensees" and
-"recipients" may be individuals or organizations.
-
-To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of
-an exact copy. The resulting work is called a "modified version" of
-the earlier work or a work "based on" the earlier work.
-
-A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy. Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies. Mere interaction with a user
-through a computer network, with no transfer of a copy, is not
-conveying.
-
-An interactive user interface displays "Appropriate Legal Notices" to
-the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License. If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-#### 1. Source Code.
-
-The "source code" for a work means the preferred form of the work for
-making modifications to it. "Object code" means any non-source form of
-a work.
-
-A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form. A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities. However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work. For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-The Corresponding Source need not include anything that users can
-regenerate automatically from other parts of the Corresponding Source.
-
-The Corresponding Source for a work in source code form is that same
-work.
-
-#### 2. Basic Permissions.
-
-All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met. This License explicitly affirms your unlimited
-permission to run the unmodified Program. The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work. This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-You may make, run and propagate covered works that you do not convey,
-without conditions so long as your license otherwise remains in force.
-You may convey covered works to others for the sole purpose of having
-them make modifications exclusively for you, or provide you with
-facilities for running those works, provided that you comply with the
-terms of this License in conveying all material for which you do not
-control copyright. Those thus making or running the covered works for
-you must do so exclusively on your behalf, under your direction and
-control, on terms that prohibit them from making any copies of your
-copyrighted material outside their relationship with you.
-
-Conveying under any other circumstances is permitted solely under the
-conditions stated below. Sublicensing is not allowed; section 10 makes
-it unnecessary.
-
-#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such
-circumvention is effected by exercising rights under this License with
-respect to the covered work, and you disclaim any intention to limit
-operation or modification of the work as a means of enforcing, against
-the work's users, your or third parties' legal rights to forbid
-circumvention of technological measures.
-
-#### 4. Conveying Verbatim Copies.
-
-You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-#### 5. Conveying Modified Source Versions.
-
-You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these
-conditions:
-
--   a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
--   b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under
-    section 7. This requirement modifies the requirement in section 4
-    to "keep intact all notices".
--   c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy. This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged. This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
--   d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit. Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-#### 6. Conveying Non-Source Forms.
-
-You may convey a covered work in object code form under the terms of
-sections 4 and 5, provided that you also convey the machine-readable
-Corresponding Source under the terms of this License, in one of these
-ways:
-
--   a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
--   b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the Corresponding
-    Source from a network server at no charge.
--   c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source. This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
--   d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge. You need not require recipients to copy the
-    Corresponding Source along with the object code. If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source. Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
--   e) Convey the object code using peer-to-peer transmission,
-    provided you inform other peers where the object code and
-    Corresponding Source of the work are being offered to the general
-    public at no charge under subsection 6d.
-
-A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal,
-family, or household purposes, or (2) anything designed or sold for
-incorporation into a dwelling. In determining whether a product is a
-consumer product, doubtful cases shall be resolved in favor of
-coverage. For a particular product received by a particular user,
-"normally used" refers to a typical or common use of that class of
-product, regardless of the status of the particular user or of the way
-in which the particular user actually uses, or expects or is expected
-to use, the product. A product is a consumer product regardless of
-whether the product has substantial commercial, industrial or
-non-consumer uses, unless such uses represent the only significant
-mode of use of the product.
-
-"Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to
-install and execute modified versions of a covered work in that User
-Product from a modified version of its Corresponding Source. The
-information must suffice to ensure that the continued functioning of
-the modified object code is in no case prevented or interfered with
-solely because modification has been made.
-
-If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information. But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or
-updates for a work that has been modified or installed by the
-recipient, or for the User Product in which it has been modified or
-installed. Access to a network may be denied when the modification
-itself materially and adversely affects the operation of the network
-or violates the rules and protocols for communication across the
-network.
-
-Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-#### 7. Additional Terms.
-
-"Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law. If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it. (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.) You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders
-of that material) supplement the terms of this License with terms:
-
--   a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
--   b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
--   c) Prohibiting misrepresentation of the origin of that material,
-    or requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
--   d) Limiting the use for publicity purposes of names of licensors
-    or authors of the material; or
--   e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
--   f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions
-    of it) with contractual assumptions of liability to the recipient,
-    for any liability that these contractual assumptions directly
-    impose on those licensors and authors.
-
-All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10. If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term. If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions; the
-above requirements apply either way.
-
-#### 8. Termination.
-
-You may not propagate or modify a covered work except as expressly
-provided under this License. Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-However, if you cease all violation of this License, then your license
-from a particular copyright holder is reinstated (a) provisionally,
-unless and until the copyright holder explicitly and finally
-terminates your license, and (b) permanently, if the copyright holder
-fails to notify you of the violation by some reasonable means prior to
-60 days after the cessation.
-
-Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License. If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-#### 9. Acceptance Not Required for Having Copies.
-
-You are not required to accept this License in order to receive or run
-a copy of the Program. Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance. However,
-nothing other than this License grants you permission to propagate or
-modify any covered work. These actions infringe copyright if you do
-not accept this License. Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-#### 10. Automatic Licensing of Downstream Recipients.
-
-Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License. You are not responsible
-for enforcing compliance by third parties with this License.
-
-An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations. If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License. For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-#### 11. Patents.
-
-A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based. The
-work thus licensed is called the contributor's "contributor version".
-
-A contributor's "essential patent claims" are all patent claims owned
-or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version. For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement). To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients. "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-A patent license is "discriminatory" if it does not include within the
-scope of its coverage, prohibits the exercise of, or is conditioned on
-the non-exercise of one or more of the rights that are specifically
-granted under this License. You may not convey a covered work if you
-are a party to an arrangement with a third party that is in the
-business of distributing software, under which you make payment to the
-third party based on the extent of your activity of conveying the
-work, and under which the third party grants, to any of the parties
-who would receive the covered work from you, a discriminatory patent
-license (a) in connection with copies of the covered work conveyed by
-you (or copies made from those copies), or (b) primarily for and in
-connection with specific products or compilations that contain the
-covered work, unless you entered into that arrangement, or that patent
-license was granted, prior to 28 March 2007.
-
-Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-#### 12. No Surrender of Others' Freedom.
-
-If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License. If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under
-this License and any other pertinent obligations, then as a
-consequence you may not convey it at all. For example, if you agree to
-terms that obligate you to collect a royalty for further conveying
-from those to whom you convey the Program, the only way you could
-satisfy both those terms and this License would be to refrain entirely
-from conveying the Program.
-
-#### 13. Remote Network Interaction; Use with the GNU General Public License.
-
-Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your
-version supports such interaction) an opportunity to receive the
-Corresponding Source of your version by providing access to the
-Corresponding Source from a network server at no charge, through some
-standard or customary means of facilitating copying of software. This
-Corresponding Source shall include the Corresponding Source for any
-work covered by version 3 of the GNU General Public License that is
-incorporated pursuant to the following paragraph.
-
-Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work. The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-#### 14. Revised Versions of this License.
-
-The Free Software Foundation may publish revised and/or new versions
-of the GNU Affero General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-Each version is given a distinguishing version number. If the Program
-specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation. If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever
-published by the Free Software Foundation.
-
-If the Program specifies that a proxy can decide which future versions
-of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-Later license versions may give you additional or different
-permissions. However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-#### 15. Disclaimer of Warranty.
-
-THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
-WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
-LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
-PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
-DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
-CORRECTION.
-
-#### 16. Limitation of Liability.
-
-IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
-CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
-ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
-NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
-LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
-TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
-PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
-
-#### 17. Interpretation of Sections 15 and 16.
-
-If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-END OF TERMS AND CONDITIONS
-
-### How to Apply These Terms to Your New Programs
-
-If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these
-terms.
-
-To do so, attach the following notices to the program. It is safest to
-attach them to the start of each source file to most effectively state
-the exclusion of warranty; and each file should have at least the
-"copyright" line and a pointer to where the full notice is found.
-
-        <one line to give the program's name and a brief idea of what it does.>
-        Copyright (C) <year>  <name of author>
-
-        This program is free software: you can redistribute it and/or modify
-        it under the terms of the GNU Affero General Public License as
-        published by the Free Software Foundation, either version 3 of the
-        License, or (at your option) any later version.
-
-        This program is distributed in the hope that it will be useful,
-        but WITHOUT ANY WARRANTY; without even the implied warranty of
-        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-        GNU Affero General Public License for more details.
-
-        You should have received a copy of the GNU Affero General Public License
-        along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper
-mail.
-
-If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source. For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code. There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for
-the specific requirements.
-
-You should also get your employer (if you work as a programmer) or
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary. For more information on this, and how to apply and follow
-the GNU AGPL, see <https://www.gnu.org/licenses/>.
diff --git a/packages/cli/bin/budi b/packages/cli/bin/budi
deleted file mode 100755
index 2a5702c383..0000000000
--- a/packages/cli/bin/budi
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require("../src/cli")()
diff --git a/packages/cli/bin/budi.cmd b/packages/cli/bin/budi.cmd
deleted file mode 100644
index 3a577ce739..0000000000
--- a/packages/cli/bin/budi.cmd
+++ /dev/null
@@ -1,7 +0,0 @@
-@IF EXIST "%~dp0\node.exe" (
-  "%~dp0\node.exe"  "%~dp0\node_modules\budibase\src\cli.js" %*
-) ELSE (
-  @SETLOCAL
-  @SET PATHEXT=%PATHEXT:;.JS;=;%
-  node  "%~dp0\..\src\cli.js" %*
-)
\ No newline at end of file
diff --git a/packages/cli/package.json b/packages/cli/package.json
deleted file mode 100644
index dadb0074cc..0000000000
--- a/packages/cli/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "budibase",
-  "version": "0.2.6",
-  "description": "Budibase CLI",
-  "repository": "https://github.com/Budibase/Budibase",
-  "homepage": "https://www.budibase.com",
-  "main": "src/cli.js",
-  "bin": {
-    "budi": "bin/budi"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "budibase"
-  ],
-  "author": "Budibase",
-  "license": "AGPL-3.0-or-later",
-  "dependencies": {
-    "@budibase/server": "^0.2.6",
-    "@inquirer/password": "^0.0.6-alpha.0",
-    "chalk": "^2.4.2",
-    "dotenv": "^8.2.0",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.6",
-    "inquirer": "^7.0.0",
-    "lodash": "^4.17.15",
-    "squirrelly": "7",
-    "uuid": "^7.0.3",
-    "yargs": "^14.2.0"
-  },
-  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691"
-}
diff --git a/packages/cli/readme.md b/packages/cli/readme.md
deleted file mode 100644
index 59e9a3052f..0000000000
--- a/packages/cli/readme.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Getting Started with Budibase
-
-(For contributors - scroll down)
-
-### 1. Global install budibase
-
-`npm install -g budibase`
-
-### 2. Start using Budibase
-
-Create a directory to store your Budibase apps
-
-`mkdir my-budibase`
-
-`cd my-budibase`
-
-Initialise Budibase in current directory
-
-`budi init`
-
-Create a new Budibase app
-
-`budi new my-app`
-
-Run Budibase
-
-`budi`
-
-You can now access the Budibase builder on http://localhost:4001/_builder
-
-Start building!
-
-Once you have created your app, you need to create yourself an instance of your app (i.e. a database)
-
-`budi instance my-app`
-
-## Running the cli on dev
-
-If you want to test this on dev, from the mono repo, run `npm link` from here first.
-
-If you use VS Code, open it in this directory, and you will find launch configurations for each command - debugging, yay!
\ No newline at end of file
diff --git a/packages/cli/src/cli.js b/packages/cli/src/cli.js
deleted file mode 100644
index 33fea0ca76..0000000000
--- a/packages/cli/src/cli.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const yargs = require("yargs")
-const chalk = require("chalk")
-
-module.exports = () => {
-  yargs
-    .scriptName("budi")
-    .usage("$0 <cmd> [args]")
-    .command(require("./commands/init"))
-    .command(require("./commands/new"))
-    .command(require("./commands/run"))
-    .fail((msg, err) => {
-      if (err) {
-        console.log(chalk.red(err.message))
-        console.log(chalk.gray(err.toString()))
-      } else {
-        console.log(chalk.red(msg))
-      }
-    })
-    .help().argv
-}
diff --git a/packages/cli/src/commands/init/index.js b/packages/cli/src/commands/init/index.js
deleted file mode 100644
index f387a8d203..0000000000
--- a/packages/cli/src/commands/init/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const handler = require("./initHandler")
-
-module.exports = {
-  command: "init [dir] [database] [clientId] [couchDbUrl]",
-  desc: "Initialise Budibase. Run this first to setup your local Budibase",
-  builder: yargs => {
-    yargs.positional("dir", {
-      type: "string",
-      describe:
-        "your apps directory - directory will be created if it does not exist",
-      default: "~/.budibase",
-      alias: "d",
-    })
-    yargs.positional("clientId", {
-      type: "string",
-      describe: "used to determine the name of the global databse",
-      alias: "c",
-      default: "new",
-    })
-    yargs.positional("couchDbUrl", {
-      type: "string",
-      describe:
-        "connection string for couch db, format: https://username:password@localhost:5984",
-      alias: "u",
-      default: "",
-    })
-    yargs.positional("quiet", {
-      type: "boolean",
-      describe: "flag - if set, then run in quiet mode - use all defaults",
-      alias: "q",
-      default: false,
-    })
-  },
-  handler,
-}
diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js
deleted file mode 100644
index eadc74f815..0000000000
--- a/packages/cli/src/commands/init/initHandler.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const { xPlatHomeDir } = require("../../common")
-const initialiseBudibase = require("@budibase/server/src/utilities/initialiseBudibase")
-
-module.exports = opts => {
-  opts.dir = xPlatHomeDir(opts.dir)
-  return initialiseBudibase(opts)
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/.gitignore b/packages/cli/src/commands/new/appDirectoryTemplate/.gitignore
deleted file mode 100644
index 77738287f0..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-dist/
\ No newline at end of file
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/package.json b/packages/cli/src/commands/new/appDirectoryTemplate/package.json
deleted file mode 100644
index e04b9debc8..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "name": "name",
-  "version": "1.0.0",
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@budibase/standard-components": "0.x"
-  }
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
deleted file mode 100644
index 2a106fbb3d..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 0,
-		"type": "div",
-		"_styles": {
-			"normal": {},
-			"hover": {},
-			"active": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": ""
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/screens/.gitkeep b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/screens/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
deleted file mode 100644
index 335f9cd343..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 1,
-		"type": "div",
-		"_styles": {
-			"normal": {},
-			"hover": {},
-			"active": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": ""
-}
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/plugins.js b/packages/cli/src/commands/new/appDirectoryTemplate/plugins.js
deleted file mode 100644
index 44368bf6ec..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/plugins.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = () => ({})
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder b/packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder
deleted file mode 100644
index 4a61114f5d..0000000000
--- a/packages/cli/src/commands/new/appDirectoryTemplate/public/_shared/placeholder
+++ /dev/null
@@ -1 +0,0 @@
-whats the craic big lawd ?
\ No newline at end of file
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/public/main/index.html b/packages/cli/src/commands/new/appDirectoryTemplate/public/main/index.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/public/unauthenticated/index.html b/packages/cli/src/commands/new/appDirectoryTemplate/public/unauthenticated/index.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cli/src/commands/new/index.js b/packages/cli/src/commands/new/index.js
deleted file mode 100644
index cf67e78b08..0000000000
--- a/packages/cli/src/commands/new/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const handler = require("./newHandler")
-
-module.exports = {
-  command: "new <name> [dir]",
-  desc: "Create a new Budibase app",
-  builder: yargs => {
-    yargs.positional("name", {
-      type: "string",
-      describe: "the name of your app",
-      alias: "n",
-    })
-    yargs.positional("dir", {
-      type: "string",
-      describe: "budibase apps directory",
-      alias: "d",
-      default: "~/.budibase",
-    })
-  },
-  handler,
-}
diff --git a/packages/cli/src/commands/new/newHandler.js b/packages/cli/src/commands/new/newHandler.js
deleted file mode 100644
index 92e6641184..0000000000
--- a/packages/cli/src/commands/new/newHandler.js
+++ /dev/null
@@ -1,89 +0,0 @@
-const { xPlatHomeDir } = require("../../common")
-const dotenv = require("dotenv")
-const { copy, readJSON, writeJSON, exists } = require("fs-extra")
-const { resolve, join } = require("path")
-const chalk = require("chalk")
-const { exec } = require("child_process")
-
-module.exports = opts => {
-  run(opts)
-}
-
-const run = async opts => {
-  try {
-    setup(opts)
-    await createAppInstance(opts)
-    await createEmptyAppPackage(opts)
-    exec(`cd ${join(opts.dir, opts.applicationId)} && npm install`)
-    console.log(chalk.green(`Budibase app ${opts.name} created!`))
-    process.exit()
-  } catch (error) {
-    console.error(chalk.red("Error creating new app", error))
-    process.exit(1)
-  }
-}
-
-const setup = opts => {
-  opts.dir = xPlatHomeDir(opts.dir)
-  process.env.BUDIBASE_DIR = opts.dir
-  const bbconfig = dotenv.config({ path: resolve(opts.dir, ".env") })
-  console.log(JSON.stringify(bbconfig))
-}
-
-const createAppInstance = async opts => {
-  const createAppCtx = {
-    params: { clientId: process.env.CLIENT_ID },
-    request: {
-      body: { name: opts.name },
-    },
-    body: {},
-  }
-
-  // this cannot be a top level require as it will cause
-  // the environment module to be loaded prematurely
-  const appController = require("@budibase/server/src/api/controllers/application")
-  await appController.create(createAppCtx)
-
-  opts.applicationId = createAppCtx.body._id
-  console.log(chalk.green(`Application Created: ${createAppCtx.body._id}`))
-
-  // this cannot be a top level require as it will cause
-  // the environment module to be loaded prematurely
-  const instanceController = require("@budibase/server/src/api/controllers/instance")
-  const createInstCtx = {
-    params: {
-      clientId: process.env.CLIENT_ID,
-    },
-    user: {
-      appId: opts.applicationId,
-    },
-    request: {
-      body: { name: `dev-${process.env.CLIENT_ID}` },
-    },
-  }
-  await instanceController.create(createInstCtx)
-
-  console.log(chalk.green(`Default Instance Created`))
-  console.log(JSON.stringify(createInstCtx.body))
-}
-
-const createEmptyAppPackage = async opts => {
-  const templateFolder = resolve(__dirname, "appDirectoryTemplate")
-
-  const appsFolder = opts.dir
-  const newAppFolder = resolve(appsFolder, opts.applicationId)
-
-  if (await exists(newAppFolder)) {
-    console.log(chalk.red(`App ${opts.name} already exists.`))
-    return
-  }
-
-  await copy(templateFolder, newAppFolder)
-
-  const packageJsonPath = join(appsFolder, opts.applicationId, "package.json")
-  const packageJson = await readJSON(packageJsonPath)
-
-  packageJson.name = opts.name
-
-  await writeJSON(packageJsonPath, packageJson)
-}
diff --git a/packages/cli/src/commands/new/page.template.json b/packages/cli/src/commands/new/page.template.json
deleted file mode 100644
index d6aaa5a7f3..0000000000
--- a/packages/cli/src/commands/new/page.template.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components" ],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 0,
-		"type": "div",
-		"_styles": {
-			"normal": {},
-			"hover": {},
-			"active": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": ""
-}
diff --git a/packages/cli/src/commands/run/index.js b/packages/cli/src/commands/run/index.js
deleted file mode 100644
index 3499f36e5a..0000000000
--- a/packages/cli/src/commands/run/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const handler = require("./runHandler")
-
-module.exports = {
-  command: "run [dir]",
-  aliases: ["$0"],
-  desc:
-    "Start budibase Server. You can access your apps and the builder from here if you have dev=true in your config",
-  builder: yargs => {
-    yargs.positional("dir", {
-      type: "string",
-      describe: "your budibase apps directory",
-      alias: "d",
-      default: "~/.budibase",
-    })
-  },
-  handler,
-}
diff --git a/packages/cli/src/commands/run/runHandler.js b/packages/cli/src/commands/run/runHandler.js
deleted file mode 100644
index 0305436664..0000000000
--- a/packages/cli/src/commands/run/runHandler.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { xPlatHomeDir } = require("../../common")
-const { resolve } = require("path")
-
-module.exports = async ({ dir }) => {
-  dir = xPlatHomeDir(dir)
-  process.env.BUDIBASE_DIR = resolve(dir)
-  require("dotenv").config({ path: resolve(dir, ".env") })
-
-  // dont make this a variable or top level require
-  // it will cause environment module to be loaded prematurely
-  const server = require("@budibase/server/src/app")
-  server.on("close", () => console.log("Server Closed"))
-}
diff --git a/packages/cli/src/common.js b/packages/cli/src/common.js
deleted file mode 100644
index b922a5d8b8..0000000000
--- a/packages/cli/src/common.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const { resolve, join } = require("path")
-const { homedir } = require("os")
-
-module.exports.serverFileName = relativePath =>
-  resolve(__dirname, "..", "node_modules", "@budibase", "server", relativePath)
-
-module.exports.xPlatHomeDir = dir =>
-  dir.startsWith("~") ? join(homedir(), dir.substring(1)) : dir
diff --git a/packages/cli/yarn.lock b/packages/cli/yarn.lock
deleted file mode 100644
index 25db53d3b9..0000000000
--- a/packages/cli/yarn.lock
+++ /dev/null
@@ -1,521 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@inquirer/core@^0.0.7-alpha.0":
-  version "0.0.7-alpha.0"
-  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-0.0.7-alpha.0.tgz#20d2a5376508f09e7d7ec2bd47ac6849d42e3be5"
-  integrity sha512-ixf0s2kgvZqOCZ15GqTG5r+1faAtfHRJMZmLPFll0JGka+go0iX9byw0WrXkTVkdBK6Bg4Cr8A6R+CsFjUNC3A==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-spinners "^2.2.0"
-    cli-width "^2.2.0"
-    lodash "^4.17.12"
-    mute-stream "^0.0.8"
-    run-async "^2.3.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.2.0"
-
-"@inquirer/input@^0.0.7-alpha.0":
-  version "0.0.7-alpha.0"
-  resolved "https://registry.yarnpkg.com/@inquirer/input/-/input-0.0.7-alpha.0.tgz#d5fc70050a3de56fa940699491ca7a7d8211431c"
-  integrity sha512-cFmWRpptVygvu4G2NlW+q5gZIa39cNft9IT6X5CSCuugUQpPPuwoODFFOn+wriblWOxRisUT7wONKtuhxz3clQ==
-  dependencies:
-    "@inquirer/core" "^0.0.7-alpha.0"
-    chalk "^2.4.1"
-
-"@inquirer/password@^0.0.6-alpha.0":
-  version "0.0.6-alpha.0"
-  resolved "https://registry.yarnpkg.com/@inquirer/password/-/password-0.0.6-alpha.0.tgz#4ba92ab85e9c08e25b8995c2e055b2ad12db490a"
-  integrity sha512-7GkMkDa4thQuRNFpFup0lapFAckU5ZW9k7O8A+wwJj7EItlNSJaJM/HKkXWlXAxB2Ce0nDdymfYSw4WLmHwPEg==
-  dependencies:
-    "@inquirer/input" "^0.0.7-alpha.0"
-    chalk "^2.4.1"
-
-ansi-escapes@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228"
-  integrity sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==
-  dependencies:
-    type-fest "^0.5.2"
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-camelcase@^5.0.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-spinners@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
-  integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
-
-cli-width@^2.0.0, cli-width@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
-  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-dotenv@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
-figures@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.0.0.tgz#756275c964646163cc6f9197c7a0295dbfd04de9"
-  integrity sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
-glob@^7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-graceful-fs@^4.1.6, graceful-fs@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
-  integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-iconv-lite@^0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-inquirer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.0.tgz#9e2b032dde77da1db5db804758b8fea3a970519a"
-  integrity sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-cursor "^3.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.15"
-    mute-stream "0.0.8"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-lodash@^4.17.12, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-mute-stream@0.0.8, mute-stream@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
-  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-p-limit@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
-  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
-run-async@^2.2.0, run-async@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
-  dependencies:
-    is-promise "^2.1.0"
-
-rxjs@^6.4.0:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
-  integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
-  dependencies:
-    tslib "^1.9.0"
-
-"safer-buffer@>= 2.1.2 < 3":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-signal-exit@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
-  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
-
-squirrelly@7:
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/squirrelly/-/squirrelly-7.9.2.tgz#f8b0a08201b73653351afe9f7f24878237d2751a"
-  integrity sha512-QsLQ43p7/p5LfhqMsUM1PP0DU/YuirA/pZ1RQKU8/qZjWHD8uTblpfPoCVkD9VLrS1jCJ+2gqECv3amlPgrLCA==
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string-width@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
-  integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^5.2.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
-tslib@^1.9.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
-type-fest@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
-  integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-uuid@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
-  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
-
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-y18n@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
-
-yargs-parser@^15.0.0:
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
-  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs@^14.2.0:
-  version "14.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.0.tgz#f116a9242c4ed8668790b40759b4906c276e76c3"
-  integrity sha512-/is78VKbKs70bVZH7w4YaZea6xcJWOAwkhbR0CFuZBmYtfTYF0xjGJF43AYd8g2Uii1yJwmS5GR2vBmrc32sbg==
-  dependencies:
-    cliui "^5.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^15.0.0"
diff --git a/packages/client/package.json b/packages/client/package.json
index dd5e48b905..3e16d3c33f 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",
diff --git a/packages/server/package.json b/packages/server/package.json
index e1853c38d5..893262418a 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -26,15 +26,14 @@
     "test": "jest --testPathIgnorePatterns=routes && npm run test:integration",
     "test:integration": "jest routes --runInBand",
     "test:watch": "jest --watch",
-    "initialise": "node ../cli/bin/budi init -q",
     "run:docker": "node src/index",
-    "budi": "node ../cli/bin/budi",
     "dev:builder": "nodemon src/index.js",
     "electron": "electron src/electron.js",
     "build:electron": "electron-builder --dir",
     "publish:electron": "electron-builder -mwl --publish always",
     "postinstall": "electron-builder install-app-deps",
-    "lint": "eslint --fix src/"
+    "lint": "eslint --fix src/",
+    "initialise": "node scripts/initialise.js"
   },
   "keywords": [
     "budibase"
@@ -42,7 +41,7 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.2.6",
+    "@budibase/client": "^0.3.1",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
diff --git a/packages/server/scripts/createApiKeyAndAppId.js b/packages/server/scripts/createApiKeyAndAppId.js
index 223253f19c..76b0893d30 100644
--- a/packages/server/scripts/createApiKeyAndAppId.js
+++ b/packages/server/scripts/createApiKeyAndAppId.js
@@ -1,5 +1,6 @@
 // THIS will create API Keys and App Ids input in a local Dynamo instance if it is running
 const dynamoClient = require("../src/db/dynamoClient")
+const env = require("../src/environment")
 
 if (process.argv[2] == null || process.argv[3] == null) {
   console.error(
@@ -11,8 +12,8 @@ if (process.argv[2] == null || process.argv[3] == null) {
 const FAKE_STRING = "fakestring"
 
 // set fake credentials for local dynamo to actually work
-process.env.AWS_ACCESS_KEY_ID = "KEY_ID"
-process.env.AWS_SECRET_ACCESS_KEY = "SECRET_KEY"
+env._set("AWS_ACCESS_KEY_ID", "KEY_ID")
+env._set("AWS_SECRET_ACCESS_KEY", "SECRET_KEY")
 dynamoClient.init("http://localhost:8333")
 
 async function run() {
diff --git a/packages/server/scripts/exportAppTemplate.js b/packages/server/scripts/exportAppTemplate.js
index 95ab8c718c..72ad797183 100755
--- a/packages/server/scripts/exportAppTemplate.js
+++ b/packages/server/scripts/exportAppTemplate.js
@@ -3,7 +3,7 @@ const { exportTemplateFromApp } = require("../src/utilities/templates")
 const yargs = require("yargs")
 
 // Script to export a chosen budibase app into a package
-// Usage: ./scripts/exportAppTemplate.js export --name=Funky --instanceId=someInstanceId --appId=appId
+// Usage: ./scripts/exportAppTemplate.js export --name=Funky --appId=someInstanceId --appId=appId
 
 yargs
   .command(
@@ -15,11 +15,6 @@ yargs
         alias: "n",
         type: "string",
       },
-      instanceId: {
-        description: "The instanceId to dump the database for",
-        alias: "inst",
-        type: "string",
-      },
       appId: {
         description: "The appId of the application you want to export",
         alias: "app",
@@ -30,7 +25,6 @@ yargs
       console.log("Exporting app..")
       const exportPath = await exportTemplateFromApp({
         templateName: args.name,
-        instanceId: args.instanceId,
         appId: args.appId,
       })
       console.log(`Template ${args.name} exported to ${exportPath}`)
diff --git a/packages/server/scripts/initialise.js b/packages/server/scripts/initialise.js
new file mode 100644
index 0000000000..485ebd56a0
--- /dev/null
+++ b/packages/server/scripts/initialise.js
@@ -0,0 +1,17 @@
+const { join } = require("path")
+const { homedir } = require("os")
+
+const initialiseBudibase = require("../src/utilities/initialiseBudibase")
+const DIRECTORY = "~/.budibase"
+
+function run() {
+  let opts = {}
+  let dir = DIRECTORY
+  opts.quiet = true
+  opts.dir = dir.startsWith("~") ? join(homedir(), dir.substring(1)) : dir
+  return initialiseBudibase(opts)
+}
+
+run().then(() => {
+  console.log("Init complete.")
+})
diff --git a/packages/server/scripts/jestSetup.js b/packages/server/scripts/jestSetup.js
index 8fc7082554..f2841d2709 100644
--- a/packages/server/scripts/jestSetup.js
+++ b/packages/server/scripts/jestSetup.js
@@ -1,7 +1,8 @@
 const { tmpdir } = require("os")
+const env = require("../src/environment")
 
-process.env.NODE_ENV = "jest"
-process.env.JWT_SECRET = "test-jwtsecret"
-process.env.CLIENT_ID = "test-client-id"
-process.env.BUDIBASE_DIR = tmpdir("budibase-unittests")
-process.env.LOG_LEVEL = "silent"
+env._set("NODE_ENV", "jest")
+env._set("JWT_SECRET", "test-jwtsecret")
+env._set("CLIENT_ID", "test-client-id")
+env._set("BUDIBASE_DIR", tmpdir("budibase-unittests"))
+env._set("LOG_LEVEL", "silent")
diff --git a/packages/server/scripts/replicateApp.js b/packages/server/scripts/replicateApp.js
index 3dba99a528..bbf44a7907 100644
--- a/packages/server/scripts/replicateApp.js
+++ b/packages/server/scripts/replicateApp.js
@@ -5,14 +5,7 @@
  * e.g. node scripts/replicateApp Mike http://admin:password@127.0.0.1:5984
  */
 
-const { resolve, join } = require("path")
-const { homedir } = require("os")
-const budibaseDir = join(homedir(), ".budibase")
-process.env.BUDIBASE_DIR = budibaseDir
-require("dotenv").config({ path: resolve(budibaseDir, ".env") })
-const env = require("../src/environment")
 const CouchDB = require("../src/db")
-const clientDbName = require("../src/db/clientDb").name(env.CLIENT_ID)
 
 const appName = process.argv[2].toLowerCase()
 const remoteUrl = process.argv[3]
@@ -20,27 +13,26 @@ const remoteUrl = process.argv[3]
 console.log(`Replicating from ${appName} to ${remoteUrl}/${appName}`)
 
 const run = async () => {
-  const clientDb = new CouchDB(clientDbName)
-
-  const body = await clientDb.query("client/by_type", {
-    include_docs: true,
-    key: ["app"],
-  })
-
-  const app = body.rows
-    .map(r => r.doc)
-    .find(a => a.name == appName || a.name.toLowerCase() === appName)
+  const allDbs = await CouchDB.allDbs()
+  const appDbNames = allDbs.filter(dbName => dbName.startsWith("inst_app"))
+  let apps = []
+  for (let dbName of appDbNames) {
+    const db = new CouchDB(dbName)
+    apps.push(db.get(dbName))
+  }
+  apps = await Promise.all(apps)
+  const app = apps.find(
+    a => a.name === appName || a.name.toLowerCase() === appName
+  )
 
   if (!app) {
     console.log(
-      `Could not find app... apps: ${body.rows.map(r => r.doc.name).join(", ")}`
+      `Could not find app... apps: ${apps.map(app => app.name).join(", ")}`
     )
     return
   }
 
-  const devInstance = app.instances.find(i => i.name === `dev-${env.CLIENT_ID}`)
-
-  const instanceDb = new CouchDB(devInstance._id)
+  const instanceDb = new CouchDB(app._id)
   const remoteDb = new CouchDB(`${remoteUrl}/${appName}`)
 
   instanceDb.replicate
diff --git a/packages/server/src/api/controllers/accesslevel.js b/packages/server/src/api/controllers/accesslevel.js
index ab145a1b76..143c633e42 100644
--- a/packages/server/src/api/controllers/accesslevel.js
+++ b/packages/server/src/api/controllers/accesslevel.js
@@ -11,7 +11,7 @@ const {
 } = require("../../db/utils")
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const body = await db.allDocs(
     getAccessLevelParams(null, {
       include_docs: true,
@@ -23,12 +23,12 @@ exports.fetch = async function(ctx) {
     {
       _id: ADMIN_LEVEL_ID,
       name: "Admin",
-      permissions: await generateAdminPermissions(ctx.user.instanceId),
+      permissions: await generateAdminPermissions(ctx.user.appId),
     },
     {
       _id: POWERUSER_LEVEL_ID,
       name: "Power User",
-      permissions: await generatePowerUserPermissions(ctx.user.instanceId),
+      permissions: await generatePowerUserPermissions(ctx.user.appId),
     },
   ]
 
@@ -36,12 +36,12 @@ exports.fetch = async function(ctx) {
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   ctx.body = await db.get(ctx.params.levelId)
 }
 
 exports.update = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const level = await db.get(ctx.params.levelId)
   level.name = ctx.body.name
   level.permissions = ctx.request.body.permissions
@@ -52,7 +52,7 @@ exports.update = async function(ctx) {
 }
 
 exports.patch = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const level = await db.get(ctx.params.levelId)
   const { removedPermissions, addedPermissions, _rev } = ctx.request.body
 
@@ -88,7 +88,7 @@ exports.patch = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
 
   const level = {
     name: ctx.request.body.name,
@@ -105,7 +105,7 @@ exports.create = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   await db.remove(ctx.params.levelId, ctx.params.rev)
   ctx.message = `Access Level ${ctx.params.id} deleted successfully`
   ctx.status = 200
diff --git a/packages/server/src/api/controllers/analytics.js b/packages/server/src/api/controllers/analytics.js
index 025775ac2e..566b4970e9 100644
--- a/packages/server/src/api/controllers/analytics.js
+++ b/packages/server/src/api/controllers/analytics.js
@@ -1,3 +1,5 @@
+const env = require("../../environment")
+
 exports.isEnabled = async function(ctx) {
-  ctx.body = JSON.stringify(process.env.ENABLE_ANALYTICS === "true")
+  ctx.body = JSON.stringify(env.ENABLE_ANALYTICS === "true")
 }
diff --git a/packages/server/src/api/controllers/apikeys.js b/packages/server/src/api/controllers/apikeys.js
index 11cf1493da..96754f17cc 100644
--- a/packages/server/src/api/controllers/apikeys.js
+++ b/packages/server/src/api/controllers/apikeys.js
@@ -2,21 +2,23 @@ const fs = require("fs")
 const { join } = require("../../utilities/centralPath")
 const readline = require("readline")
 const { budibaseAppsDir } = require("../../utilities/budibaseDir")
+const env = require("../../environment")
 const ENV_FILE_PATH = "/.env"
 
 exports.fetch = async function(ctx) {
   ctx.status = 200
   ctx.body = {
-    budibase: process.env.BUDIBASE_API_KEY,
-    userId: process.env.USERID_API_KEY,
+    budibase: env.BUDIBASE_API_KEY,
+    userId: env.USERID_API_KEY,
   }
 }
 
 exports.update = async function(ctx) {
   const key = `${ctx.params.key.toUpperCase()}_API_KEY`
   const value = ctx.request.body.value
-  // Set process.env
-  process.env[key] = value
+
+  // set environment variables
+  env._set(key, value)
 
   // Write to file
   await updateValues([key, value])
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 6e268c3f2e..66cde54fd6 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -1,8 +1,6 @@
 const CouchDB = require("../../db")
-const ClientDb = require("../../db/clientDb")
 const { getPackageForBuilder, buildPage } = require("../../utilities/builder")
 const env = require("../../environment")
-const instanceController = require("./instance")
 const { copy, existsSync, readFile, writeFile } = require("fs-extra")
 const { budibaseAppsDir } = require("../../utilities/budibaseDir")
 const sqrl = require("squirrelly")
@@ -11,89 +9,78 @@ const fs = require("fs-extra")
 const { join, resolve } = require("../../utilities/centralPath")
 const { promisify } = require("util")
 const chmodr = require("chmodr")
-const { generateAppID, getAppParams } = require("../../db/utils")
 const packageJson = require("../../../package.json")
+const { createLinkView } = require("../../db/linkedRows")
+const { downloadTemplate } = require("../../utilities/templates")
+const { generateAppID, DocumentTypes, SEPARATOR } = require("../../db/utils")
 const {
   downloadExtractComponentLibraries,
 } = require("../../utilities/createAppPackage")
+const APP_PREFIX = DocumentTypes.APP + SEPARATOR
+
+async function createInstance(template) {
+  const appId = generateAppID()
+
+  const db = new CouchDB(appId)
+  await db.put({
+    _id: "_design/database",
+    // view collation information, read before writing any complex views:
+    // https://docs.couchdb.org/en/master/ddocs/views/collation.html#collation-specification
+    views: {},
+  })
+  // add view for linked rows
+  await createLinkView(appId)
+
+  // replicate the template data to the instance DB
+  if (template) {
+    const templatePath = await downloadTemplate(...template.key.split("/"))
+    const dbDumpReadStream = fs.createReadStream(
+      join(templatePath, "db", "dump.txt")
+    )
+    const { ok } = await db.load(dbDumpReadStream)
+    if (!ok) {
+      throw "Error loading database dump from template."
+    }
+  }
+
+  return { _id: appId }
+}
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ClientDb.name(getClientId(ctx)))
-  const body = await db.allDocs(
-    getAppParams(null, {
-      include_docs: true,
-    })
-  )
-  ctx.body = body.rows.map(row => row.doc)
+  let allDbs = await CouchDB.allDbs()
+  const appDbNames = allDbs.filter(dbName => dbName.startsWith(APP_PREFIX))
+  const apps = appDbNames.map(db => new CouchDB(db).get(db))
+  if (apps.length === 0) {
+    ctx.body = []
+  } else {
+    ctx.body = await Promise.all(apps)
+  }
 }
 
 exports.fetchAppPackage = async function(ctx) {
-  const clientId = await lookupClientId(ctx.params.applicationId)
-  const db = new CouchDB(ClientDb.name(clientId))
-  const application = await db.get(ctx.params.applicationId)
+  const db = new CouchDB(ctx.params.appId)
+  const application = await db.get(ctx.params.appId)
   ctx.body = await getPackageForBuilder(ctx.config, application)
-  /* 
-  instance is hardcoded now - this can only change when we move
-  pages and screens into the database 
-  */
-  const devInstance = application.instances.find(
-    i => i.name === `dev-${clientId}`
-  )
-  setBuilderToken(
-    ctx,
-    ctx.params.applicationId,
-    devInstance._id,
-    application.version
-  )
+  setBuilderToken(ctx, ctx.params.appId, application.version)
 }
 
 exports.create = async function(ctx) {
-  const clientId =
-    (ctx.request.body && ctx.request.body.clientId) || env.CLIENT_ID
-
-  if (!clientId) {
-    ctx.throw(400, "ClientId not suplied")
-  }
-  const appId = generateAppID()
-  // insert an appId -> clientId lookup
-  const masterDb = new CouchDB("client_app_lookup")
-
-  await masterDb.put({
-    _id: appId,
-    clientId,
-  })
-
-  const db = new CouchDB(ClientDb.name(clientId))
-
+  const instance = await createInstance(ctx.request.body.template)
+  const appId = instance._id
   const newApplication = {
     _id: appId,
     type: "app",
-    instances: [],
     userInstanceMap: {},
     version: packageJson.version,
     componentLibraries: ["@budibase/standard-components"],
     name: ctx.request.body.name,
     template: ctx.request.body.template,
+    instance: instance,
   }
+  const instanceDb = new CouchDB(appId)
+  await instanceDb.put(newApplication)
 
-  const { rev } = await db.put(newApplication)
-  newApplication._rev = rev
-  const createInstCtx = {
-    user: {
-      appId: newApplication._id,
-    },
-    request: {
-      body: {
-        name: `dev-${clientId}`,
-        template: ctx.request.body.template,
-      },
-    },
-  }
-
-  await instanceController.create(createInstCtx)
-  newApplication.instances.push(createInstCtx.body)
-
-  if (process.env.NODE_ENV !== "jest") {
+  if (env.NODE_ENV !== "jest") {
     const newAppFolder = await createEmptyAppPackage(ctx, newApplication)
     await downloadExtractComponentLibraries(newAppFolder)
   }
@@ -104,9 +91,8 @@ exports.create = async function(ctx) {
 }
 
 exports.update = async function(ctx) {
-  const clientId = await lookupClientId(ctx.params.applicationId)
-  const db = new CouchDB(ClientDb.name(clientId))
-  const application = await db.get(ctx.params.applicationId)
+  const db = new CouchDB(ctx.params.appId)
+  const application = await db.get(ctx.params.appId)
 
   const data = ctx.request.body
   const newData = { ...application, ...data }
@@ -120,16 +106,12 @@ exports.update = async function(ctx) {
 }
 
 exports.delete = async function(ctx) {
-  const db = new CouchDB(ClientDb.name(getClientId(ctx)))
-  const app = await db.get(ctx.params.applicationId)
-  const result = await db.remove(app)
-  for (let instance of app.instances) {
-    const instanceDb = new CouchDB(instance._id)
-    await instanceDb.destroy()
-  }
+  const db = new CouchDB(ctx.params.appId)
+  const app = await db.get(ctx.params.appId)
+  const result = await db.destroy()
 
   // remove top level directory
-  await fs.rmdir(join(budibaseAppsDir(), ctx.params.applicationId), {
+  await fs.rmdir(join(budibaseAppsDir(), ctx.params.appId), {
     recursive: true,
   })
 
@@ -222,24 +204,6 @@ const loadScreens = async (appFolder, page) => {
   return screens
 }
 
-const lookupClientId = async appId => {
-  const masterDb = new CouchDB("client_app_lookup")
-  const { clientId } = await masterDb.get(appId)
-  return clientId
-}
-
-const getClientId = ctx => {
-  const clientId =
-    (ctx.request.body && ctx.request.body.clientId) ||
-    (ctx.query && ctx.query.clientId) ||
-    env.CLIENT_ID
-
-  if (!clientId) {
-    ctx.throw(400, "ClientId not supplied")
-  }
-  return clientId
-}
-
 const updateJsonFile = async (filePath, app) => {
   const json = await readFile(filePath, "utf8")
   const newJson = sqrl.Render(json, app)
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index f56e8816c8..9576d22da1 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -1,44 +1,26 @@
 const jwt = require("jsonwebtoken")
 const CouchDB = require("../../db")
-const ClientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
-const environment = require("../../environment")
+const env = require("../../environment")
 const { getAPIKey } = require("../../utilities/usageQuota")
 const { generateUserID } = require("../../db/utils")
 
 exports.authenticate = async ctx => {
-  if (!ctx.user.appId) ctx.throw(400, "No appId")
+  const appId = ctx.user.appId
+  if (!appId) ctx.throw(400, "No appId")
 
   const { username, password } = ctx.request.body
 
   if (!username) ctx.throw(400, "Username Required.")
-  if (!password) ctx.throw(400, "Password Required")
-
-  const masterDb = new CouchDB("client_app_lookup")
-
-  const { clientId } = await masterDb.get(ctx.user.appId)
-
-  if (!clientId) {
-    ctx.throw(400, "ClientId not supplied")
-  }
-  // find the instance that the user is associated with
-  const db = new CouchDB(ClientDb.name(clientId))
-  const app = await db.get(ctx.user.appId)
-  const instanceId = app.userInstanceMap[username]
-
-  if (!instanceId)
-    ctx.throw(
-      500,
-      "User is not associated with an instance of app",
-      ctx.user.appId
-    )
+  if (!password) ctx.throw(400, "Password Required.")
 
   // Check the user exists in the instance DB by username
-  const instanceDb = new CouchDB(instanceId)
+  const db = new CouchDB(appId)
+  const app = await db.get(appId)
 
   let dbUser
   try {
-    dbUser = await instanceDb.get(generateUserID(username))
+    dbUser = await db.get(generateUserID(username))
   } catch (_) {
     // do not want to throw a 404 - as this could be
     // used to determine valid usernames
@@ -50,12 +32,11 @@ exports.authenticate = async ctx => {
     const payload = {
       userId: dbUser._id,
       accessLevelId: dbUser.accessLevelId,
-      appId: ctx.user.appId,
       version: app.version,
-      instanceId,
+      appId,
     }
     // if in cloud add the user api key
-    if (environment.CLOUD) {
+    if (env.CLOUD) {
       const { apiKey } = await getAPIKey(ctx.user.appId)
       payload.apiKey = apiKey
     }
diff --git a/packages/server/src/api/controllers/automation.js b/packages/server/src/api/controllers/automation.js
index 2127c0a661..5fa618654b 100644
--- a/packages/server/src/api/controllers/automation.js
+++ b/packages/server/src/api/controllers/automation.js
@@ -56,7 +56,7 @@ async function checkForWebhooks({ user, oldAuto, newAuto }) {
     !isWebhookTrigger(newAuto) &&
     oldTrigger.webhookId
   ) {
-    let db = new CouchDB(user.instanceId)
+    let db = new CouchDB(user.appId)
     // need to get the webhook to get the rev
     const webhook = await db.get(oldTrigger.webhookId)
     const ctx = {
@@ -86,15 +86,15 @@ async function checkForWebhooks({ user, oldAuto, newAuto }) {
     const id = ctx.body.webhook._id
     newTrigger.webhookId = id
     newTrigger.inputs = {
-      schemaUrl: `api/webhooks/schema/${user.instanceId}/${id}`,
-      triggerUrl: `api/webhooks/trigger/${user.instanceId}/${id}`,
+      schemaUrl: `api/webhooks/schema/${user.appId}/${id}`,
+      triggerUrl: `api/webhooks/trigger/${user.appId}/${id}`,
     }
   }
   return newAuto
 }
 
 exports.create = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   let automation = ctx.request.body
   automation.appId = ctx.user.appId
 
@@ -117,7 +117,7 @@ exports.create = async function(ctx) {
 }
 
 exports.update = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   let automation = ctx.request.body
   automation.appId = ctx.user.appId
   const oldAutomation = await db.get(automation._id)
@@ -142,7 +142,7 @@ exports.update = async function(ctx) {
 }
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const response = await db.allDocs(
     getAutomationParams(null, {
       include_docs: true,
@@ -152,12 +152,12 @@ exports.fetch = async function(ctx) {
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   ctx.body = await db.get(ctx.params.id)
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const oldAutomation = await db.get(ctx.params.id)
   await checkForWebhooks({ user: ctx.user, oldAuto: oldAutomation })
   ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
@@ -190,11 +190,11 @@ module.exports.getDefinitionList = async function(ctx) {
  *********************/
 
 exports.trigger = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   let automation = await db.get(ctx.params.id)
   await triggers.externalTrigger(automation, {
     ...ctx.request.body,
-    instanceId: ctx.user.instanceId,
+    appId: ctx.user.appId,
   })
   ctx.status = 200
   ctx.body = {
diff --git a/packages/server/src/api/controllers/client.js b/packages/server/src/api/controllers/client.js
deleted file mode 100644
index 31f901001a..0000000000
--- a/packages/server/src/api/controllers/client.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const { create, destroy } = require("../../db/clientDb")
-const env = require("../../environment")
-
-exports.getClientId = async function(ctx) {
-  ctx.body = env.CLIENT_ID
-}
-
-exports.create = async function(ctx) {
-  const clientId = getClientId(ctx)
-  await create(clientId)
-  ctx.status = 200
-  ctx.message = `Client Database ${clientId} successfully provisioned.`
-}
-
-exports.destroy = async function(ctx) {
-  const clientId = getClientId(ctx)
-  await destroy(clientId)
-  ctx.status = 200
-  ctx.message = `Client Database ${clientId} successfully deleted.`
-}
-
-const getClientId = ctx => {
-  const clientId =
-    (ctx.query && ctx.query.clientId) ||
-    (ctx.body && ctx.body.clientId) ||
-    env.CLIENT_ID
-  if (!clientId) {
-    ctx.throw(400, "ClientId not supplied")
-  }
-  return clientId
-}
diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index 9c5e0df151..c58e40eadc 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -1,5 +1,4 @@
 const CouchDB = require("../../db")
-const ClientDb = require("../../db/clientDb")
 const { resolve, join } = require("../../utilities/centralPath")
 const {
   budibaseTempDir,
@@ -7,49 +6,42 @@ const {
 } = require("../../utilities/budibaseDir")
 
 exports.fetchAppComponentDefinitions = async function(ctx) {
-  const masterDb = new CouchDB("client_app_lookup")
-  const { clientId } = await masterDb.get(ctx.params.appId)
-  const db = new CouchDB(ClientDb.name(clientId))
+  const db = new CouchDB(ctx.params.appId)
   const app = await db.get(ctx.params.appId)
 
-  const componentDefinitions = app.componentLibraries.reduce(
-    (acc, componentLibrary) => {
-      let appDirectory = resolve(
-        budibaseAppsDir(),
-        ctx.params.appId,
-        "node_modules"
-      )
+  ctx.body = app.componentLibraries.reduce((acc, componentLibrary) => {
+    let appDirectory = resolve(
+      budibaseAppsDir(),
+      ctx.params.appId,
+      "node_modules"
+    )
 
-      if (ctx.isDev) {
-        appDirectory = budibaseTempDir()
+    if (ctx.isDev) {
+      appDirectory = budibaseTempDir()
+    }
+
+    const componentJson = require(join(
+      appDirectory,
+      componentLibrary,
+      ctx.isDev ? "" : "package",
+      "components.json"
+    ))
+
+    const result = {}
+
+    // map over the components.json and add the library identifier as a key
+    // button -> @budibase/standard-components/button
+    for (let key of Object.keys(componentJson)) {
+      const fullComponentName = `${componentLibrary}/${key}`
+      result[fullComponentName] = {
+        _component: fullComponentName,
+        ...componentJson[key],
       }
+    }
 
-      const componentJson = require(join(
-        appDirectory,
-        componentLibrary,
-        ctx.isDev ? "" : "package",
-        "components.json"
-      ))
-
-      const result = {}
-
-      // map over the components.json and add the library identifier as a key
-      // button -> @budibase/standard-components/button
-      for (key in componentJson) {
-        const fullComponentName = `${componentLibrary}/${key}`
-        result[fullComponentName] = {
-          _component: fullComponentName,
-          ...componentJson[key],
-        }
-      }
-
-      return {
-        ...acc,
-        ...result,
-      }
-    },
-    {}
-  )
-
-  ctx.body = componentDefinitions
+    return {
+      ...acc,
+      ...result,
+    }
+  }, {})
 }
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 30ee86846b..3e19812a00 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -6,7 +6,7 @@ const uuid = require("uuid")
 const sanitize = require("sanitize-s3-objectkey")
 const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
 const PouchDB = require("../../../db")
-const environment = require("../../../environment")
+const env = require("../../../environment")
 
 async function invalidateCDN(cfDistribution, appId) {
   const cf = new AWS.CloudFront({})
@@ -44,12 +44,12 @@ exports.isInvalidationComplete = async function(
 
 exports.updateDeploymentQuota = async function(quota) {
   const DEPLOYMENT_SUCCESS_URL =
-    environment.DEPLOYMENT_CREDENTIALS_URL + "deploy/success"
+    env.DEPLOYMENT_CREDENTIALS_URL + "deploy/success"
 
   const response = await fetch(DEPLOYMENT_SUCCESS_URL, {
     method: "POST",
     body: JSON.stringify({
-      apiKey: process.env.BUDIBASE_API_KEY,
+      apiKey: env.BUDIBASE_API_KEY,
       quota,
     }),
     headers: {
@@ -62,24 +62,21 @@ exports.updateDeploymentQuota = async function(quota) {
     throw new Error(`Error updating deployment quota for API Key`)
   }
 
-  const json = await response.json()
-
-  return json
+  return await response.json()
 }
 
 /**
  * Verifies the users API key and
  * Verifies that the deployment fits within the quota of the user,
- * @param {String} instanceId - instanceId being deployed
+ * @param {String} appId - appId being deployed
  * @param {String} appId - appId being deployed
  * @param {quota} quota - current quota being changed with this application
  */
-exports.verifyDeployment = async function({ instanceId, appId, quota }) {
-  const response = await fetch(process.env.DEPLOYMENT_CREDENTIALS_URL, {
+exports.verifyDeployment = async function({ appId, quota }) {
+  const response = await fetch(env.DEPLOYMENT_CREDENTIALS_URL, {
     method: "POST",
     body: JSON.stringify({
-      apiKey: process.env.BUDIBASE_API_KEY,
-      instanceId,
+      apiKey: env.BUDIBASE_API_KEY,
       appId,
       quota,
     }),
@@ -87,7 +84,7 @@ exports.verifyDeployment = async function({ instanceId, appId, quota }) {
 
   if (response.status !== 200) {
     throw new Error(
-      `Error fetching temporary credentials for api key: ${process.env.BUDIBASE_API_KEY}`
+      `Error fetching temporary credentials for api key: ${env.BUDIBASE_API_KEY}`
     )
   }
 
@@ -159,7 +156,6 @@ exports.prepareUploadForS3 = prepareUploadForS3
 
 exports.uploadAppAssets = async function({
   appId,
-  instanceId,
   bucket,
   cfDistribution,
   accountId,
@@ -193,7 +189,7 @@ exports.uploadAppAssets = async function({
   }
 
   // Upload file attachments
-  const db = new PouchDB(instanceId)
+  const db = new PouchDB(appId)
   let fileUploads
   try {
     fileUploads = await db.get("_local/fileuploads")
diff --git a/packages/server/src/api/controllers/deploy/index.js b/packages/server/src/api/controllers/deploy/index.js
index ceae868749..8b4bb003aa 100644
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@@ -8,6 +8,7 @@ const {
 } = require("./aws")
 const { DocumentTypes, SEPARATOR, UNICODE_MAX } = require("../../../db/utils")
 const newid = require("../../../db/newid")
+const env = require("../../../environment")
 
 // the max time we can wait for an invalidation to complete before considering it failed
 const MAX_PENDING_TIME_MS = 30 * 60000
@@ -80,29 +81,20 @@ function replicate(local, remote) {
   })
 }
 
-async function replicateCouch({ instanceId, clientId, session }) {
-  const databases = [`client_${clientId}`, "client_app_lookup", instanceId]
-
-  const replications = databases.map(localDbName => {
-    const localDb = new PouchDB(localDbName)
-    const remoteDb = new CouchDB(
-      `${process.env.DEPLOYMENT_DB_URL}/${localDbName}`,
-      {
-        fetch: function(url, opts) {
-          opts.headers.set("Cookie", `${session};`)
-          return CouchDB.fetch(url, opts)
-        },
-      }
-    )
-
-    return replicate(localDb, remoteDb)
+async function replicateCouch({ appId, session }) {
+  const localDb = new PouchDB(appId)
+  const remoteDb = new CouchDB(`${env.DEPLOYMENT_DB_URL}/${appId}`, {
+    fetch: function(url, opts) {
+      opts.headers.set("Cookie", `${session};`)
+      return CouchDB.fetch(url, opts)
+    },
   })
 
-  await Promise.all(replications)
+  return replicate(localDb, remoteDb)
 }
 
-async function getCurrentInstanceQuota(instanceId) {
-  const db = new PouchDB(instanceId)
+async function getCurrentInstanceQuota(appId) {
+  const db = new PouchDB(appId)
 
   const rows = await db.allDocs({
     startkey: DocumentTypes.ROW + SEPARATOR,
@@ -127,7 +119,7 @@ async function getCurrentInstanceQuota(instanceId) {
 }
 
 async function storeLocalDeploymentHistory(deployment) {
-  const db = new PouchDB(deployment.instanceId)
+  const db = new PouchDB(deployment.appId)
 
   let deploymentDoc
   try {
@@ -155,11 +147,10 @@ async function storeLocalDeploymentHistory(deployment) {
   }
 }
 
-async function deployApp({ instanceId, appId, clientId, deploymentId }) {
+async function deployApp({ appId, deploymentId }) {
   try {
-    const instanceQuota = await getCurrentInstanceQuota(instanceId)
+    const instanceQuota = await getCurrentInstanceQuota(appId)
     const verification = await verifyDeployment({
-      instanceId,
       appId,
       quota: instanceQuota,
     })
@@ -167,17 +158,14 @@ async function deployApp({ instanceId, appId, clientId, deploymentId }) {
     console.log(`Uploading assets for appID ${appId} assets to s3..`)
 
     const invalidationId = await uploadAppAssets({
-      clientId,
       appId,
-      instanceId,
       ...verification,
     })
 
     // replicate the DB to the couchDB cluster in prod
     console.log("Replicating local PouchDB to remote..")
     await replicateCouch({
-      instanceId,
-      clientId,
+      appId,
       session: verification.couchDbSession,
     })
 
@@ -185,7 +173,7 @@ async function deployApp({ instanceId, appId, clientId, deploymentId }) {
 
     await storeLocalDeploymentHistory({
       _id: deploymentId,
-      instanceId,
+      appId,
       invalidationId,
       cfDistribution: verification.cfDistribution,
       quota: verification.quota,
@@ -194,7 +182,7 @@ async function deployApp({ instanceId, appId, clientId, deploymentId }) {
   } catch (err) {
     await storeLocalDeploymentHistory({
       _id: deploymentId,
-      instanceId,
+      appId,
       status: DeploymentStatus.FAILURE,
       err: err.message,
     })
@@ -204,7 +192,7 @@ async function deployApp({ instanceId, appId, clientId, deploymentId }) {
 
 exports.fetchDeployments = async function(ctx) {
   try {
-    const db = new PouchDB(ctx.user.instanceId)
+    const db = new PouchDB(ctx.user.appId)
     const deploymentDoc = await db.get("_local/deployments")
     const { updated, deployments } = await checkAllDeployments(
       deploymentDoc,
@@ -221,7 +209,7 @@ exports.fetchDeployments = async function(ctx) {
 
 exports.deploymentProgress = async function(ctx) {
   try {
-    const db = new PouchDB(ctx.user.instanceId)
+    const db = new PouchDB(ctx.user.appId)
     const deploymentDoc = await db.get("_local/deployments")
     ctx.body = deploymentDoc[ctx.params.deploymentId]
   } catch (err) {
@@ -233,18 +221,13 @@ exports.deploymentProgress = async function(ctx) {
 }
 
 exports.deployApp = async function(ctx) {
-  const clientAppLookupDB = new PouchDB("client_app_lookup")
-  const { clientId } = await clientAppLookupDB.get(ctx.user.appId)
-
   const deployment = await storeLocalDeploymentHistory({
-    instanceId: ctx.user.instanceId,
     appId: ctx.user.appId,
     status: DeploymentStatus.PENDING,
   })
 
   await deployApp({
     ...ctx.user,
-    clientId,
     deploymentId: deployment._id,
   })
 
diff --git a/packages/server/src/api/controllers/instance.js b/packages/server/src/api/controllers/instance.js
deleted file mode 100644
index fbee2f72f5..0000000000
--- a/packages/server/src/api/controllers/instance.js
+++ /dev/null
@@ -1,73 +0,0 @@
-const fs = require("fs")
-const CouchDB = require("../../db")
-const client = require("../../db/clientDb")
-const newid = require("../../db/newid")
-const { createLinkView } = require("../../db/linkedRows")
-const { join } = require("../../utilities/centralPath")
-const { downloadTemplate } = require("../../utilities/templates")
-
-exports.create = async function(ctx) {
-  const instanceName = ctx.request.body.name
-  const template = ctx.request.body.template
-  const { appId } = ctx.user
-  const appShortId = appId.substring(0, 7)
-  const instanceId = `inst_${appShortId}_${newid()}`
-
-  const masterDb = new CouchDB("client_app_lookup")
-  const { clientId } = await masterDb.get(appId)
-
-  const db = new CouchDB(instanceId)
-  await db.put({
-    _id: "_design/database",
-    metadata: {
-      clientId,
-      applicationId: appId,
-    },
-    // view collation information, read before writing any complex views:
-    // https://docs.couchdb.org/en/master/ddocs/views/collation.html#collation-specification
-    views: {},
-  })
-  // add view for linked rows
-  await createLinkView(instanceId)
-
-  // Add the new instance under the app clientDB
-  const clientDb = new CouchDB(client.name(clientId))
-  const budibaseApp = await clientDb.get(appId)
-  const instance = { _id: instanceId, name: instanceName }
-  budibaseApp.instances.push(instance)
-  await clientDb.put(budibaseApp)
-
-  // replicate the template data to the instance DB
-  if (template) {
-    const templatePath = await downloadTemplate(...template.key.split("/"))
-    const dbDumpReadStream = fs.createReadStream(
-      join(templatePath, "db", "dump.txt")
-    )
-    const { ok } = await db.load(dbDumpReadStream)
-    if (!ok) {
-      ctx.throw(500, "Error loading database dump from template.")
-    }
-  }
-
-  ctx.status = 200
-  ctx.message = `Instance Database ${instanceName} successfully provisioned.`
-  ctx.body = instance
-}
-
-exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.params.instanceId)
-  const designDoc = await db.get("_design/database")
-  await db.destroy()
-
-  // remove instance from client application document
-  const { metadata } = designDoc
-  const clientDb = new CouchDB(client.name(metadata.clientId))
-  const budibaseApp = await clientDb.get(metadata.applicationId)
-  budibaseApp.instances = budibaseApp.instances.filter(
-    instance => instance !== ctx.params.instanceId
-  )
-  await clientDb.put(budibaseApp)
-
-  ctx.status = 200
-  ctx.message = `Instance Database ${ctx.params.instanceId} successfully destroyed.`
-}
diff --git a/packages/server/src/api/controllers/row.js b/packages/server/src/api/controllers/row.js
index 1e12bf7a78..ccf26b02e2 100644
--- a/packages/server/src/api/controllers/row.js
+++ b/packages/server/src/api/controllers/row.js
@@ -28,8 +28,8 @@ validateJs.extend(validateJs.validators.datetime, {
 })
 
 exports.patch = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   let row = await db.get(ctx.params.id)
   const table = await db.get(row.tableId)
   const patchfields = ctx.request.body
@@ -56,7 +56,7 @@ exports.patch = async function(ctx) {
 
   // returned row is cleaned and prepared for writing to DB
   row = await linkRows.updateLinks({
-    instanceId,
+    appId,
     eventType: linkRows.EventType.ROW_UPDATE,
     row,
     tableId: row.tableId,
@@ -66,16 +66,15 @@ exports.patch = async function(ctx) {
   row._rev = response.rev
   row.type = "row"
 
-  ctx.eventEmitter &&
-    ctx.eventEmitter.emitRow(`row:update`, instanceId, row, table)
+  ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:update`, appId, row, table)
   ctx.body = row
   ctx.status = 200
   ctx.message = `${table.name} updated successfully.`
 }
 
 exports.save = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   let row = ctx.request.body
   row.tableId = ctx.params.tableId
 
@@ -112,7 +111,7 @@ exports.save = async function(ctx) {
 
   // make sure link rows are up to date
   row = await linkRows.updateLinks({
-    instanceId,
+    appId,
     eventType: linkRows.EventType.ROW_SAVE,
     row,
     tableId: row.tableId,
@@ -133,16 +132,15 @@ exports.save = async function(ctx) {
   const response = await db.post(row)
   row._rev = response.rev
 
-  ctx.eventEmitter &&
-    ctx.eventEmitter.emitRow(`row:save`, instanceId, row, table)
+  ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:save`, appId, row, table)
   ctx.body = row
   ctx.status = 200
   ctx.message = `${table.name} created successfully`
 }
 
 exports.fetchView = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const { calculation, group, field } = ctx.query
   const viewName = ctx.params.viewName
 
@@ -160,7 +158,7 @@ exports.fetchView = async function(ctx) {
 
   if (!calculation) {
     response.rows = response.rows.map(row => row.doc)
-    ctx.body = await linkRows.attachLinkInfo(instanceId, response.rows)
+    ctx.body = await linkRows.attachLinkInfo(appId, response.rows)
   }
 
   if (calculation === CALCULATION_TYPES.STATS) {
@@ -186,8 +184,8 @@ exports.fetchView = async function(ctx) {
 }
 
 exports.fetchTableRows = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const response = await db.allDocs(
     getRowParams(ctx.params.tableId, null, {
       include_docs: true,
@@ -195,45 +193,45 @@ exports.fetchTableRows = async function(ctx) {
   )
   ctx.body = response.rows.map(row => row.doc)
   ctx.body = await linkRows.attachLinkInfo(
-    instanceId,
+    appId,
     response.rows.map(row => row.doc)
   )
 }
 
 exports.search = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const response = await db.allDocs({
     include_docs: true,
     ...ctx.request.body,
   })
   ctx.body = await linkRows.attachLinkInfo(
-    instanceId,
+    appId,
     response.rows.map(row => row.doc)
   )
 }
 
 exports.find = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const row = await db.get(ctx.params.rowId)
   if (row.tableId !== ctx.params.tableId) {
     ctx.throw(400, "Supplied tableId does not match the rows tableId")
     return
   }
-  ctx.body = await linkRows.attachLinkInfo(instanceId, row)
+  ctx.body = await linkRows.attachLinkInfo(appId, row)
 }
 
 exports.destroy = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const row = await db.get(ctx.params.rowId)
   if (row.tableId !== ctx.params.tableId) {
     ctx.throw(400, "Supplied tableId doesn't match the row's tableId")
     return
   }
   await linkRows.updateLinks({
-    instanceId,
+    appId,
     eventType: linkRows.EventType.ROW_DELETE,
     row,
     tableId: row.tableId,
@@ -243,12 +241,12 @@ exports.destroy = async function(ctx) {
 
   // for automations include the row that was deleted
   ctx.row = row
-  ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, instanceId, row)
+  ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
 }
 
 exports.validate = async function(ctx) {
   const errors = await validate({
-    instanceId: ctx.user.instanceId,
+    appId: ctx.user.appId,
     tableId: ctx.params.tableId,
     row: ctx.request.body,
   })
@@ -256,9 +254,9 @@ exports.validate = async function(ctx) {
   ctx.body = errors
 }
 
-async function validate({ instanceId, tableId, row, table }) {
+async function validate({ appId, tableId, row, table }) {
   if (!table) {
-    const db = new CouchDB(instanceId)
+    const db = new CouchDB(appId)
     table = await db.get(tableId)
   }
   const errors = {}
@@ -273,11 +271,11 @@ async function validate({ instanceId, tableId, row, table }) {
 }
 
 exports.fetchEnrichedRow = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const tableId = ctx.params.tableId
   const rowId = ctx.params.rowId
-  if (instanceId == null || tableId == null || rowId == null) {
+  if (appId == null || tableId == null || rowId == null) {
     ctx.status = 400
     ctx.body = {
       status: 400,
@@ -290,7 +288,7 @@ exports.fetchEnrichedRow = async function(ctx) {
   const [table, row] = await Promise.all([db.get(tableId), db.get(rowId)])
   // get the link docs
   const linkVals = await linkRows.getLinkDocuments({
-    instanceId,
+    appId,
     tableId,
     rowId,
   })
@@ -301,7 +299,7 @@ exports.fetchEnrichedRow = async function(ctx) {
   })
   // need to include the IDs in these rows for any links they may have
   let linkedRows = await linkRows.attachLinkInfo(
-    instanceId,
+    appId,
     response.rows.map(row => row.doc)
   )
   // insert the link rows in the correct place throughout the main row
@@ -375,13 +373,13 @@ const TYPE_TRANSFORM_MAP = {
 }
 
 async function bulkDelete(ctx) {
-  const instanceId = ctx.user.instanceId
+  const appId = ctx.user.appId
   const { rows } = ctx.request.body
-  const db = new CouchDB(instanceId)
+  const db = new CouchDB(appId)
 
   const linkUpdates = rows.map(row =>
     linkRows.updateLinks({
-      instanceId,
+      appId,
       eventType: linkRows.EventType.ROW_DELETE,
       row,
       tableId: row.tableId,
@@ -392,6 +390,6 @@ async function bulkDelete(ctx) {
   await Promise.all(linkUpdates)
 
   rows.forEach(row => {
-    ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, instanceId, row)
+    ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
   })
 }
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 791acc8d92..1ebe169417 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -13,6 +13,7 @@ const CouchDB = require("../../db")
 const setBuilderToken = require("../../utilities/builder/setBuilderToken")
 const fileProcessor = require("../../utilities/fileProcessor")
 const { AuthTypes } = require("../../constants")
+const env = require("../../environment")
 
 // this was the version before we started versioning the component library
 const COMP_LIB_BASE_APP_VERSION = "0.2.5"
@@ -38,7 +39,7 @@ exports.uploadFile = async function(ctx) {
     "attachments"
   )
 
-  if (process.env.CLOUD) {
+  if (env.CLOUD) {
     // remote upload
     const s3 = new AWS.S3({
       params: {
@@ -64,11 +65,11 @@ exports.uploadFile = async function(ctx) {
   ctx.body = await processLocalFileUploads({
     files,
     outputPath: attachmentsPath,
-    instanceId: ctx.user.instanceId,
+    appId: ctx.user.appId,
   })
 }
 
-async function processLocalFileUploads({ files, outputPath, instanceId }) {
+async function processLocalFileUploads({ files, outputPath, appId }) {
   // create attachments dir if it doesnt exist
   !fs.existsSync(outputPath) && fs.mkdirSync(outputPath, { recursive: true })
 
@@ -97,7 +98,7 @@ async function processLocalFileUploads({ files, outputPath, instanceId }) {
   // local document used to track which files need to be uploaded
   // db.get throws an error if the document doesn't exist
   // need to use a promise to default
-  const db = new CouchDB(instanceId)
+  const db = new CouchDB(appId)
   await db
     .get("_local/fileuploads")
     .then(data => {
@@ -129,7 +130,7 @@ exports.performLocalFileProcessing = async function(ctx) {
     ctx.body = await processLocalFileUploads({
       files,
       outputPath: processedFileOutputPath,
-      instanceId: ctx.user.instanceId,
+      appId: ctx.user.appId,
     })
   } catch (err) {
     ctx.throw(500, err)
@@ -150,7 +151,7 @@ exports.serveApp = async function(ctx) {
 
   const appId = ctx.user.appId
 
-  if (process.env.CLOUD) {
+  if (env.CLOUD) {
     const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/${mainOrAuth}/${ctx.file ||
       "index.production.html"}`
 
@@ -168,7 +169,7 @@ exports.serveAttachment = async function(ctx) {
   const attachmentsPath = resolve(budibaseAppsDir(), appId, "attachments")
 
   // Serve from CloudFront
-  if (process.env.CLOUD) {
+  if (env.CLOUD) {
     const S3_URL = `https://cdn.app.budi.live/assets/${appId}/attachments/${ctx.file}`
     const response = await fetch(S3_URL)
     const body = await response.text()
@@ -214,7 +215,7 @@ exports.serveComponentLibrary = async function(ctx) {
     )
   }
 
-  if (process.env.CLOUD) {
+  if (env.CLOUD) {
     let componentLib = "componentlibrary"
     if (ctx.user.version) {
       componentLib += `-${ctx.user.version}`
diff --git a/packages/server/src/api/controllers/table.js b/packages/server/src/api/controllers/table.js
index 61726d591a..f7021974c5 100644
--- a/packages/server/src/api/controllers/table.js
+++ b/packages/server/src/api/controllers/table.js
@@ -9,7 +9,7 @@ const {
 } = require("../../db/utils")
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const body = await db.allDocs(
     getTableParams(null, {
       include_docs: true,
@@ -19,13 +19,13 @@ exports.fetch = async function(ctx) {
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   ctx.body = await db.get(ctx.params.id)
 }
 
 exports.save = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const { dataImport, ...rest } = ctx.request.body
   const tableToSave = {
     type: "table",
@@ -90,7 +90,7 @@ exports.save = async function(ctx) {
 
   // update linked rows
   await linkRows.updateLinks({
-    instanceId,
+    appId,
     eventType: oldTable
       ? linkRows.EventType.TABLE_UPDATED
       : linkRows.EventType.TABLE_SAVE,
@@ -107,7 +107,7 @@ exports.save = async function(ctx) {
   tableToSave._rev = result.rev
 
   ctx.eventEmitter &&
-    ctx.eventEmitter.emitTable(`table:save`, instanceId, tableToSave)
+    ctx.eventEmitter.emitTable(`table:save`, appId, tableToSave)
 
   if (dataImport && dataImport.csvString) {
     // Populate the table with rows imported from CSV in a bulk update
@@ -127,8 +127,8 @@ exports.save = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const instanceId = ctx.user.instanceId
-  const db = new CouchDB(instanceId)
+  const appId = ctx.user.appId
+  const db = new CouchDB(appId)
   const tableToDelete = await db.get(ctx.params.tableId)
 
   // Delete all rows for that table
@@ -141,7 +141,7 @@ exports.destroy = async function(ctx) {
 
   // update linked rows
   await linkRows.updateLinks({
-    instanceId,
+    appId,
     eventType: linkRows.EventType.TABLE_DELETE,
     table: tableToDelete,
   })
@@ -150,7 +150,7 @@ exports.destroy = async function(ctx) {
   await db.remove(tableToDelete)
 
   ctx.eventEmitter &&
-    ctx.eventEmitter.emitTable(`table:delete`, instanceId, tableToDelete)
+    ctx.eventEmitter.emitTable(`table:delete`, appId, tableToDelete)
   ctx.status = 200
   ctx.message = `Table ${ctx.params.tableId} deleted.`
 }
diff --git a/packages/server/src/api/controllers/templates.js b/packages/server/src/api/controllers/templates.js
index c7be43b4e3..8e21b3c18b 100644
--- a/packages/server/src/api/controllers/templates.js
+++ b/packages/server/src/api/controllers/templates.js
@@ -28,12 +28,11 @@ exports.downloadTemplate = async function(ctx) {
 }
 
 exports.exportTemplateFromApp = async function(ctx) {
-  const { appId, instanceId } = ctx.user
+  const { appId } = ctx.user
   const { templateName } = ctx.request.body
 
   await exportTemplateFromApp({
     appId,
-    instanceId,
     templateName,
   })
 
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 4e749f0ff7..da0adff895 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -1,5 +1,4 @@
 const CouchDB = require("../../db")
-const clientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
 const { generateUserID, getUserParams } = require("../../db/utils")
 const {
@@ -8,7 +7,7 @@ const {
 } = require("../../utilities/accessLevels")
 
 exports.fetch = async function(ctx) {
-  const database = new CouchDB(ctx.user.instanceId)
+  const database = new CouchDB(ctx.user.appId)
   const data = await database.allDocs(
     getUserParams(null, {
       include_docs: true,
@@ -18,15 +17,14 @@ exports.fetch = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
-  const database = new CouchDB(ctx.user.instanceId)
-  const appId = (await database.get("_design/database")).metadata.applicationId
+  const db = new CouchDB(ctx.user.appId)
   const { username, password, name, accessLevelId } = ctx.request.body
 
   if (!username || !password) {
     ctx.throw(400, "Username and Password Required.")
   }
 
-  const accessLevel = await checkAccessLevel(database, accessLevelId)
+  const accessLevel = await checkAccessLevel(db, accessLevelId)
 
   if (!accessLevel) ctx.throw(400, "Invalid Access Level")
 
@@ -39,18 +37,12 @@ exports.create = async function(ctx) {
     accessLevelId,
   }
 
-  const response = await database.post(user)
-
-  const masterDb = new CouchDB("client_app_lookup")
-  const { clientId } = await masterDb.get(appId)
-
-  // the clientDB needs to store a map of users against the app
-  const db = new CouchDB(clientDb.name(clientId))
-  const app = await db.get(appId)
+  const response = await db.post(user)
 
+  const app = await db.get(ctx.user.appId)
   app.userInstanceMap = {
     ...app.userInstanceMap,
-    [username]: ctx.user.instanceId,
+    [username]: ctx.user.appId,
   }
   await db.put(app)
 
@@ -65,7 +57,7 @@ exports.create = async function(ctx) {
 }
 
 exports.update = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const user = ctx.request.body
   const dbUser = db.get(ctx.request.body._id)
   const newData = { ...dbUser, ...user }
@@ -79,14 +71,14 @@ exports.update = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const database = new CouchDB(ctx.user.instanceId)
+  const database = new CouchDB(ctx.user.appId)
   await database.destroy(generateUserID(ctx.params.username))
   ctx.message = `User ${ctx.params.username} deleted.`
   ctx.status = 200
 }
 
 exports.find = async function(ctx) {
-  const database = new CouchDB(ctx.user.instanceId)
+  const database = new CouchDB(ctx.user.appId)
   const user = await database.get(generateUserID(ctx.params.username))
   ctx.body = {
     username: user.username,
diff --git a/packages/server/src/api/controllers/view/index.js b/packages/server/src/api/controllers/view/index.js
index b0d21b42d1..57d4862b7e 100644
--- a/packages/server/src/api/controllers/view/index.js
+++ b/packages/server/src/api/controllers/view/index.js
@@ -8,7 +8,7 @@ const { fetchView } = require("../row")
 
 const controller = {
   fetch: async ctx => {
-    const db = new CouchDB(ctx.user.instanceId)
+    const db = new CouchDB(ctx.user.appId)
     const designDoc = await db.get("_design/database")
     const response = []
 
@@ -26,7 +26,7 @@ const controller = {
     ctx.body = response
   },
   save: async ctx => {
-    const db = new CouchDB(ctx.user.instanceId)
+    const db = new CouchDB(ctx.user.appId)
     const { originalName, ...viewToSave } = ctx.request.body
 
     const designDoc = await db.get("_design/database")
@@ -63,7 +63,7 @@ const controller = {
     ctx.message = `View ${viewToSave.name} saved successfully.`
   },
   destroy: async ctx => {
-    const db = new CouchDB(ctx.user.instanceId)
+    const db = new CouchDB(ctx.user.appId)
     const designDoc = await db.get("_design/database")
 
     const viewName = decodeURI(ctx.params.viewName)
diff --git a/packages/server/src/api/controllers/webhook.js b/packages/server/src/api/controllers/webhook.js
index 3259a89341..7a343b1b07 100644
--- a/packages/server/src/api/controllers/webhook.js
+++ b/packages/server/src/api/controllers/webhook.js
@@ -22,7 +22,7 @@ exports.WebhookType = {
 }
 
 exports.fetch = async ctx => {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const response = await db.allDocs(
     getWebhookParams(null, {
       include_docs: true,
@@ -32,7 +32,7 @@ exports.fetch = async ctx => {
 }
 
 exports.save = async ctx => {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   const webhook = ctx.request.body
   webhook.appId = ctx.user.appId
 
@@ -53,7 +53,7 @@ exports.save = async ctx => {
 }
 
 exports.destroy = async ctx => {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
 }
 
@@ -91,7 +91,7 @@ exports.trigger = async ctx => {
     await triggers.externalTrigger(target, {
       body: ctx.request.body,
       ...ctx.request.body,
-      instanceId: ctx.params.instance,
+      appId: ctx.params.instance,
     })
   }
   ctx.status = 200
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 1986315a51..0fbd65501b 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -9,8 +9,6 @@ const {
   pageRoutes,
   userRoutes,
   deployRoutes,
-  instanceRoutes,
-  clientRoutes,
   applicationRoutes,
   rowRoutes,
   tableRoutes,
@@ -83,9 +81,6 @@ router.use(rowRoutes.allowedMethods())
 router.use(userRoutes.routes())
 router.use(userRoutes.allowedMethods())
 
-router.use(instanceRoutes.routes())
-router.use(instanceRoutes.allowedMethods())
-
 router.use(automationRoutes.routes())
 router.use(automationRoutes.allowedMethods())
 
@@ -108,9 +103,6 @@ router.use(applicationRoutes.allowedMethods())
 router.use(componentRoutes.routes())
 router.use(componentRoutes.allowedMethods())
 
-router.use(clientRoutes.routes())
-router.use(clientRoutes.allowedMethods())
-
 router.use(accesslevelRoutes.routes())
 router.use(accesslevelRoutes.allowedMethods())
 
diff --git a/packages/server/src/api/routes/application.js b/packages/server/src/api/routes/application.js
index 65e73e95f5..aeb815d38c 100644
--- a/packages/server/src/api/routes/application.js
+++ b/packages/server/src/api/routes/application.js
@@ -8,12 +8,12 @@ const router = Router()
 router
   .get("/api/applications", authorized(BUILDER), controller.fetch)
   .get(
-    "/api/:applicationId/appPackage",
+    "/api/:appId/appPackage",
     authorized(BUILDER),
     controller.fetchAppPackage
   )
-  .put("/api/:applicationId", authorized(BUILDER), controller.update)
+  .put("/api/:appId", authorized(BUILDER), controller.update)
   .post("/api/applications", authorized(BUILDER), controller.create)
-  .delete("/api/:applicationId", authorized(BUILDER), controller.delete)
+  .delete("/api/:appId", authorized(BUILDER), controller.delete)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/client.js b/packages/server/src/api/routes/client.js
deleted file mode 100644
index 16acf1b7a3..0000000000
--- a/packages/server/src/api/routes/client.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const Router = require("@koa/router")
-const controller = require("../controllers/client")
-const authorized = require("../../middleware/authorized")
-const { BUILDER } = require("../../utilities/accessLevels")
-
-const router = Router()
-
-router.get("/api/client/id", authorized(BUILDER), controller.getClientId)
-
-module.exports = router
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index 72688a7de5..0025c5fabf 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -1,8 +1,6 @@
 const authRoutes = require("./auth")
 const pageRoutes = require("./pages")
 const userRoutes = require("./user")
-const instanceRoutes = require("./instance")
-const clientRoutes = require("./client")
 const applicationRoutes = require("./application")
 const tableRoutes = require("./table")
 const rowRoutes = require("./row")
@@ -22,8 +20,6 @@ module.exports = {
   authRoutes,
   pageRoutes,
   userRoutes,
-  instanceRoutes,
-  clientRoutes,
   applicationRoutes,
   rowRoutes,
   tableRoutes,
diff --git a/packages/server/src/api/routes/instance.js b/packages/server/src/api/routes/instance.js
deleted file mode 100644
index 00fce6bb12..0000000000
--- a/packages/server/src/api/routes/instance.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const Router = require("@koa/router")
-const controller = require("../controllers/instance")
-const authorized = require("../../middleware/authorized")
-const { BUILDER } = require("../../utilities/accessLevels")
-
-const router = Router()
-
-router
-  .post("/api/instances", authorized(BUILDER), controller.create)
-  .delete("/api/instances/:instanceId", authorized(BUILDER), controller.destroy)
-
-module.exports = router
diff --git a/packages/server/src/api/routes/tests/accesslevel.spec.js b/packages/server/src/api/routes/tests/accesslevel.spec.js
index 79f92e8a69..3362cbd713 100644
--- a/packages/server/src/api/routes/tests/accesslevel.spec.js
+++ b/packages/server/src/api/routes/tests/accesslevel.spec.js
@@ -1,6 +1,4 @@
 const { 
-  createInstance, 
-  createClientDatabase,
   createApplication,
   createTable,
   createView,
@@ -17,27 +15,25 @@ const {
 } = require("../../../utilities/accessLevels")
 
 describe("/accesslevels", () => {
-  let appId
   let server
   let request
-  let instanceId
+  let appId
   let table
   let view
 
   beforeAll(async () => {
     ({ request, server } = await supertest())
-    await createClientDatabase(request);
-    appId = (await createApplication(request))._id
   });
 
-  afterAll(async () => {
-    server.close();
+  afterAll(() => {
+    server.close()
   })
 
   beforeEach(async () => {
-    instanceId = (await createInstance(request, appId))._id
-    table = await createTable(request, appId, instanceId)
-    view = await createView(request, appId, instanceId, table._id)
+    let app = await createApplication(request)
+    appId = app.instance._id
+    table = await createTable(request, appId)
+    view = await createView(request, appId, table._id)
   })
 
   describe("create", () => {
@@ -46,7 +42,7 @@ describe("/accesslevels", () => {
       const res = await request
         .post(`/api/accesslevels`)
         .send({ name: "user" })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -64,7 +60,7 @@ describe("/accesslevels", () => {
       const createRes = await request
         .post(`/api/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: table._id, name: READ_TABLE }] })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -72,7 +68,7 @@ describe("/accesslevels", () => {
 
       const res = await request
         .get(`/api/accesslevels`)
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -80,11 +76,11 @@ describe("/accesslevels", () => {
 
       const adminLevel = res.body.find(r => r._id === ADMIN_LEVEL_ID)
       expect(adminLevel).toBeDefined()
-      expect(adminLevel.permissions).toEqual(await generateAdminPermissions(instanceId))
+      expect(adminLevel.permissions).toEqual(await generateAdminPermissions(appId))
 
       const powerUserLevel = res.body.find(r => r._id === POWERUSER_LEVEL_ID)
       expect(powerUserLevel).toBeDefined()
-      expect(powerUserLevel.permissions).toEqual(await generatePowerUserPermissions(instanceId))
+      expect(powerUserLevel.permissions).toEqual(await generatePowerUserPermissions(appId))
 
       const customLevelFetched = res.body.find(r => r._id === customLevel._id)
       expect(customLevelFetched.permissions).toEqual(customLevel.permissions)
@@ -97,7 +93,7 @@ describe("/accesslevels", () => {
       const createRes = await request
         .post(`/api/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: table._id, name: READ_TABLE } ] })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -105,12 +101,12 @@ describe("/accesslevels", () => {
 
       await request
         .delete(`/api/accesslevels/${customLevel._id}/${customLevel._rev}`)
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect(200)
 
       await request
         .get(`/api/accesslevels/${customLevel._id}`)
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect(404)
     })
   })
@@ -120,7 +116,7 @@ describe("/accesslevels", () => {
       const createRes = await request
         .post(`/api/accesslevels`)
         .send({ name: "user", permissions: [ { itemId: table._id, name: READ_TABLE }] })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -132,13 +128,13 @@ describe("/accesslevels", () => {
           _rev: customLevel._rev,
           addedPermissions:  [ { itemId: table._id, name: WRITE_TABLE } ] 
         })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
       const finalRes = await request
         .get(`/api/accesslevels/${customLevel._id}`)
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect(200) 
 
       expect(finalRes.body.permissions.length).toBe(2)
@@ -156,7 +152,7 @@ describe("/accesslevels", () => {
             { itemId: table._id, name: WRITE_TABLE },
           ] 
         })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -168,13 +164,13 @@ describe("/accesslevels", () => {
           _rev: customLevel._rev,
           removedPermissions:  [ { itemId: table._id, name: WRITE_TABLE }] 
         })
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
       const finalRes = await request
         .get(`/api/accesslevels/${customLevel._id}`)
-        .set(defaultHeaders(appId, instanceId))
+        .set(defaultHeaders(appId))
         .expect(200) 
 
       expect(finalRes.body.permissions.length).toBe(1)
diff --git a/packages/server/src/api/routes/tests/application.spec.js b/packages/server/src/api/routes/tests/application.spec.js
index d22ab02016..6068d783cb 100644
--- a/packages/server/src/api/routes/tests/application.spec.js
+++ b/packages/server/src/api/routes/tests/application.spec.js
@@ -1,11 +1,8 @@
-const { 
-  createClientDatabase,  
+const {
   createApplication,
-  createInstance,
-  destroyClientDatabase,
   builderEndpointShouldBlockNormalUsers,
   supertest,
-  TEST_CLIENT_ID,
+  clearApplications,
   defaultHeaders,
 } = require("./couchTestUtils")
 
@@ -18,14 +15,10 @@ describe("/applications", () => {
   });
 
   beforeEach(async () => {
-    await createClientDatabase()
+    await clearApplications(request)
   })
 
-  afterEach(async () => {
-    await destroyClientDatabase()
-  })
-
-  afterAll(async () => {
+  afterAll(() => {
     server.close()
   })
 
@@ -42,14 +35,13 @@ describe("/applications", () => {
     })
 
     it("should apply authorization to endpoint", async () => {
-      const otherApplication = await createApplication(request) 
-      const instance = await createInstance(request, otherApplication._id)
+      const otherApplication = await createApplication(request)
+      const appId = otherApplication.instance._id
       await builderEndpointShouldBlockNormalUsers({
         request,
         method: "POST",
         url: `/api/applications`,
-        instanceId: instance._id,
-        appId: otherApplication._id,
+        appId: appId,
         body: { name: "My App" }
       })
     })
@@ -58,7 +50,6 @@ describe("/applications", () => {
 
   describe("fetch", () => {
     it("lists all applications", async () => {
-      
       await createApplication(request, "app1")
       await createApplication(request, "app2")
 
@@ -71,46 +62,14 @@ describe("/applications", () => {
       expect(res.body.length).toBe(2)
     })
 
-    it("lists only applications in requested client databse", async () => {
-      await createApplication(request, "app1")
-      await createClientDatabase("new_client")
-
-      const blah = await request
-        .post("/api/applications")
-        .send({ name: "app2", clientId: "new_client"})
-        .set(defaultHeaders())
-        .expect('Content-Type', /json/)
-        //.expect(200)
-
-      const client1Res = await request
-        .get(`/api/applications?clientId=${TEST_CLIENT_ID}`)
-        .set(defaultHeaders())
-        .expect('Content-Type', /json/)
-        .expect(200)
-      
-      expect(client1Res.body.length).toBe(1)
-      expect(client1Res.body[0].name).toBe("app1")
-
-      const client2Res = await request
-        .get(`/api/applications?clientId=new_client`)
-        .set(defaultHeaders())
-        .expect('Content-Type', /json/)
-        .expect(200)
-      
-      expect(client2Res.body.length).toBe(1)
-      expect(client2Res.body[0].name).toBe("app2")
-
-    })
-
     it("should apply authorization to endpoint", async () => {
-      const otherApplication = await createApplication(request) 
-      const instance = await createInstance(request, otherApplication._id)
+      const otherApplication = await createApplication(request)
+      const appId = otherApplication.instance._id
       await builderEndpointShouldBlockNormalUsers({
         request,
         method: "GET",
         url: `/api/applications`,
-        instanceId: instance._id,
-        appId: otherApplication._id,
+        appId: appId,
       })
     })
   })
diff --git a/packages/server/src/api/routes/tests/automation.spec.js b/packages/server/src/api/routes/tests/automation.spec.js
index f3ebcd2144..226bbad226 100644
--- a/packages/server/src/api/routes/tests/automation.spec.js
+++ b/packages/server/src/api/routes/tests/automation.spec.js
@@ -1,7 +1,5 @@
-const { 
-  createClientDatabase,
+const {
   createApplication,
-  createInstance,
   createTable,
   getAllFromTable,
   defaultHeaders,
@@ -41,27 +39,26 @@ describe("/automations", () => {
   let request
   let server
   let app
-  let instance
+  let appId
   let automation
   let automationId
 
   beforeAll(async () => {
     ({ request, server } = await supertest())
-    await createClientDatabase(request)
-    app = await createApplication(request)
   })
 
   beforeEach(async () => {
+    app = await createApplication(request)
+    appId = app.instance._id
     if (automation) await destroyDocument(automation.id)
-    instance = await createInstance(request, app._id)
   })
 
-  afterAll(async () => {
+  afterAll(() => {
     server.close()
   })
 
   const createAutomation = async () => {
-    automation = await insertDocument(instance._id, {
+    automation = await insertDocument(appId, {
       type: "automation",
       ...TEST_AUTOMATION
     })
@@ -72,7 +69,7 @@ describe("/automations", () => {
     return await request
       .post(`/api/automations/${automationId}/trigger`)
       .send({ name: "Test", description: "TEST" })
-      .set(defaultHeaders(app._id, instance._id))
+      .set(defaultHeaders(appId))
       .expect('Content-Type', /json/)
       .expect(200)
   }
@@ -81,7 +78,7 @@ describe("/automations", () => {
     it("returns a list of definitions for actions", async () => {
       const res = await request
         .get(`/api/automations/action/list`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -92,7 +89,7 @@ describe("/automations", () => {
     it("returns a list of definitions for triggers", async () => {
       const res = await request
         .get(`/api/automations/trigger/list`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -103,7 +100,7 @@ describe("/automations", () => {
     it("returns a list of definitions for actions", async () => {
       const res = await request
         .get(`/api/automations/logic/list`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -114,7 +111,7 @@ describe("/automations", () => {
     it("returns all of the definitions in one", async () => {
       const res = await request
         .get(`/api/automations/definitions/list`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -142,7 +139,7 @@ describe("/automations", () => {
     it("returns a success message when the automation is successfully created", async () => {
       const res = await request
         .post(`/api/automations`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .send(TEST_AUTOMATION)
         .expect('Content-Type', /json/)
         .expect(200)
@@ -158,8 +155,7 @@ describe("/automations", () => {
         request,
         method: "POST",
         url: `/api/automations`,
-        instanceId: instance._id,
-        appId: app._id,
+        appId: appId,
         body: TEST_AUTOMATION
       })
     })
@@ -167,7 +163,7 @@ describe("/automations", () => {
 
   describe("trigger", () => {
     it("trigger the automation successfully", async () => {
-      let table = await createTable(request, app._id, instance._id)
+      let table = await createTable(request, appId)
       TEST_AUTOMATION.definition.trigger.inputs.tableId = table._id
       TEST_AUTOMATION.definition.steps[0].inputs.row.tableId = table._id
       await createAutomation()
@@ -180,7 +176,7 @@ describe("/automations", () => {
         expect(res.body.message).toEqual(`Automation ${automation._id} has been triggered.`)
         expect(res.body.automation.name).toEqual(TEST_AUTOMATION.name)
         await delay(500)
-        let elements = await getAllFromTable(request, app._id, instance._id, table._id)
+        let elements = await getAllFromTable(request, appId, table._id)
         // don't test it unless there are values to test
         if (elements.length === 1) {
           expect(elements.length).toEqual(1)
@@ -203,7 +199,7 @@ describe("/automations", () => {
 
       const res = await request
         .put(`/api/automations`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .send(automation)
         .expect('Content-Type', /json/)
         .expect(200)
@@ -218,7 +214,7 @@ describe("/automations", () => {
       await createAutomation()
       const res = await request
         .get(`/api/automations`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -230,8 +226,7 @@ describe("/automations", () => {
         request,
         method: "GET",
         url: `/api/automations`,
-        instanceId: instance._id,
-        appId: app._id,
+        appId: appId,
       })
     })
   })
@@ -241,7 +236,7 @@ describe("/automations", () => {
       await createAutomation()
       const res = await request
         .delete(`/api/automations/${automation.id}/${automation.rev}`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -254,8 +249,7 @@ describe("/automations", () => {
         request,
         method: "DELETE",
         url: `/api/automations/${automation.id}/${automation._rev}`,
-        instanceId: instance._id,
-        appId: app._id,
+        appId: appId,
       })
     })
   })
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index bb155d47bb..83c968323d 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -1,5 +1,4 @@
 const CouchDB = require("../../../db")
-const { create, destroy } = require("../../../db/clientDb")
 const supertest = require("supertest")
 const {
   POWERUSER_LEVEL_ID,
@@ -17,19 +16,18 @@ exports.TEST_CLIENT_ID = TEST_CLIENT_ID
 exports.supertest = async () => {
   let request
   let server
-  process.env.PORT = 4002
+  env.PORT = 4002
   server = require("../../../app")
 
   request = supertest(server)
   return { request, server }
 }
 
-exports.defaultHeaders = (appId, instanceId) => {
+exports.defaultHeaders = appId => {
   const builderUser = {
     userId: "BUILDER",
     accessLevelId: BUILDER_LEVEL_ID,
     appId,
-    instanceId,
   }
 
   const builderToken = jwt.sign(builderUser, env.JWT_SECRET)
@@ -40,7 +38,7 @@ exports.defaultHeaders = (appId, instanceId) => {
   }
 }
 
-exports.createTable = async (request, appId, instanceId, table) => {
+exports.createTable = async (request, appId, table) => {
   if (table != null && table._id) {
     delete table._id
   }
@@ -66,19 +64,19 @@ exports.createTable = async (request, appId, instanceId, table) => {
 
   const res = await request
     .post(`/api/tables`)
-    .set(exports.defaultHeaders(appId, instanceId))
+    .set(exports.defaultHeaders(appId))
     .send(table)
   return res.body
 }
 
-exports.getAllFromTable = async (request, appId, instanceId, tableId) => {
+exports.getAllFromTable = async (request, appId, tableId) => {
   const res = await request
     .get(`/api/${tableId}/rows`)
-    .set(exports.defaultHeaders(appId, instanceId))
+    .set(exports.defaultHeaders(appId))
   return res.body
 }
 
-exports.createView = async (request, appId, instanceId, tableId, view) => {
+exports.createView = async (request, appId, tableId, view) => {
   view = view || {
     map: "function(doc) { emit(doc[doc.key], doc._id); } ",
     tableId: tableId,
@@ -86,13 +84,11 @@ exports.createView = async (request, appId, instanceId, tableId, view) => {
 
   const res = await request
     .post(`/api/views`)
-    .set(exports.defaultHeaders(appId, instanceId))
+    .set(exports.defaultHeaders(appId))
     .send(view)
   return res.body
 }
 
-exports.createClientDatabase = async id => await create(id || TEST_CLIENT_ID)
-
 exports.createApplication = async (request, name = "test_application") => {
   const res = await request
     .post("/api/applications")
@@ -103,28 +99,25 @@ exports.createApplication = async (request, name = "test_application") => {
   return res.body
 }
 
-exports.destroyClientDatabase = async () => await destroy(TEST_CLIENT_ID)
-
-exports.createInstance = async (request, appId) => {
+exports.clearApplications = async request => {
   const res = await request
-    .post(`/api/instances`)
-    .send({
-      name: "test-instance2",
-    })
-    .set(exports.defaultHeaders(appId))
-  return res.body
+    .get("/api/applications")
+    .set(exports.defaultHeaders())
+  for (let app of res.body) {
+    const appId = app._id
+    await request.delete(`/api/${appId}`).set(exports.defaultHeaders(appId))
+  }
 }
 
 exports.createUser = async (
   request,
   appId,
-  instanceId,
   username = "babs",
   password = "babs_password"
 ) => {
   const res = await request
     .post(`/api/users`)
-    .set(exports.defaultHeaders(appId, instanceId))
+    .set(exports.defaultHeaders(appId))
     .send({
       name: "Bill",
       username,
@@ -137,11 +130,10 @@ exports.createUser = async (
 const createUserWithOnePermission = async (
   request,
   appId,
-  instanceId,
   permName,
   itemId
 ) => {
-  let permissions = await generateAdminPermissions(instanceId)
+  let permissions = await generateAdminPermissions(appId)
   permissions = permissions.filter(
     p => p.name === permName && p.itemId === itemId
   )
@@ -149,19 +141,17 @@ const createUserWithOnePermission = async (
   return await createUserWithPermissions(
     request,
     appId,
-    instanceId,
     permissions,
     "onePermOnlyUser"
   )
 }
 
-const createUserWithAdminPermissions = async (request, appId, instanceId) => {
-  let permissions = await generateAdminPermissions(instanceId)
+const createUserWithAdminPermissions = async (request, appId) => {
+  let permissions = await generateAdminPermissions(appId)
 
   return await createUserWithPermissions(
     request,
     appId,
-    instanceId,
     permissions,
     "adminUser"
   )
@@ -170,11 +160,10 @@ const createUserWithAdminPermissions = async (request, appId, instanceId) => {
 const createUserWithAllPermissionExceptOne = async (
   request,
   appId,
-  instanceId,
   permName,
   itemId
 ) => {
-  let permissions = await generateAdminPermissions(instanceId)
+  let permissions = await generateAdminPermissions(appId)
   permissions = permissions.filter(
     p => !(p.name === permName && p.itemId === itemId)
   )
@@ -182,7 +171,6 @@ const createUserWithAllPermissionExceptOne = async (
   return await createUserWithPermissions(
     request,
     appId,
-    instanceId,
     permissions,
     "allPermsExceptOneUser"
   )
@@ -191,19 +179,18 @@ const createUserWithAllPermissionExceptOne = async (
 const createUserWithPermissions = async (
   request,
   appId,
-  instanceId,
   permissions,
   username
 ) => {
   const accessRes = await request
     .post(`/api/accesslevels`)
     .send({ name: "TestLevel", permissions })
-    .set(exports.defaultHeaders(appId, instanceId))
+    .set(exports.defaultHeaders(appId))
 
   const password = `password_${username}`
   await request
     .post(`/api/users`)
-    .set(exports.defaultHeaders(appId, instanceId))
+    .set(exports.defaultHeaders(appId))
     .send({
       name: username,
       username,
@@ -238,14 +225,12 @@ exports.testPermissionsForEndpoint = async ({
   url,
   body,
   appId,
-  instanceId,
   permissionName,
   itemId,
 }) => {
   const headers = await createUserWithOnePermission(
     request,
     appId,
-    instanceId,
     permissionName,
     itemId
   )
@@ -257,7 +242,6 @@ exports.testPermissionsForEndpoint = async ({
   const noPermsHeaders = await createUserWithAllPermissionExceptOne(
     request,
     appId,
-    instanceId,
     permissionName,
     itemId
   )
@@ -273,13 +257,8 @@ exports.builderEndpointShouldBlockNormalUsers = async ({
   url,
   body,
   appId,
-  instanceId,
 }) => {
-  const headers = await createUserWithAdminPermissions(
-    request,
-    appId,
-    instanceId
-  )
+  const headers = await createUserWithAdminPermissions(request, appId)
 
   await createRequest(request, method, url, body)
     .set(headers)
diff --git a/packages/server/src/api/routes/tests/instance.spec.js b/packages/server/src/api/routes/tests/instance.spec.js
deleted file mode 100644
index 3bbed4d8e6..0000000000
--- a/packages/server/src/api/routes/tests/instance.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const { 
-  createInstance, 
-  createClientDatabase,
-  createApplication,
-  supertest,
-  defaultHeaders
-} = require("./couchTestUtils");
-
-describe("/instances", () => {
-  let TEST_APP_ID;
-  let server
-  let request
-  beforeAll(async () => {
-    ({ request, server } = await supertest())
-    await createClientDatabase(request);
-    TEST_APP_ID = (await createApplication(request))._id
-  });
-
-  afterAll(async () => {
-    server.close();
-  })
-
-  describe("create", () => {
-
-    it("returns a success message when the instance database is successfully created", async () => {
-      const res = await request
-        .post(`/api/instances`)
-        .send({ name: "test-instance" })
-        .set(defaultHeaders(TEST_APP_ID))
-        .expect('Content-Type', /json/)
-        .expect(200)
-
-      expect(res.res.statusMessage).toEqual("Instance Database test-instance successfully provisioned.");
-      expect(res.body._id).toBeDefined();
-      
-    })
-  });
-
-  describe("destroy", () => {
-
-    it("returns a success message when the instance database is successfully deleted", async () => {
-      const instance = await createInstance(request, TEST_APP_ID);
-      const res = await request
-        .delete(`/api/instances/${instance._id}`)
-        .set(defaultHeaders(TEST_APP_ID))
-        .expect(200)
-
-      expect(res.res.statusMessage).toEqual(`Instance Database ${instance._id} successfully destroyed.`);
-    })
-  });
-});
diff --git a/packages/server/src/api/routes/tests/row.spec.js b/packages/server/src/api/routes/tests/row.spec.js
index ff8cf672c5..507f05cf6c 100644
--- a/packages/server/src/api/routes/tests/row.spec.js
+++ b/packages/server/src/api/routes/tests/row.spec.js
@@ -1,7 +1,5 @@
 const { 
   createApplication,
-  createClientDatabase,
-  createInstance, 
   createTable,
   supertest,
   defaultHeaders,
@@ -10,24 +8,24 @@ const {
 describe("/rows", () => {
   let request
   let server
-  let instance
+  let appId
   let table
   let row
   let app
 
   beforeAll(async () => {
     ({ request, server } = await supertest())
-    await createClientDatabase(request)
-    app = await createApplication(request)
+
   });
 
-  afterAll(async () => {
-    server.close();
+  afterAll(() => {
+    server.close()
   })
 
   beforeEach(async () => {
-    instance = await createInstance(request, app._id)
-    table = await createTable(request, app._id, instance._id)
+    app = await createApplication(request)
+    appId = app.instance._id
+    table = await createTable(request, appId)
     row = {
       name: "Test Contact",
       description: "original description",
@@ -40,14 +38,14 @@ describe("/rows", () => {
     await request
       .post(`/api/${r ? r.tableId : row.tableId}/rows`)
       .send(r || row)
-      .set(defaultHeaders(app._id, instance._id))
+      .set(defaultHeaders(appId))
       .expect('Content-Type', /json/)
       .expect(200)
 
   const loadRow = async id => 
     await request
       .get(`/api/${table._id}/rows/${id}`)
-      .set(defaultHeaders(app._id, instance._id))
+      .set(defaultHeaders(appId))
       .expect('Content-Type', /json/)
       .expect(200)
 
@@ -74,7 +72,7 @@ describe("/rows", () => {
           tableId: table._id,
           name: "Updated Name",
         })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -88,7 +86,7 @@ describe("/rows", () => {
 
       const res = await request
         .get(`/api/${table._id}/rows/${existing._id}`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -111,7 +109,7 @@ describe("/rows", () => {
 
       const res = await request
         .get(`/api/${table._id}/rows`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -133,7 +131,7 @@ describe("/rows", () => {
 
       const res = await request
         .post(`/api/rows/search`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .send({
           keys: rowIds
         })
@@ -148,7 +146,7 @@ describe("/rows", () => {
       await createRow()
       await request
         .get(`/api/${table._id}/rows/not-a-valid-id`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(404)
     })
@@ -160,7 +158,7 @@ describe("/rows", () => {
       const number = {type:"number", constraints: { type: "number", presence: false }}
       const datetime = {type:"datetime", constraints: { type: "string", presence: false, datetime: {earliest:"", latest: ""}  }}
 
-      table = await createTable(request, app._id, instance._id, {
+      table = await createTable(request, appId, {
         name: "TestTable2",
         type: "table",
         key: "name",
@@ -256,7 +254,7 @@ describe("/rows", () => {
           tableId: table._id,
           name: "Updated Name",
         })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -277,7 +275,7 @@ describe("/rows", () => {
       const result = await request
         .post(`/api/${table._id}/rows/validate`)
         .send({ name: "ivan" })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -289,7 +287,7 @@ describe("/rows", () => {
       const result = await request
         .post(`/api/${table._id}/rows/validate`)
         .send({ name: 1 })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       
diff --git a/packages/server/src/api/routes/tests/table.spec.js b/packages/server/src/api/routes/tests/table.spec.js
index e3bc9d5f04..67d53a489b 100644
--- a/packages/server/src/api/routes/tests/table.spec.js
+++ b/packages/server/src/api/routes/tests/table.spec.js
@@ -1,8 +1,6 @@
 const { 
-  createInstance, 
-  createTable, 
-  supertest, 
-  createClientDatabase, 
+  createTable,
+  supertest,
   createApplication,
   defaultHeaders,
   builderEndpointShouldBlockNormalUsers,
@@ -13,23 +11,22 @@ describe("/tables", () => {
   let request
   let server
   let app
-  let instance
+  let appId
 
   beforeAll(async () => {
     ({ request, server } = await supertest())
-    await createClientDatabase(request)
-    app = await createApplication(request)
   });
 
-  afterAll(async () => {
-    server.close();
+  afterAll(() => {
+    server.close()
   })
 
-  describe("create", () => {
-    beforeEach(async () => {
-      instance = await createInstance(request, app._id);
-    });
+  beforeEach(async () => {
+    app = await createApplication(request)
+    appId = app.instance._id
+  });
 
+  describe("create", () => {
     it("returns a success message when the table is successfully created", done => {
       request
         .post(`/api/tables`)
@@ -40,7 +37,7 @@ describe("/tables", () => {
             name: { type: "string" }
           }
         })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (err, res) => {
@@ -51,14 +48,14 @@ describe("/tables", () => {
       })
 
     it("renames all the row fields for a table when a schema key is renamed", async () => {
-      const testTable = await createTable(request, app._id, instance._id);
+      const testTable = await createTable(request, appId);
 
       const testRow = await request
         .post(`/api/${testTable._id}/rows`)
         .send({
           name: "test"
         })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -77,7 +74,7 @@ describe("/tables", () => {
             updatedName: { type: "string" }
           }
         })
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -86,7 +83,7 @@ describe("/tables", () => {
 
         const res = await request
           .get(`/api/${testTable._id}/rows/${testRow.body._id}`)
-          .set(defaultHeaders(app._id, instance._id))
+          .set(defaultHeaders(appId))
           .expect('Content-Type', /json/)
           .expect(200)
 
@@ -99,8 +96,7 @@ describe("/tables", () => {
           request,
           method: "POST",
           url: `/api/tables`,
-          instanceId: instance._id,
-          appId: app._id,
+          appId: appId,
           body: { 
             name: "TestTable",
             key: "name",
@@ -116,8 +112,7 @@ describe("/tables", () => {
     let testTable
 
     beforeEach(async () => {
-      instance = await createInstance(request, app._id)
-      testTable = await createTable(request, app._id, instance._id, testTable)
+      testTable = await createTable(request, appId, testTable)
     });
 
     afterEach(() => {
@@ -127,7 +122,7 @@ describe("/tables", () => {
     it("returns all the tables for that instance in the response body", done => {
       request
         .get(`/api/tables`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
@@ -143,8 +138,7 @@ describe("/tables", () => {
           request,
           method: "GET",
           url: `/api/tables`,
-          instanceId: instance._id,
-          appId: app._id,
+          appId: appId,
         })
       })
     });
@@ -153,8 +147,7 @@ describe("/tables", () => {
     let testTable;
 
     beforeEach(async () => {
-      instance = await createInstance(request, app._id)
-      testTable = await createTable(request, app._id, instance._id, testTable)
+      testTable = await createTable(request, appId, testTable)
     });
 
     afterEach(() => {
@@ -164,7 +157,7 @@ describe("/tables", () => {
     it("returns a success response when a table is deleted.", async done => {
       request
         .delete(`/api/tables/${testTable._id}/${testTable._rev}`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
@@ -174,7 +167,7 @@ describe("/tables", () => {
       })
 
     it("deletes linked references to the table after deletion", async done => {
-      const linkedTable = await createTable(request, app._id, instance._id, {
+      const linkedTable = await createTable(request, appId, {
         name: "LinkedTable",
         type: "table",
         key: "name",
@@ -197,12 +190,12 @@ describe("/tables", () => {
 
       request
         .delete(`/api/tables/${testTable._id}/${testTable._rev}`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
           expect(res.res.statusMessage).toEqual(`Table ${testTable._id} deleted.`);
-          const dependentTable = await getDocument(instance._id, linkedTable._id)
+          const dependentTable = await getDocument(appId, linkedTable._id)
           expect(dependentTable.schema.TestTable).not.toBeDefined();
           done();
         });
@@ -213,8 +206,7 @@ describe("/tables", () => {
         request,
         method: "DELETE",
         url: `/api/tables/${testTable._id}/${testTable._rev}`,
-        instanceId: instance._id,
-        appId: app._id,
+        appId: appId,
       })
     })
 
diff --git a/packages/server/src/api/routes/tests/user.spec.js b/packages/server/src/api/routes/tests/user.spec.js
index a17e6fe275..a569902bae 100644
--- a/packages/server/src/api/routes/tests/user.spec.js
+++ b/packages/server/src/api/routes/tests/user.spec.js
@@ -1,7 +1,5 @@
-const { 
-  createClientDatabase,
+const {
   createApplication,
-  createInstance,
   supertest,
   defaultHeaders,
   createUser,
@@ -17,30 +15,29 @@ describe("/users", () => {
   let request
   let server
   let app
-  let instance
+  let appId
 
   beforeAll(async () => {
     ({ request, server } = await supertest(server))
-    await createClientDatabase(request)
-    app = await createApplication(request)
   });
 
   beforeEach(async () => {
-    instance = await createInstance(request, app._id)
+    app = await createApplication(request)
+    appId = app.instance._id
   });
 
-  afterAll(async () => {
-    server.close();
+  afterAll(() => {
+    server.close()
+    server.destroy()
   })
 
-  describe("fetch", () => {    
-
+  describe("fetch", () => {
     it("returns a list of users from an instance db", async () => {
-      await createUser(request, app._id, instance._id, "brenda", "brendas_password")
-      await createUser(request, app._id, instance._id, "pam", "pam_password")
+      await createUser(request, appId, "brenda", "brendas_password")
+      await createUser(request, appId, "pam", "pam_password")
       const res = await request
         .get(`/api/users`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -50,13 +47,12 @@ describe("/users", () => {
     })
 
     it("should apply authorization to endpoint", async () => {
-      await createUser(request, app._id, instance._id, "brenda", "brendas_password")
+      await createUser(request, appId, "brenda", "brendas_password")
       await testPermissionsForEndpoint({
         request,
         method: "GET",
         url: `/api/users`,
-        instanceId: instance._id,
-        appId: app._id,
+        appId: appId,
         permissionName: LIST_USERS,
       })
     })
@@ -68,7 +64,7 @@ describe("/users", () => {
     it("returns a success message when a user is successfully created", async () => {
       const res = await request
         .post(`/api/users`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .send({ name: "Bill", username: "bill", password: "bills_password", accessLevelId: POWERUSER_LEVEL_ID })
         .expect(200)
         .expect('Content-Type', /json/)
@@ -83,8 +79,7 @@ describe("/users", () => {
         method: "POST",
         body: { name: "brandNewUser", username: "brandNewUser", password: "yeeooo", accessLevelId: POWERUSER_LEVEL_ID },
         url: `/api/users`,
-        instanceId: instance._id,
-        appId: app._id,
+        appId: appId,
         permissionName: USER_MANAGEMENT,
       })
     })
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index 1265b37f5b..f1ee5d8218 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -1,7 +1,5 @@
-const { 
-  createClientDatabase,
+const {
   createApplication,
-  createInstance, 
   createTable,
   supertest,
   defaultHeaders,
@@ -12,7 +10,7 @@ describe("/views", () => {
   let request
   let server
   let app
-  let instance
+  let appId
   let table
 
   const createView = async (config = {
@@ -24,34 +22,33 @@ describe("/views", () => {
     await request
     .post(`/api/views`)
     .send(config)
-    .set(defaultHeaders(app._id, instance._id))
+    .set(defaultHeaders(appId))
     .expect('Content-Type', /json/)
     .expect(200)
 
   const createRow = async row => request
     .post(`/api/${table._id}/rows`)
     .send(row)
-    .set(defaultHeaders(app._id, instance._id))
+    .set(defaultHeaders(appId))
     .expect('Content-Type', /json/)
     .expect(200)
 
   beforeAll(async () => {
     ({ request, server } = await supertest())
-    await createClientDatabase(request)
-    app = await createApplication(request)
   })
 
   beforeEach(async () => {
-    instance = await createInstance(request, app._id)
+    app = await createApplication(request)
+    appId = app.instance._id
   })
 
-  afterAll(async () => {
+  afterAll(() => {
     server.close()
   })
 
   describe("create", () => {
     beforeEach(async () => {
-      table = await createTable(request, app._id, instance._id);
+      table = await createTable(request, appId);
     })
 
     it("returns a success message when the view is successfully created", async () => {
@@ -62,7 +59,7 @@ describe("/views", () => {
     it("updates the table row with the new view metadata", async () => {
       const res = await createView()
       expect(res.res.statusMessage).toEqual("View TestView saved successfully.");
-      const updatedTable = await getDocument(instance._id, table._id)
+      const updatedTable = await getDocument(appId, table._id)
       expect(updatedTable.views).toEqual({
         TestView: {
           field: "Price",
@@ -99,14 +96,14 @@ describe("/views", () => {
 
   describe("fetch", () => {
     beforeEach(async () => {
-      table = await createTable(request, app._id, instance._id);
+      table = await createTable(request, appId);
     });
 
     it("returns only custom views", async () => {
       await createView()
       const res = await request
         .get(`/api/views`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       expect(res.body.length).toBe(1)
@@ -116,7 +113,7 @@ describe("/views", () => {
 
   describe("query", () => {
     beforeEach(async () => {
-      table = await createTable(request, app._id, instance._id);
+      table = await createTable(request, appId);
     });
 
     it("returns data for the created view", async () => {
@@ -135,7 +132,7 @@ describe("/views", () => {
       })
       const res = await request
         .get(`/api/views/TestView?calculation=stats`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       expect(res.body.length).toBe(1)
@@ -167,7 +164,7 @@ describe("/views", () => {
       })
       const res = await request
         .get(`/api/views/TestView?calculation=stats&group=Category`)
-        .set(defaultHeaders(app._id, instance._id))
+        .set(defaultHeaders(appId))
         .expect('Content-Type', /json/)
         .expect(200)
       
diff --git a/packages/server/src/app.js b/packages/server/src/app.js
index 4157534365..15ae7126ad 100644
--- a/packages/server/src/app.js
+++ b/packages/server/src/app.js
@@ -30,7 +30,7 @@ app.context.auth = {}
 app.use(api.routes())
 
 if (electron.app && electron.app.isPackaged) {
-  process.env.NODE_ENV = "production"
+  env._set("NODE_ENV", "production")
   Sentry.init()
 
   app.on("error", (err, ctx) => {
diff --git a/packages/server/src/automations/actions.js b/packages/server/src/automations/actions.js
index b2efae7809..4c282b1aea 100644
--- a/packages/server/src/automations/actions.js
+++ b/packages/server/src/automations/actions.js
@@ -4,7 +4,7 @@ const updateRow = require("./steps/updateRow")
 const deleteRow = require("./steps/deleteRow")
 const createUser = require("./steps/createUser")
 const outgoingWebhook = require("./steps/outgoingWebhook")
-const environment = require("../environment")
+const env = require("../environment")
 const download = require("download")
 const fetch = require("node-fetch")
 const { join } = require("../utilities/centralPath")
@@ -33,8 +33,8 @@ const BUILTIN_DEFINITIONS = {
   OUTGOING_WEBHOOK: outgoingWebhook.definition,
 }
 
-let AUTOMATION_BUCKET = environment.AUTOMATION_BUCKET
-let AUTOMATION_DIRECTORY = environment.AUTOMATION_DIRECTORY
+let AUTOMATION_BUCKET = env.AUTOMATION_BUCKET
+let AUTOMATION_DIRECTORY = env.AUTOMATION_DIRECTORY
 let MANIFEST = null
 
 function buildBundleName(pkgName, version) {
diff --git a/packages/server/src/automations/automationUtils.js b/packages/server/src/automations/automationUtils.js
index c6284ea3bd..3a66420dd0 100644
--- a/packages/server/src/automations/automationUtils.js
+++ b/packages/server/src/automations/automationUtils.js
@@ -88,13 +88,13 @@ module.exports.cleanInputValues = (inputs, schema) => {
  * the automation but is instead part of the Table/Table. This function will get the table schema and use it to instead
  * perform the cleanInputValues function on the input row.
  *
- * @param {string} instanceId The instance which the Table/Table is contained under.
+ * @param {string} appId The instance which the Table/Table is contained under.
  * @param {string} tableId The ID of the Table/Table which the schema is to be retrieved for.
  * @param {object} row The input row structure which requires clean-up after having been through mustache statements.
  * @returns {Promise<Object>} The cleaned up rows object, will should now have all the required primitive types.
  */
-module.exports.cleanUpRow = async (instanceId, tableId, row) => {
-  const db = new CouchDB(instanceId)
+module.exports.cleanUpRow = async (appId, tableId, row) => {
+  const db = new CouchDB(appId)
   const table = await db.get(tableId)
 
   return module.exports.cleanInputValues(row, { properties: table.schema })
@@ -104,13 +104,13 @@ module.exports.cleanUpRow = async (instanceId, tableId, row) => {
  * A utility function for the cleanUpRow, which can be used if only the row ID is known (not the table ID) to clean
  * up a row after mustache statements have been replaced. This is specifically useful for the update row action.
  *
- * @param {string} instanceId The instance which the Table/Table is contained under.
+ * @param {string} appId The instance which the Table/Table is contained under.
  * @param {string} rowId The ID of the row from which the tableId will be extracted, to get the Table/Table schema.
  * @param {object} row The input row structure which requires clean-up after having been through mustache statements.
  * @returns {Promise<Object>} The cleaned up rows object, which will now have all the required primitive types.
  */
-module.exports.cleanUpRowById = async (instanceId, rowId, row) => {
-  const db = new CouchDB(instanceId)
+module.exports.cleanUpRowById = async (appId, rowId, row) => {
+  const db = new CouchDB(appId)
   const foundRow = await db.get(rowId)
-  return module.exports.cleanUpRow(instanceId, foundRow.tableId, row)
+  return module.exports.cleanUpRow(appId, foundRow.tableId, row)
 }
diff --git a/packages/server/src/automations/index.js b/packages/server/src/automations/index.js
index f407e35a78..9332e5d449 100644
--- a/packages/server/src/automations/index.js
+++ b/packages/server/src/automations/index.js
@@ -1,6 +1,6 @@
 const triggers = require("./triggers")
 const actions = require("./actions")
-const environment = require("../environment")
+const env = require("../environment")
 const workerFarm = require("worker-farm")
 const singleThread = require("./thread")
 const { getAPIKey, update, Properties } = require("../utilities/usageQuota")
@@ -34,10 +34,10 @@ module.exports.init = function() {
   actions.init().then(() => {
     triggers.automationQueue.process(async job => {
       try {
-        if (environment.CLOUD && job.data.automation) {
+        if (env.CLOUD && job.data.automation) {
           job.data.automation.apiKey = await updateQuota(job.data.automation)
         }
-        if (environment.BUDIBASE_ENVIRONMENT === "PRODUCTION") {
+        if (env.BUDIBASE_ENVIRONMENT === "PRODUCTION") {
           await runWorker(job)
         } else {
           await singleThread(job)
diff --git a/packages/server/src/automations/steps/createRow.js b/packages/server/src/automations/steps/createRow.js
index f3049974a5..0b7897809a 100644
--- a/packages/server/src/automations/steps/createRow.js
+++ b/packages/server/src/automations/steps/createRow.js
@@ -1,6 +1,6 @@
 const rowController = require("../../api/controllers/row")
 const automationUtils = require("../automationUtils")
-const environment = require("../../environment")
+const env = require("../../environment")
 const usage = require("../../utilities/usageQuota")
 
 module.exports.definition = {
@@ -58,13 +58,13 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, instanceId, apiKey }) {
+module.exports.run = async function({ inputs, appId, apiKey }) {
   // TODO: better logging of when actions are missed due to missing parameters
   if (inputs.row == null || inputs.row.tableId == null) {
     return
   }
   inputs.row = await automationUtils.cleanUpRow(
-    instanceId,
+    appId,
     inputs.row.tableId,
     inputs.row
   )
@@ -76,11 +76,11 @@ module.exports.run = async function({ inputs, instanceId, apiKey }) {
     request: {
       body: inputs.row,
     },
-    user: { instanceId },
+    user: { appId },
   }
 
   try {
-    if (environment.CLOUD) {
+    if (env.CLOUD) {
       await usage.update(apiKey, usage.Properties.ROW, 1)
     }
     await rowController.save(ctx)
diff --git a/packages/server/src/automations/steps/createUser.js b/packages/server/src/automations/steps/createUser.js
index 2aee8e8d3a..07d9f05316 100644
--- a/packages/server/src/automations/steps/createUser.js
+++ b/packages/server/src/automations/steps/createUser.js
@@ -1,6 +1,6 @@
 const accessLevels = require("../../utilities/accessLevels")
 const userController = require("../../api/controllers/user")
-const environment = require("../../environment")
+const env = require("../../environment")
 const usage = require("../../utilities/usageQuota")
 
 module.exports.definition = {
@@ -58,11 +58,11 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, instanceId, apiKey }) {
+module.exports.run = async function({ inputs, appId, apiKey }) {
   const { username, password, accessLevelId } = inputs
   const ctx = {
     user: {
-      instanceId: instanceId,
+      appId: appId,
     },
     request: {
       body: { username, password, accessLevelId },
@@ -70,7 +70,7 @@ module.exports.run = async function({ inputs, instanceId, apiKey }) {
   }
 
   try {
-    if (environment.CLOUD) {
+    if (env.CLOUD) {
       await usage.update(apiKey, usage.Properties.USER, 1)
     }
     await userController.create(ctx)
diff --git a/packages/server/src/automations/steps/deleteRow.js b/packages/server/src/automations/steps/deleteRow.js
index 3858296e90..f4884caad3 100644
--- a/packages/server/src/automations/steps/deleteRow.js
+++ b/packages/server/src/automations/steps/deleteRow.js
@@ -1,5 +1,5 @@
 const rowController = require("../../api/controllers/row")
-const environment = require("../../environment")
+const env = require("../../environment")
 const usage = require("../../utilities/usageQuota")
 
 module.exports.definition = {
@@ -50,7 +50,7 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, instanceId, apiKey }) {
+module.exports.run = async function({ inputs, appId, apiKey }) {
   // TODO: better logging of when actions are missed due to missing parameters
   if (inputs.id == null || inputs.revision == null) {
     return
@@ -61,11 +61,11 @@ module.exports.run = async function({ inputs, instanceId, apiKey }) {
       rowId: inputs.id,
       revId: inputs.revision,
     },
-    user: { instanceId },
+    user: { appId },
   }
 
   try {
-    if (environment.CLOUD) {
+    if (env.CLOUD) {
       await usage.update(apiKey, usage.Properties.ROW, -1)
     }
     await rowController.destroy(ctx)
diff --git a/packages/server/src/automations/steps/updateRow.js b/packages/server/src/automations/steps/updateRow.js
index e443f7e745..b134ebfa9c 100644
--- a/packages/server/src/automations/steps/updateRow.js
+++ b/packages/server/src/automations/steps/updateRow.js
@@ -53,13 +53,13 @@ module.exports.definition = {
   },
 }
 
-module.exports.run = async function({ inputs, instanceId }) {
+module.exports.run = async function({ inputs, appId }) {
   if (inputs.rowId == null || inputs.row == null) {
     return
   }
 
   inputs.row = await automationUtils.cleanUpRowById(
-    instanceId,
+    appId,
     inputs.rowId,
     inputs.row
   )
@@ -78,7 +78,7 @@ module.exports.run = async function({ inputs, instanceId }) {
     request: {
       body: inputs.row,
     },
-    user: { instanceId },
+    user: { appId },
   }
 
   try {
diff --git a/packages/server/src/automations/thread.js b/packages/server/src/automations/thread.js
index 6b29fce1c1..26ca8f04a3 100644
--- a/packages/server/src/automations/thread.js
+++ b/packages/server/src/automations/thread.js
@@ -32,9 +32,9 @@ function recurseMustache(inputs, context) {
  */
 class Orchestrator {
   constructor(automation, triggerOutput) {
-    this._instanceId = triggerOutput.instanceId
+    this._appId = triggerOutput.appId
     // remove from context
-    delete triggerOutput.instanceId
+    delete triggerOutput.appId
     // step zero is never used as the mustache is zero indexed for customer facing
     this._context = { steps: [{}], trigger: triggerOutput }
     this._automation = automation
@@ -62,11 +62,11 @@ class Orchestrator {
         step.inputs,
         step.schema.inputs
       )
-      // instanceId is always passed
+      // appId is always passed
       try {
         const outputs = await stepFn({
           inputs: step.inputs,
-          instanceId: this._instanceId,
+          appId: this._appId,
           apiKey: automation.apiKey,
         })
         if (step.stepId === FILTER_STEP_ID && !outputs.success) {
diff --git a/packages/server/src/automations/triggers.js b/packages/server/src/automations/triggers.js
index 6dd163ea8e..5d2121df7b 100644
--- a/packages/server/src/automations/triggers.js
+++ b/packages/server/src/automations/triggers.js
@@ -122,10 +122,10 @@ const BUILTIN_DEFINITIONS = {
 }
 
 async function queueRelevantRowAutomations(event, eventType) {
-  if (event.instanceId == null) {
-    throw `No instanceId specified for ${eventType} - check event emitters.`
+  if (event.appId == null) {
+    throw `No appId specified for ${eventType} - check event emitters.`
   }
-  const db = new CouchDB(event.instanceId)
+  const db = new CouchDB(event.appId)
   let automations = await db.allDocs(
     getAutomationParams(null, { include_docs: true })
   )
@@ -169,7 +169,7 @@ emitter.on("row:delete", async function(event) {
 async function fillRowOutput(automation, params) {
   let triggerSchema = automation.definition.trigger
   let tableId = triggerSchema.inputs.tableId
-  const db = new CouchDB(params.instanceId)
+  const db = new CouchDB(params.appId)
   try {
     let table = await db.get(tableId)
     let row = {}
diff --git a/packages/server/src/db/clientDb.js b/packages/server/src/db/clientDb.js
deleted file mode 100644
index b85cd43110..0000000000
--- a/packages/server/src/db/clientDb.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const CouchDB = require("./client")
-
-exports.create = async clientId => {
-  const dbId = exports.name(clientId)
-  const db = new CouchDB(dbId)
-  await db.put({
-    _id: "_design/client",
-    views: {
-      by_type: {
-        map: `function(doc) {
-            emit([doc.type], doc._id)
-          }`,
-      },
-    },
-  })
-  return db
-}
-
-exports.destroy = async function(clientId) {
-  const dbId = exports.name(clientId)
-  await new CouchDB(dbId).destroy()
-}
-
-exports.name = function(clientId) {
-  return `client_${clientId}`
-}
diff --git a/packages/server/src/db/dynamoClient.js b/packages/server/src/db/dynamoClient.js
index 6250486bf7..fcba726f84 100644
--- a/packages/server/src/db/dynamoClient.js
+++ b/packages/server/src/db/dynamoClient.js
@@ -1,7 +1,7 @@
 let _ = require("lodash")
-let environment = require("../environment")
+let env = require("../environment")
 
-const AWS_REGION = environment.AWS_REGION ? environment.AWS_REGION : "eu-west-1"
+const AWS_REGION = env.AWS_REGION ? env.AWS_REGION : "eu-west-1"
 
 const TableInfo = {
   API_KEYS: {
@@ -110,8 +110,8 @@ exports.init = endpoint => {
   }
   if (endpoint) {
     docClientParams.endpoint = endpoint
-  } else if (environment.DYNAMO_ENDPOINT) {
-    docClientParams.endpoint = environment.DYNAMO_ENDPOINT
+  } else if (env.DYNAMO_ENDPOINT) {
+    docClientParams.endpoint = env.DYNAMO_ENDPOINT
   }
   docClient = new AWS.DynamoDB.DocumentClient(docClientParams)
 }
@@ -119,10 +119,10 @@ exports.init = endpoint => {
 exports.apiKeyTable = new Table(TableInfo.API_KEYS)
 exports.userTable = new Table(TableInfo.USERS)
 
-if (environment.CLOUD) {
+if (env.CLOUD) {
   exports.init(`https://dynamodb.${AWS_REGION}.amazonaws.com`)
 } else {
-  process.env.AWS_ACCESS_KEY_ID = "KEY_ID"
-  process.env.AWS_SECRET_ACCESS_KEY = "SECRET_KEY"
+  env._set("AWS_ACCESS_KEY_ID", "KEY_ID")
+  env._set("AWS_SECRET_ACCESS_KEY", "SECRET_KEY")
   exports.init("http://localhost:8333")
 }
diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js
index 5eed0bb4a8..d6116b76f6 100644
--- a/packages/server/src/db/linkedRows/LinkController.js
+++ b/packages/server/src/db/linkedRows/LinkController.js
@@ -40,9 +40,9 @@ function LinkDocument(
 }
 
 class LinkController {
-  constructor({ instanceId, tableId, row, table, oldTable }) {
-    this._instanceId = instanceId
-    this._db = new CouchDB(instanceId)
+  constructor({ appId, tableId, row, table, oldTable }) {
+    this._appId = appId
+    this._db = new CouchDB(appId)
     this._tableId = tableId
     this._row = row
     this._table = table
@@ -87,7 +87,7 @@ class LinkController {
    */
   getRowLinkDocs(rowId) {
     return getLinkDocuments({
-      instanceId: this._instanceId,
+      appId: this._appId,
       tableId: this._tableId,
       rowId,
       includeDocs: IncludeDocs.INCLUDE,
@@ -99,7 +99,7 @@ class LinkController {
    */
   getTableLinkDocs() {
     return getLinkDocuments({
-      instanceId: this._instanceId,
+      appId: this._appId,
       tableId: this._tableId,
       includeDocs: IncludeDocs.INCLUDE,
     })
diff --git a/packages/server/src/db/linkedRows/index.js b/packages/server/src/db/linkedRows/index.js
index 6f745b6e7c..02af98eef9 100644
--- a/packages/server/src/db/linkedRows/index.js
+++ b/packages/server/src/db/linkedRows/index.js
@@ -31,7 +31,7 @@ exports.createLinkView = createLinkView
  * Update link documents for a row or table - this is to be called by the API controller when a change is occurring.
  * @param {string} eventType states what type of change which is occurring, means this can be expanded upon in the
  * future quite easily (all updates go through one function).
- * @param {string} instanceId The ID of the instance in which the change is occurring.
+ * @param {string} appId The ID of the instance in which the change is occurring.
  * @param {string} tableId The ID of the of the table which is being changed.
  * @param {object|null} row The row which is changing, e.g. created, updated or deleted.
  * @param {object|null} table If the table has already been retrieved this can be used to reduce database gets.
@@ -41,14 +41,14 @@ exports.createLinkView = createLinkView
  */
 exports.updateLinks = async function({
   eventType,
-  instanceId,
+  appId,
   row,
   tableId,
   table,
   oldTable,
 }) {
   const baseReturnObj = row == null ? table : row
-  if (instanceId == null) {
+  if (appId == null) {
     throw "Cannot operate without an instance ID."
   }
   // make sure table ID is set
@@ -86,13 +86,13 @@ exports.updateLinks = async function({
 
 /**
  * Update a row with information about the links that pertain to it.
- * @param {string} instanceId The instance in which this row has been created.
+ * @param {string} appId The instance in which this row has been created.
  * @param {object} rows The row(s) themselves which is to be updated with info (if applicable). This can be
  * a single row object or an array of rows - both will be handled.
  * @returns {Promise<object>} The updated row (this may be the same if no links were found). If an array was input
  * then an array will be output, object input -> object output.
  */
-exports.attachLinkInfo = async (instanceId, rows) => {
+exports.attachLinkInfo = async (appId, rows) => {
   // handle a single row as well as multiple
   let wasArray = true
   if (!(rows instanceof Array)) {
@@ -105,7 +105,7 @@ exports.attachLinkInfo = async (instanceId, rows) => {
     await Promise.all(
       tableIds.map(tableId =>
         getLinkDocuments({
-          instanceId,
+          appId,
           tableId: tableId,
           includeDocs: IncludeDocs.EXCLUDE,
         })
diff --git a/packages/server/src/db/linkedRows/linkUtils.js b/packages/server/src/db/linkedRows/linkUtils.js
index 5f600cc3cb..dc9d8d3f1e 100644
--- a/packages/server/src/db/linkedRows/linkUtils.js
+++ b/packages/server/src/db/linkedRows/linkUtils.js
@@ -13,12 +13,12 @@ exports.IncludeDocs = {
 /**
  * Creates the link view for the instance, this will overwrite the existing one, but this should only
  * be called if it is found that the view does not exist.
- * @param {string} instanceId The instance to which the view should be added.
+ * @param {string} appId The instance to which the view should be added.
  * @returns {Promise<void>} The view now exists, please note that the next view of this query will actually build it,
  * so it may be slow.
  */
-exports.createLinkView = async instanceId => {
-  const db = new CouchDB(instanceId)
+exports.createLinkView = async appId => {
+  const db = new CouchDB(appId)
   const designDoc = await db.get("_design/database")
   const view = {
     map: function(doc) {
@@ -47,7 +47,7 @@ exports.createLinkView = async instanceId => {
 
 /**
  * Gets the linking documents, not the linked documents themselves.
- * @param {string} instanceId The instance in which we are searching for linked rows.
+ * @param {string} appId The instance in which we are searching for linked rows.
  * @param {string} tableId The table which we are searching for linked rows against.
  * @param {string|null} fieldName The name of column/field which is being altered, only looking for
  * linking documents that are related to it. If this is not specified then the table level will be assumed.
@@ -60,12 +60,12 @@ exports.createLinkView = async instanceId => {
  * (if any).
  */
 exports.getLinkDocuments = async function({
-  instanceId,
+  appId,
   tableId,
   rowId,
   includeDocs,
 }) {
-  const db = new CouchDB(instanceId)
+  const db = new CouchDB(appId)
   let params
   if (rowId != null) {
     params = { key: [tableId, rowId] }
@@ -85,7 +85,7 @@ exports.getLinkDocuments = async function({
   } catch (err) {
     // check if the view doesn't exist, it should for all new instances
     if (err != null && err.name === "not_found") {
-      await exports.createLinkView(instanceId)
+      await exports.createLinkView(appId)
       return exports.getLinkDocuments(arguments[0])
     } else {
       Sentry.captureException(err)
diff --git a/packages/server/src/db/utils.js b/packages/server/src/db/utils.js
index 673a340417..257f367478 100644
--- a/packages/server/src/db/utils.js
+++ b/packages/server/src/db/utils.js
@@ -12,6 +12,7 @@ const DocumentTypes = {
   APP: "app",
   ACCESS_LEVEL: "ac",
   WEBHOOK: "wh",
+  INSTANCE: "inst",
 }
 
 exports.DocumentTypes = DocumentTypes
diff --git a/packages/server/src/environment.js b/packages/server/src/environment.js
index 6e8c29cbb1..28fa74ddcd 100644
--- a/packages/server/src/environment.js
+++ b/packages/server/src/environment.js
@@ -21,6 +21,7 @@ module.exports = {
   COUCH_DB_URL: process.env.COUCH_DB_URL,
   SALT_ROUNDS: process.env.SALT_ROUNDS,
   LOGGER: process.env.LOGGER,
+  LOG_LEVEL: process.env.LOG_LEVEL,
   AUTOMATION_DIRECTORY: process.env.AUTOMATION_DIRECTORY,
   AUTOMATION_BUCKET: process.env.AUTOMATION_BUCKET,
   BUDIBASE_ENVIRONMENT: process.env.BUDIBASE_ENVIRONMENT,
@@ -30,4 +31,11 @@ module.exports = {
   AWS_REGION: process.env.AWS_REGION,
   DEPLOYMENT_CREDENTIALS_URL: process.env.DEPLOYMENT_CREDENTIALS_URL,
   BUDIBASE_API_KEY: process.env.BUDIBASE_API_KEY,
+  USERID_API_KEY: process.env.USERID_API_KEY,
+  ENABLE_ANALYTICS: process.env.ENABLE_ANALYTICS,
+  DEPLOYMENT_DB_URL: process.env.DEPLOYMENT_DB_URL,
+  _set(key, value) {
+    process.env[key] = value
+    module.exports[key] = value
+  },
 }
diff --git a/packages/server/src/events/index.js b/packages/server/src/events/index.js
index 4c4541741c..237e212293 100644
--- a/packages/server/src/events/index.js
+++ b/packages/server/src/events/index.js
@@ -11,10 +11,10 @@ const EventEmitter = require("events").EventEmitter
  * This is specifically quite important for mustache used in automations.
  */
 class BudibaseEmitter extends EventEmitter {
-  emitRow(eventName, instanceId, row, table = null) {
+  emitRow(eventName, appId, row, table = null) {
     let event = {
       row,
-      instanceId,
+      appId,
       tableId: row.tableId,
     }
     if (table) {
@@ -27,14 +27,14 @@ class BudibaseEmitter extends EventEmitter {
     this.emit(eventName, event)
   }
 
-  emitTable(eventName, instanceId, table = null) {
+  emitTable(eventName, appId, table = null) {
     const tableId = table._id
     let event = {
       table: {
         ...table,
         tableId: tableId,
       },
-      instanceId,
+      appId,
       tableId: tableId,
     }
     event.id = tableId
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index ba5da28f63..74f133cbde 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -7,7 +7,7 @@ const {
   BUILDER_LEVEL_ID,
   ANON_LEVEL_ID,
 } = require("../utilities/accessLevels")
-const environment = require("../environment")
+const env = require("../environment")
 const { AuthTypes } = require("../constants")
 
 module.exports = async (ctx, next) => {
@@ -21,7 +21,7 @@ module.exports = async (ctx, next) => {
 
   let token
   // if running locally in the builder itself
-  if (!environment.CLOUD && !appToken) {
+  if (!env.CLOUD && !appToken) {
     token = builderToken
     ctx.auth.authenticated = AuthTypes.BUILDER
   } else {
@@ -32,7 +32,7 @@ module.exports = async (ctx, next) => {
   if (!token) {
     ctx.auth.authenticated = false
 
-    let appId = process.env.CLOUD ? ctx.subdomains[1] : ctx.params.appId
+    let appId = env.CLOUD ? ctx.subdomains[1] : ctx.params.appId
 
     // if appId can't be determined from path param or subdomain
     if (!appId && ctx.request.headers.referer) {
@@ -53,9 +53,9 @@ module.exports = async (ctx, next) => {
     ctx.auth.apiKey = jwtPayload.apiKey
     ctx.user = {
       ...jwtPayload,
-      instanceId: jwtPayload.instanceId,
+      appId: jwtPayload.appId,
       accessLevel: await getAccessLevel(
-        jwtPayload.instanceId,
+        jwtPayload.appId,
         jwtPayload.accessLevelId
       ),
     }
@@ -70,10 +70,10 @@ module.exports = async (ctx, next) => {
  * Return the full access level object either from constants
  * or the database based on the access level ID passed.
  *
- * @param {*} instanceId - instanceId of the user
+ * @param {*} appId - appId of the user
  * @param {*} accessLevelId - the id of the users access level
  */
-const getAccessLevel = async (instanceId, accessLevelId) => {
+const getAccessLevel = async (appId, accessLevelId) => {
   if (
     accessLevelId === POWERUSER_LEVEL_ID ||
     accessLevelId === ADMIN_LEVEL_ID ||
@@ -92,7 +92,7 @@ const getAccessLevel = async (instanceId, accessLevelId) => {
       levelId: accessLevelId,
     },
     user: {
-      instanceId,
+      appId,
     },
   }
   await accessLevelController.find(findAccessContext)
diff --git a/packages/server/src/middleware/authorized.js b/packages/server/src/middleware/authorized.js
index 9f9337b959..34758903f3 100644
--- a/packages/server/src/middleware/authorized.js
+++ b/packages/server/src/middleware/authorized.js
@@ -5,7 +5,7 @@ const {
   BUILDER_LEVEL_ID,
   BUILDER,
 } = require("../utilities/accessLevels")
-const environment = require("../environment")
+const env = require("../environment")
 const { apiKeyTable } = require("../db/dynamoClient")
 const { AuthTypes } = require("../constants")
 
@@ -13,14 +13,10 @@ const LOCAL_PASS = new RegExp(["webhooks/trigger", "webhooks/schema"].join("|"))
 
 module.exports = (permName, getItemId) => async (ctx, next) => {
   // webhooks can pass locally
-  if (!environment.CLOUD && LOCAL_PASS.test(ctx.request.url)) {
+  if (!env.CLOUD && LOCAL_PASS.test(ctx.request.url)) {
     return next()
   }
-  if (
-    environment.CLOUD &&
-    ctx.headers["x-api-key"] &&
-    ctx.headers["x-instanceid"]
-  ) {
+  if (env.CLOUD && ctx.headers["x-api-key"] && ctx.headers["x-instanceid"]) {
     // api key header passed by external webhook
     const apiKeyInfo = await apiKeyTable.get({
       primary: ctx.headers["x-api-key"],
@@ -32,7 +28,7 @@ module.exports = (permName, getItemId) => async (ctx, next) => {
         apiKey: ctx.headers["x-api-key"],
       }
       ctx.user = {
-        instanceId: ctx.headers["x-instanceid"],
+        appId: ctx.headers["x-instanceid"],
       }
       return next()
     }
@@ -41,7 +37,7 @@ module.exports = (permName, getItemId) => async (ctx, next) => {
   }
 
   // don't expose builder endpoints in the cloud
-  if (environment.CLOUD && permName === BUILDER) return
+  if (env.CLOUD && permName === BUILDER) return
 
   if (!ctx.auth.authenticated) {
     ctx.throw(403, "Session not authenticated")
diff --git a/packages/server/src/middleware/usageQuota.js b/packages/server/src/middleware/usageQuota.js
index eecaa75c8b..39e387bd5a 100644
--- a/packages/server/src/middleware/usageQuota.js
+++ b/packages/server/src/middleware/usageQuota.js
@@ -1,6 +1,6 @@
 const CouchDB = require("../db")
 const usageQuota = require("../utilities/usageQuota")
-const environment = require("../environment")
+const env = require("../environment")
 
 // currently only counting new writes and deletes
 const METHOD_MAP = {
@@ -27,7 +27,7 @@ function getProperty(url) {
 }
 
 module.exports = async (ctx, next) => {
-  const db = new CouchDB(ctx.user.instanceId)
+  const db = new CouchDB(ctx.user.appId)
   let usage = METHOD_MAP[ctx.req.method]
   const property = getProperty(ctx.req.url)
   if (usage == null || property == null) {
@@ -51,7 +51,7 @@ module.exports = async (ctx, next) => {
         : [ctx.request.files.file]
     usage = files.map(file => file.size).reduce((total, size) => total + size)
   }
-  if (!environment.CLOUD) {
+  if (!env.CLOUD) {
     return next()
   }
   try {
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index 44d30a65f1..ecd63a6284 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -30,7 +30,7 @@
         "className": "",
         "onLoad": [],
         "type": "div",
-        "_instanceId": "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
+        "_appId": "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
         "_instanceName": "Header",
         "_children": [
           {
@@ -59,7 +59,7 @@
             "borderWidth": "",
             "borderColor": "",
             "borderStyle": "",
-            "_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
+            "_appId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
             "_instanceName": "Navigation",
             "_children": [
               {
@@ -88,7 +88,7 @@
                 "underline": false,
                 "fontSize": "",
                 "fontFamily": "initial",
-                "_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
+                "_appId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
                 "_instanceName": "Home Link",
                 "_children": []
               }
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
index 5afcf244f2..4104dcdb1e 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
@@ -36,7 +36,7 @@
         "className": "",
         "text": "Welcome to your Budibase App 👋",
         "type": "h2",
-        "_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
+        "_appId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
         "_instanceName": "Heading",
         "_children": []
       },
@@ -62,7 +62,7 @@
         "className": "",
         "onLoad": [],
         "type": "div",
-        "_instanceId": "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
+        "_appId": "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
         "_instanceName": "Video Container",
         "_children": [
           {
@@ -88,7 +88,7 @@
             },
             "_code": "",
             "embed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
-            "_instanceId": "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
+            "_appId": "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
             "_instanceName": "Rick Astley Video",
             "_children": []
           }
diff --git a/packages/server/src/utilities/builder/index.js b/packages/server/src/utilities/builder/index.js
index a74d5cd0b2..dbc2ce6bf5 100644
--- a/packages/server/src/utilities/builder/index.js
+++ b/packages/server/src/utilities/builder/index.js
@@ -10,7 +10,6 @@ const {
 } = require("fs-extra")
 const { join, resolve } = require("../centralPath")
 const { dirname } = require("path")
-const env = require("../../environment")
 
 const buildPage = require("./buildPage")
 const getPages = require("./getPages")
@@ -30,10 +29,7 @@ module.exports.getPackageForBuilder = async (config, application) => {
 
   return {
     pages,
-
     application,
-
-    clientId: env.CLIENT_ID,
   }
 }
 
diff --git a/packages/server/src/utilities/builder/setBuilderToken.js b/packages/server/src/utilities/builder/setBuilderToken.js
index eb1155a207..fca3e0724f 100644
--- a/packages/server/src/utilities/builder/setBuilderToken.js
+++ b/packages/server/src/utilities/builder/setBuilderToken.js
@@ -1,17 +1,16 @@
 const { BUILDER_LEVEL_ID } = require("../accessLevels")
-const environment = require("../../environment")
+const env = require("../../environment")
 const jwt = require("jsonwebtoken")
 
-module.exports = (ctx, appId, instanceId, version) => {
+module.exports = (ctx, appId, version) => {
   const builderUser = {
     userId: "BUILDER",
     accessLevelId: BUILDER_LEVEL_ID,
-    instanceId,
     appId,
     version,
   }
-  if (environment.BUDIBASE_API_KEY) {
-    builderUser.apiKey = environment.BUDIBASE_API_KEY
+  if (env.BUDIBASE_API_KEY) {
+    builderUser.apiKey = env.BUDIBASE_API_KEY
   }
   const token = jwt.sign(builderUser, ctx.config.jwtSecret, {
     expiresIn: "30 days",
diff --git a/packages/server/src/utilities/index.js b/packages/server/src/utilities/index.js
index e17a01b173..9275659b3c 100644
--- a/packages/server/src/utilities/index.js
+++ b/packages/server/src/utilities/index.js
@@ -1,9 +1,12 @@
+const env = require("../environment")
+
 exports.wait = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 exports.isDev = () => {
   return (
-    process.env.NODE_ENV !== "production" &&
-    process.env.NODE_ENV !== "jest" &&
-    process.env.NODE_ENV !== "cypress"
+    !env.CLOUD &&
+    env.NODE_ENV !== "production" &&
+    env.NODE_ENV !== "jest" &&
+    env.NODE_ENV !== "cypress"
   )
 }
diff --git a/packages/server/src/utilities/initialiseBudibase.js b/packages/server/src/utilities/initialiseBudibase.js
index be3253117c..4e6902a50f 100644
--- a/packages/server/src/utilities/initialiseBudibase.js
+++ b/packages/server/src/utilities/initialiseBudibase.js
@@ -7,13 +7,7 @@ module.exports = async opts => {
   await ensureDir(opts.dir)
   await setCouchDbUrl(opts)
 
-  // need an env file to create the client database
-  await createDevEnvFile(opts)
-  await createClientDatabase(opts)
-
-  // need to recreate the env file, as we only now have a client id
-  // quiet flag will force overwrite of config
-  opts.quiet = true
+  // need an env file
   await createDevEnvFile(opts)
 }
 
@@ -41,15 +35,3 @@ const createDevEnvFile = async opts => {
     await writeFile(destConfigFile, config, { flag: "w+" })
   }
 }
-
-const createClientDatabase = async opts => {
-  // cannot be a top level require as it
-  // will cause environment module to be loaded prematurely
-  const clientDb = require("../db/clientDb")
-
-  if (!opts.clientId || opts.clientId === "new") {
-    opts.clientId = uuid.v4()
-  }
-
-  await clientDb.create(opts.clientId)
-}
diff --git a/packages/server/src/utilities/permissions.js b/packages/server/src/utilities/permissions.js
index 8cd30c9ff8..e1513fd0fa 100644
--- a/packages/server/src/utilities/permissions.js
+++ b/packages/server/src/utilities/permissions.js
@@ -4,15 +4,15 @@ const automationController = require("../api/controllers/automation")
 const accessLevels = require("./accessLevels")
 
 // this has been broken out to reduce risk of circular dependency from utilities, no enums defined here
-const generateAdminPermissions = async instanceId => [
+const generateAdminPermissions = async appId => [
   ...accessLevels.adminPermissions,
-  ...(await generatePowerUserPermissions(instanceId)),
+  ...(await generatePowerUserPermissions(appId)),
 ]
 
-const generatePowerUserPermissions = async instanceId => {
+const generatePowerUserPermissions = async appId => {
   const fetchTablesCtx = {
     user: {
-      instanceId,
+      appId,
     },
   }
   await tableController.fetch(fetchTablesCtx)
@@ -20,7 +20,7 @@ const generatePowerUserPermissions = async instanceId => {
 
   const fetchViewsCtx = {
     user: {
-      instanceId,
+      appId,
     },
   }
   await viewController.fetch(fetchViewsCtx)
@@ -28,7 +28,7 @@ const generatePowerUserPermissions = async instanceId => {
 
   const fetchAutomationsCtx = {
     user: {
-      instanceId,
+      appId,
     },
   }
   await automationController.fetch(fetchAutomationsCtx)
diff --git a/packages/server/src/utilities/templates.js b/packages/server/src/utilities/templates.js
index 626f1d003b..11150261ec 100644
--- a/packages/server/src/utilities/templates.js
+++ b/packages/server/src/utilities/templates.js
@@ -33,11 +33,7 @@ exports.downloadTemplate = async function(type, name) {
   return join(budibaseAppsDir(), "templates", type, name)
 }
 
-exports.exportTemplateFromApp = async function({
-  appId,
-  templateName,
-  instanceId,
-}) {
+exports.exportTemplateFromApp = async function({ templateName, appId }) {
   // Copy frontend files
   const appToExport = join(os.homedir(), ".budibase", appId, "pages")
   const templatesDir = join(os.homedir(), ".budibase", "templates")
@@ -52,7 +48,7 @@ exports.exportTemplateFromApp = async function({
   )
 
   // perform couch dump
-  const instanceDb = new CouchDB(instanceId)
+  const instanceDb = new CouchDB(appId)
 
   await instanceDb.dump(writeStream)
   return templateOutputPath
diff --git a/packages/server/src/utilities/usageQuota.js b/packages/server/src/utilities/usageQuota.js
index 33b2103582..81320eaec0 100644
--- a/packages/server/src/utilities/usageQuota.js
+++ b/packages/server/src/utilities/usageQuota.js
@@ -1,4 +1,4 @@
-const environment = require("../environment")
+const env = require("../environment")
 const { apiKeyTable } = require("../db/dynamoClient")
 
 const DEFAULT_USAGE = {
@@ -63,7 +63,7 @@ exports.getAPIKey = async appId => {
  */
 exports.update = async (apiKey, property, usage) => {
   // don't try validate in builder
-  if (!environment.CLOUD) {
+  if (!env.CLOUD) {
     return
   }
   try {
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 1e28e09ece..739154e961 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -200,15 +200,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.2.6":
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.6.tgz#de1b4872c7956d386a3b08969eda509bd39d1a64"
-  integrity sha512-sSoGN0k2Tcc5GewBjFMN+G3h21O9JvakYI33kBKgEVGrdEQLBbry7vRKb+lALeW2Bz65gafZL2joZzL8vnH0lw==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1236,11 +1227,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1313,13 +1299,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sdk@^2.767.0:
   version "2.771.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.771.0.tgz#ff4beb0a04d6ab1ae962c85dfb42e3e9bfe2b93b"
@@ -1352,13 +1331,6 @@ axios@^0.19.2:
   dependencies:
     follow-redirects "1.5.10"
 
-axios@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
-  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
-  dependencies:
-    follow-redirects "^1.10.0"
-
 babel-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
@@ -2192,26 +2164,6 @@ decompress@^4.2.1:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
-  dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2585,7 +2537,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.7"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
   integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
@@ -2602,7 +2554,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstrac
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
+es-abstract@^1.18.0-next.0:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
   integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@@ -2620,19 +2572,6 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3185,11 +3124,6 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-follow-redirects@^1.10.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
-  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3834,21 +3768,11 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3856,11 +3780,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3897,7 +3816,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3977,11 +3896,6 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
@@ -3997,11 +3911,6 @@ is-npm@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4053,21 +3962,11 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -4084,16 +3983,6 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4104,16 +3993,6 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4139,11 +4018,6 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -5677,14 +5551,6 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-is@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
-  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -6554,19 +6420,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -6926,14 +6779,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7961,44 +7806,11 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index d19b2ad85f..9adb3c02cf 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -92,7 +92,7 @@
 		]
 	},
 	"input": {
-		"name": "Input",
+		"name": "Textfield",
 		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
@@ -222,6 +222,7 @@
 		}
 	},
 	"datagrid": {
+		"name": "Grid",
 		"description": "a datagrid component with functionality to add, remove and edit rows.",
 		"data": true,
 		"props": {
@@ -250,11 +251,13 @@
 		}
 	},
 	"dataform": {
+		"name": "Form",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
 	},
 	"dataformwide": {
+		"name": "Form Wide",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
@@ -275,6 +278,7 @@
 		}
 	},
 	"list": {
+		"name": "Repeater",
 		"description": "A configurable data list that attaches to your backend tables.",
 		"context": "datasource",
 		"children": true,
@@ -296,6 +300,7 @@
 		}
 	},
 	"rowdetail": {
+		"name": "Row Detail",
 		"description": "Loads a row, using an ID in the url",
 		"context": "table",
 		"children": true,
@@ -306,6 +311,7 @@
 		}
 	},
 	"newrow": {
+		"name": "New Row",
 		"description": "Prepares a new row for creation",
 		"context": "table",
 		"children": true,
@@ -673,6 +679,7 @@
 		}
 	},
 	"datepicker": {
+		"name": "Date Picker",
 		"description": "Date Picker",
 		"bindable": "value",
 		"props": {
@@ -704,6 +711,7 @@
 		}
 	},
 	"link": {
+		"name": "Link",
 		"description": "an HTML anchor <a> tag",
 		"props": {
 			"url": "string",
@@ -796,14 +804,14 @@
 		"tags": []
 	},
 	"thead": {
-		"name": "TableHead",
+		"name": "Table Head",
 		"description": "an HTML <thead> tab",
 		"props": {
 			"className": "string"
 		}
 	},
 	"tbody": {
-		"name": "TableBody",
+		"name": "Table Body",
 		"description": "an HTML <tbody> tab",
 		"props": {
 			"className": "string"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index c7261f319f..519089ef35 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -13,7 +13,7 @@
     "dev:builder": "rollup -cw"
   },
   "devDependencies": {
-    "@budibase/client": "^0.2.6",
+    "@budibase/client": "^0.3.1",
     "@rollup/plugin-commonjs": "^11.1.0",
     "lodash": "^4.17.15",
     "rollup": "^2.11.2",
@@ -31,12 +31,12 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.2.6",
+  "version": "0.3.1",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.44.1",
+    "@budibase/bbui": "^1.46.0",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
index 9d68c920c2..5f6e8056b7 100644
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@@ -2,7 +2,7 @@
   import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
   import { FILE_TYPES } from "./fileTypes"
 
-  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
 
   export let files = []